echarts數據可視化實現多個柱狀堆疊圖頂部顯示總數示例

更新時間：2023年07月19日 10:38:04 作者：Smith

這篇文章主要為大家介紹了echarts實現多個柱狀堆疊圖頂部顯示總數示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

效果圖

左邊的柱狀圖頂部顯示所有堆疊圖數據的總和右邊柱狀圖頂部也顯示所有堆疊數據的總和

方法思路

好多博主用的都是echarts中 barGap 為 '-100%' 讓兩個系列的柱子重疊從而實現頂部顯示總數但是這種方法只適合這一個X軸只有一個堆疊柱狀圖我的需求是一個X軸項有兩個堆疊柱狀圖用了這種方法后并不適用該項目，這種方法的思路是單獨出一個數據然后移動該數據的位置從而實現重疊顯示，既然這種思路不適用該項目轉變思路直接改變他顯示的lable不就可以了有想法了就去實踐

首先頂部顯示數字

{
        name: lastAdStack.name,
        type: "bar",
        stack: "Ad",
        label: {
          normal: {
            show: true,// 顯示label
            position: "top", // 顯示的label的位置
          }
        },
        data: [],//數據
      }

顯示出來label后只需要修改label的顯示就可以了

修改label的顯示

label提供了一個formatter 方法來對顯示的文字進行處理，、只需要在你堆疊柱狀圖的最后一個數據上這么處理就可以修改他的顯示label 但是他的data數據不要改變這樣就不會影響到他的柱狀高度的顯示同時label進行了修改

{
        name: lastAdStack.name,
        type: "bar",
        stack: "Ad",
        label: {
          normal: {
            show: true,
            position: "top",
        // 首先把所有項的總和都算出來按照固定的順序方法zonghe這個數組中  
          然后在方法中用下標對應上總和方法 return出來就可以改變他的label現實文字
            formatter: function (params) {
              var index = params.dataIndex;
              return zonghe[index]
            },      
          }


        },

        data: [],
      }

這樣基本完事后面的第二個柱狀圖也是這樣只要放到zonghe這個數組中的數據跟你顯示的數據能一一對應上數據就不會錯鼠標懸浮上顯示的tooltip數據也不會錯

假如你想在鼠標懸浮時tooltip中不顯示某一項

在echarts的option中 tooltip設置項

tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            var res = params[0].name
            for (var i = 0; i < params.length; i++) {
              if (this.adStackArr[params[i].seriesIndex].name != null) {  
            // 這行代碼就是判斷語句 具體情況 具體分析  自己打印params 來實現自己的判斷
                res += `<div >
                  <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[
                    params[i].color,
                  ]};"></span>
                  ${params[i].seriesName}
                  ${params[i].data}
                </div>`;
              }
            }
            return res; //最后返回的數據得一個字符串 并且支持html css 顯示我用的都是行內式樣式 拼接成一個字符串 給最后顯示 數遍懸浮的樣式也是在這里設置 你的字符串是什么樣式  渲染出來就是什么樣的
          }
        },

至此大功告成

以上就是echarts實現多個柱狀堆疊圖頂部顯示總數示例的詳細內容，更多關于echarts柱狀堆疊圖頂顯總數的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: