Vue中ECharts

Vue中ECharts"/>

Vue中ECharts

Vue中ECharts-bar堆叠条形图的使用

• 引入
• 效果图
• 实现需求（框架修改或不提供部分）
• 实现源码
• • • html代码：
    • javascript代码：
    • css代码：

引入

下载安装：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 = ['', '', thispanySecurity] // 公司社保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].namefor (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>