亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2023年07月19日 10:38:04   作者:Smith  
這篇文章主要為大家介紹了echarts實(shí)現(xiàn)多個(gè)柱狀堆疊圖頂部顯示總數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

效果圖

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

方法思路

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

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

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

顯示出來(lái)label后 只需要修改label的顯示就可以了

修改label的顯示

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

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


        },

        data: [],
      }

 這樣基本完事  后面的第二個(gè)柱狀圖也是這樣  只要放到zonghe這個(gè)數(shù)組中的數(shù)據(jù)跟你顯示的數(shù)據(jù)能一一對(duì)應(yīng)上 數(shù)據(jù)就不會(huì)錯(cuò) 鼠標(biāo)懸浮上顯示的tooltip數(shù)據(jù)也不會(huì)錯(cuò)

假如你想在鼠標(biāo)懸浮時(shí)tooltip中不顯示某一項(xiàng)

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

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) {  
            // 這行代碼就是判斷語(yǔ)句 具體情況 具體分析  自己打印params 來(lái)實(shí)現(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ù)得一個(gè)字符串 并且支持html css 顯示我用的都是行內(nèi)式樣式 拼接成一個(gè)字符串 給最后顯示 數(shù)遍懸浮的樣式也是在這里設(shè)置 你的字符串是什么樣式  渲染出來(lái)就是什么樣的
          }
        },

至此 大功告成

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

相關(guān)文章

  • 關(guān)于js new Date() 出現(xiàn)NaN 的分析

    關(guān)于js new Date() 出現(xiàn)NaN 的分析

    在一個(gè)項(xiàng)目中需要進(jìn)行日期的格式化,后臺(tái)傳到前端是時(shí)間的整數(shù)(Date.getTime),當(dāng)后臺(tái)數(shù)據(jù)返回字符串時(shí),發(fā)現(xiàn)轉(zhuǎn)換日期時(shí)在ie下變成NaN,但是真的是這樣嗎?接下來(lái)我們慢慢分析
    2012-10-10
  • 原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名

    原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • 原生js實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能詳解

    原生js實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能詳解

    這篇文章主要介紹了原生js實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript拖動(dòng)進(jìn)度條插件的具體定義與使用技巧,需要的朋友可以參考下
    2019-08-08
  • JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能

    JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能

    這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度的效果,通過(guò)點(diǎn)擊三角按鈕旋轉(zhuǎn)180度,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2024-02-02
  • JavaScript中的變量聲明你知道嗎

    JavaScript中的變量聲明你知道嗎

    這篇文章主要為大家詳細(xì)介紹了JavaScript中的變量聲明,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-01-01
  • JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換案例

    JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換案例

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 如何基于JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求的控制詳解

    如何基于JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求的控制詳解

    通常為了減少頁(yè)面加載時(shí)間,先把核心內(nèi)容顯示處理,頁(yè)面加載完成后再發(fā)送ajax請(qǐng)求獲取其他數(shù)據(jù),這時(shí)就可能產(chǎn)生多個(gè)ajax請(qǐng)求,為了用戶(hù)體驗(yàn),最好是發(fā)送并行請(qǐng)求,這篇文章主要給大家介紹了關(guān)于如何基于JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求控制的相關(guān)文章,需要的朋友可以參考下
    2021-08-08
  • 解決layui使用layui-icon出現(xiàn)默認(rèn)圖標(biāo)的問(wèn)題

    解決layui使用layui-icon出現(xiàn)默認(rèn)圖標(biāo)的問(wèn)題

    今天小編就為大家分享一篇解決layui使用layui-icon出現(xiàn)默認(rèn)圖標(biāo)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • Javascript面試經(jīng)典套路reduce函數(shù)查重

    Javascript面試經(jīng)典套路reduce函數(shù)查重

    reduce函數(shù),是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法.下面通過(guò)本文給大家分享Javascript面試經(jīng)典套路reduce函數(shù)查重,需要的朋友參考下吧
    2017-03-03
  • js getElementsByTagName的簡(jiǎn)寫(xiě)方式

    js getElementsByTagName的簡(jiǎn)寫(xiě)方式

    用最少的代碼,做最多的事情. getElementsByTagName的簡(jiǎn)寫(xiě)方法.
    2010-06-06

最新評(píng)論