echarts堆疊條形圖計算總數（）

echart堆疊條形圖計算總數

先上圖

首先寫入一個數據用於最上邊總數的展示

option配置如下

option = {
        title: {
          text: '未處理'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐標軸指示器，坐標軸觸發有效
            type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
          },
          formatter: (param, ticket, callback) => {
            var str = ''
            for (const item of param) {
              item.seriesName && (str += item.marker + ' ' + item.seriesName + '：' + item.value + '<br>')
            }
            return str
          }
        },
        legend: {
          data: ['高危', '中低', '低危'],
          right: '20px'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          width: '100%',
          containLabel: true
        },
        xAxis: {
          data:  ['業務系統1', '業務系統1', '業務系統1', '業務系統1', '業務系統1', '業務系統1', '業務系統1']
        },
        yAxis: {
          type: 'value'

        },
        series: [
          {
            name: '高危',
            type: 'bar',
            color: '#F56C6C',
            barWidth: 30,
            stack: '總量',
            label: {
              show: true
            },
            data: [50, 60, 59, 50, 50, 50, 50]
          },
          {
            name: '中低',
            type: 'bar',
            stack: '總量',
            color: '#F5AF45',
            barWidth: 30,
            label: {
              show: true
            },
            data: [70, 70, 70, 70, 70, 70, 70]
          },
          {
            name: '低危',
            type: 'bar',
            color: '#8BC663',
            stack: '總量',
            barWidth: 30,
            label: {
              show: true
            },
            data: [70, 70, 70, 70, 70, 70, 70]
          },
          {
            name: '',
            type: 'bar',
            data: [0,0,0,0,0,0,0,],
            color: '#bbf',
            stack: '總量',
            barWidth: 30,
            label: {
              show: true,
              position: 'top',
              color: 'black'
            }
          }
    
        ]
      };

效果如圖，其中通過formatter進行tooltip的篩選，出現一個總和為0的樣式

接着在option外部對數據進行操作,使得最后一項的數據是前三項的總和

 var series = option.series
      function getSum (params) {
        var datavalue = 0
        for (var i = 0; i < series.length; i++) {
          datavalue += series[i].data[params.dataIndex]
        }
        return datavalue
      }
      series[series.length - 1].label.formatter = getSum
      myChart.setOption(option)

至此可完成基本效果，

但是 ！！但是！！但是

echarts數據還有一個篩選功能，如圖：可以將點擊高危，使其顏色變為灰色並且不展示，此時還要讓總數隨之變化

此時需要對數據監聽，在點擊圖標時會觸發以下函數，先將回調的函數進行打印可看到如下結果

 myChart.on('legendselectchanged', (obj) => {
        console.log(obj)
      })

也就是selected可查看當前選中狀態，而之前的series[i]中的name即為對應的鍵值，因此只需判斷是否存在該點即可將未選擇的點過濾掉，接下來在對其進行因此setOption即可

 myChart.on('legendselectchanged', (obj) => {
        function getSum (params) {
          var datavalue = 0
          for (var i = 0; i < series.length; i++) {
            if (obj.selected[series[i].name]) {
              datavalue += series[i].data[params.dataIndex]
            }
          }
          return datavalue
        }
        series[series.length - 1].label.formatter = getSum
        myChart.setOption(option)
      })