echarts數(shù)據(jù)可視化實(shí)現(xiàn)多個(gè)柱狀堆疊圖頂部顯示總數(shù)示例
效果圖
左邊的柱狀圖頂部顯示所有堆疊圖數(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 的分析
在一個(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)名
這篇文章主要為大家詳細(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)度條插件功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript拖動(dòng)進(jìn)度條插件的具體定義與使用技巧,需要的朋友可以參考下2019-08-08JS實(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-02JS實(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)求的控制詳解
通常為了減少頁(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)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript面試經(jīng)典套路reduce函數(shù)查重
reduce函數(shù),是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法.下面通過(guò)本文給大家分享Javascript面試經(jīng)典套路reduce函數(shù)查重,需要的朋友參考下吧2017-03-03js getElementsByTagName的簡(jiǎn)寫(xiě)方式
用最少的代碼,做最多的事情. getElementsByTagName的簡(jiǎn)寫(xiě)方法.2010-06-06