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>