echarts數(shù)據(jù)可視化實現(xiàn)多個柱狀堆疊圖頂部顯示總數(shù)示例

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

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

效果圖

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

方法思路

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

首先頂部顯示數(shù)字

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

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

修改label的顯示

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

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


        },

        data: [],
      }

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

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

在echarts的option中 tooltip設(shè)置項

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 來實現(xiàn)自己的判斷
                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; //最后返回的數(shù)據(jù)得一個字符串 并且支持html css 顯示我用的都是行內(nèi)式樣式 拼接成一個字符串 給最后顯示 數(shù)遍懸浮的樣式也是在這里設(shè)置 你的字符串是什么樣式  渲染出來就是什么樣的
          }
        },

至此大功告成

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

您可能感興趣的文章: