Echarts柱狀圖堆疊顯示總數

網上看了很多方法不是我想要的,自己簡單的想了想並記錄一下.

直接上代碼。

   //堆疊用stack 相同即可堆疊 頂部顯示數據可以自己定義
          {
            name: 'N上',
            color: '#77a5d3',
            type: 'bar',
            stack: 'N',
            data: this.ElectrodeUpN,
          },
          {
            name: 'N下',
            color: '#77a5d3',
            type: 'bar',
            stack: 'N',
            data: this.ElectrodeDownN,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 10,
                  },
                  formatter: function (params) {
                    if (that.count > 11) {
                      that.count = 0
                    } else {
                      that.count++
                    }
                    if (params.value !== '') {
                      params.value = Number(params.value)
                    }
                    if (that.ElectrodeUpN[that.count - 1] !== '') {
                      that.ElectrodeUpN[that.count - 1] = Number(
                        that.ElectrodeUpN[that.count - 1]
                      )
                    }
                    return params.value + that.ElectrodeUpN[that.count - 1]
                  },
                },
              },
            },
          },

兩個數據都是屬於堆棧N的,formatter屬性中的方法經過實驗會循環調用的次數是根據你的data數組的長度,思路就是用一個計數器count每次進入這個方法就加一,用params.value加上另一個的數據即arr[count] 這樣就可以顯示總和了.計數器需要清零，這邊直接賦值給1,這邊定義的數據都是字符串,目的是為了當總數為0的時候不顯示總數.美化效果.如果不是堆疊圖,將formatter屬性刪除即可.