(vue+echarts)堆叠图显示百分之多少

<template>
  <div>
    <div id="textEcharts" style="width:100%;height: 295px;"></div>
  </div>
</template>

<script>
export default {
  name: 'textEcharts',
  data() {
    return {
      dataItem:[
        {
          "key": "1",
          "label": "一类",
          "oneLevel": 5,
          "twoLevel": 10,
          "threeLevel": 15,
        },
        {
          "key": "2",
          "label": "二类",
          "oneLevel": 19,
          "twoLevel": 15,
          "threeLevel": 20,
        },
        {
          "key": "3",
          "label": "三类",
          "oneLevel": 4,
          "twoLevel": 5,
          "threeLevel": 0,
        }
      ],
      valData: [[],[],[]],
      legendData: {
        data: ['[0-10]','[10-20]', '[20-30]']
      },
      seriesData: [
        { name: '[0-10]', type: 'bar', stack: 'total', label: { show: true, formatter: this.formatterFun }, emphasis: { focus: 'series' },
          data: [0, 0, 0],
        },
        { name: '[10-20]', type: 'bar', stack: 'total', label: { show: true, formatter: this.formatterFun }, emphasis: { focus: 'series' },
          data: [0, 0, 0]
        },
        { name: '[20-30]', type: 'bar', stack: 'total', label: { show: true, formatter: this.formatterFun }, emphasis: { focus: 'series' },
          data: [0, 0, 0]
        }
      ],
      xAxis: {
        type: 'category',
        axisLabel:{interval:0,rotate:0},
        data: []
      },
    }
  },
  methods: {
    //获取数据
    getData(){
      for (let item of  this.seriesData) {
        item.data = [];
      }
      this.drawChart();
    },

    // 堆叠条形图
    drawChart() {
      this.xAxis.data=[];
      // 基于准备好的dom，初始化echarts实例
      let textEcharts = this.$echarts.init(document.getElementById("textEcharts"));
      let item = this.dataItem;

      for (let i of item) {
        //获取x轴显动态示
        this.xAxis.data.push(i.label);

        let index = this.xAxis.data.indexOf(i.label);
        let sum = i.oneLevel + i.twoLevel + i.threeLevel ;

        //计算当前数据占百分之多少
        this.seriesData[0].data[index] = (parseFloat(i.oneLevel)/parseFloat(sum)*100).toFixed(2)
        this.seriesData[1].data[index] = (parseFloat(i.twoLevel)/parseFloat(sum)*100).toFixed(2)
        this.seriesData[2].data[index] = (parseFloat(i.threeLevel)/parseFloat(sum)*100).toFixed(2)
        this.valData[0][index] = i.oneLevel;
        this.valData[1][index] = i.twoLevel;
        this.valData[2][index] = i.threeLevel;
      }
      let xAxisData = this.xAxis.data;
      //x轴倾斜
      if (item.length > 9) {
        this.xAxis.axisLabel.rotate = 45
      } else {
        this.xAxis.axisLabel.rotate = 0
      }
      let seriesData = this.seriesData;
      let valData = this.valData;
      // 指定图表的配置项和数据
      let option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
          formatter: function(params) {//这里就是控制显示的样式
            let relVal = params[0].name;
            let serieIdx = xAxisData.indexOf(params[0].name);
            for (let i = 0, l = params.length; i < l; i++) {
              //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
              relVal += '<br/>'+ params[i].marker + params[i].seriesName + '  : 数量 : '+ parseFloat(valData[i][serieIdx]) +', 百分比 : ' + seriesData[i]['data'][serieIdx] + "%";
            }
            return relVal;
          },
        },
        legend:[{top:'bottom'}, {data: this.legendData}],
        grid: { top:'10%', left: '4%', right: '5%', bottom: '23%', containLabel: true },
        xAxis:this.xAxis,
        yAxis: [
          { type: 'value',
            axisLabel: { show: true, interval: 'auto', formatter: '{value} %' },
            show: true, max:100, min:0
          }
        ],
        series:this.seriesData,
        color:['#c2b5e5', '#cddc79','#f6cca6'],
      };
      // 使用刚指定的配置项和数据显示图表。
      textEcharts.setOption(option,true);
      window.addEventListener("resize",function(){
        textEcharts.resize();
      });
    },
    formatterFun: function(params) {
      let seriesIndex = params.seriesIndex;
      let dataIndex = params.dataIndex;
      let val = this.valData[seriesIndex][dataIndex]
      return val === 0 ? '' : val + '';
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>

</style>