Vue中ECharts-bar堆叠条形图的使用
Vue中ECharts-bar堆叠条形图的使用引入效果图实现需求(框架修改或不提供部分)实现源码html代码:javascript代码:css代码:引入下载安装:npm install echarts --save 全局引入:import echarts from 'echarts' //引入echartsVue.prototype.$echarts = echarts /...
·
Vue中ECharts-bar堆叠条形图的使用
引入
下载安装:npm install echarts --save
全局引入:import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //引入组件
局部引入:
// 引入 ECharts 主模块 let echarts = require('echarts/lib/echarts') // 引入柱状图 require('echarts/lib/chart/bar') // 引入提示框、标题组件、图例 require('echarts/lib/component/tooltip') require('echarts/lib/component/graphic') require('echarts/lib/component/legend') ... // 按需引入
效果图
实现需求(框架修改或不提供部分)
1 实发只显示实发薪金,应发显示实发薪金、个人社保、个人所得税,公司承担显示5项
2 在每一个堆叠条形图上显示总计:建立一个新的总计条形,值为每一个模块的总值,但是令其不显示,只显示他的值,位置在insideBottom
3 提示框tooltip只显示有值的项
实现源码
(注释里解释了用法)
html代码:
<div class="echart-sheet">
<!--堆叠条形图-->
<div id="main" style="width: 100%; height: 100%;"></div>
</div>
javascript代码:
data () {
return {
totalPay: '', // 所有金额
welfare: '', // 福利金额
realSalary: '', // 实发薪金
personSecurity: '', // 个人社保公积金
companySecurity: '', // 公司社保公积金
incomeTax: '' // 个人所得税
},
created () {
},
mounted () {
this.$nextTick(function() {
this.drawPie('main')
}) // 延迟调用
},
methods: {
// 绘制柱状图
drawPie(id) {
this.charts = echarts.init(document.getElementById(id))
let data1 = [this.realSalary, this.realSalary, this.realSalary] // 实发
let data2 = ['', this.personSecurity, this.personSecurity] // 个人
let data3 = ['', this.incomeTax, this.incomeTax] // 个人所得税
let data4 = ['', '', this.companySecurity] // 公司社保
let data5 = ['', '', this.welfare] // 福利
// 总计的计算
let dataSum = (function () {
let datas = []
for (let i = 0; i < data1.length; i++) {
datas.push(data1[i] + data2[i] + data3[i] + data4[i] + data5[i])
}
return datas
}())
this.charts.setOption({
tooltip: {
trigger: 'axis',
show: true,
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
let relVal = params[0].name
for (let i = 0, l = params.length; i < l; i++) {
if (params[i].value) {
relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value
}
}
return relVal
} // 让为0的值不显示
}, // 提示框
legend: {
data: ['实发薪金', '个人社保公积金', '个人所得税', '公司社保公积金', '福利']
// selectedMode: false // 取消图例点击动态效果
},
grid: {
top: '23%',
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['实发', '应发', '公司承担成本']
},
yAxis: {
type: 'value',
max: function(value) {
return value.max * 0.5 // 因为统计功能使得最大刻度为原来的两倍,此处让其还原
}
},
series: [
{
name: '实发薪金',
type: 'bar',
stack: 'sum',
label: {
normal: {
formatter: function(params) {
if (params.value > 0) {
return params.value
} else {
return ''
}
}, // 为0时不显示
show: true,
position: 'insideRight'
}
},
itemStyle: {
color: '#2661FF'
},
barWidth: 40, // 宽度
data: data1
},
{
name: '个人社保公积金',
type: 'bar',
stack: 'sum',
label: {
normal: {
formatter: function(params) {
if (params.value > 0) {
return params.value
} else {
return ''
}
}, // 为0时不显示
show: true,
position: 'insideRight'
}
},
itemStyle: {
color: '#638EFF'
},
barWidth: 40, // 宽度
data: data2
},
{
name: '个人所得税',
type: 'bar',
stack: 'sum',
label: {
normal: {
formatter: function(params) {
if (params.value > 0) {
return params.value
} else {
return ''
}
}, // 为0时不显示
show: true,
position: 'insideRight'
}
},
itemStyle: {
color: '#99B6FF'
},
barWidth: 40, // 宽度
data: data3
},
{
name: '公司社保公积金',
type: 'bar',
stack: 'sum',
label: {
normal: {
formatter: function(params) {
if (params.value > 0) {
return params.value
} else {
return ''
}
}, // 为0时不显示
show: true,
position: 'insideRight'
}
},
itemStyle: {
color: '#FFA722'
},
barWidth: 40, // 宽度
data: data4
},
{
name: '福利',
type: 'bar',
stack: 'sum',
label: {
normal: {
formatter: function(params) {
if (params.value > 0) {
return params.value
} else {
return ''
}
}, // 为0时不显示
show: true,
position: 'insideRight'
}
},
itemStyle: {
color: '#FFCD81'
},
barWidth: 40, // 宽度
data: data5
},
{
name: '总计',
type: 'bar',
stack: 'sum',
label: {
normal: {
// offset: [0, 0],
show: true,
position: 'insideBottom',
formatter: '{c}',
textStyle: { color: '#333333' }
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)'
}
},
data: dataSum
}
]
})
},
}
css代码:
<style lang="scss">
// 不多赘述,给div echart-sheet一个想要的宽高就行
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)