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ù)
}顯示出來label后 只需要修改label的顯示就可以了
修改label的顯示
label提供了一個(gè)formatter 方法 來對顯示的文字進(jìn)行處理,、只需要在你堆疊柱狀圖的最后一個(gè)數(shù)據(jù)上這么處理就可以修改他的顯示label 但是他的data數(shù)據(jù)不要改變 這樣就不會影響到他的柱狀高度的顯示 同時(shí)label進(jìn)行了修改
{
name: lastAdStack.name,
type: "bar",
stack: "Ad",
label: {
normal: {
show: true,
position: "top",
// 首先把所有項(xiàng)的總和都算出來按照固定的順序方法zonghe這個(gè)數(shù)組中
然后在方法中用下標(biāo)對應(yīng)上總和方法 return出來就可以改變他的label現(xiàn)實(shí)文字
formatter: function (params) {
var index = params.dataIndex;
return zonghe[index]
},
}
},
data: [],
}這樣基本完事 后面的第二個(gè)柱狀圖也是這樣 只要放到zonghe這個(gè)數(shù)組中的數(shù)據(jù)跟你顯示的數(shù)據(jù)能一一對應(yīng)上 數(shù)據(jù)就不會錯(cuò) 鼠標(biāo)懸浮上顯示的tooltip數(shù)據(jù)也不會錯(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) {
// 這行代碼就是判斷語句 具體情況 具體分析 自己打印params 來實(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è)置 你的字符串是什么樣式 渲染出來就是什么樣的
}
},至此 大功告成
以上就是echarts實(shí)現(xiàn)多個(gè)柱狀堆疊圖頂部顯示總數(shù)示例的詳細(xì)內(nèi)容,更多關(guān)于echarts柱狀堆疊圖頂顯總數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
es6 javascript對象Object.values() , Object.entr
這篇文章主要介紹了es6 javascript對象Object.values() , Object.entries()的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
TypeScript實(shí)現(xiàn)狀態(tài)模式的示例代碼
本文主要介紹了TypeScript實(shí)現(xiàn)狀態(tài)模式的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
作為一名優(yōu)秀的接口調(diào)用工程師,對接口的返回信息進(jìn)行校驗(yàn)是必不可少的,本文整理的是一些常用的校驗(yàn)方式,希望能夠?qū)Υ蠹矣兴鶐椭?/div> 2023-05-05
基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-02-02
JS格式化字符串的兩種方法(反引號與String.prototype)
本文一共介紹了兩種實(shí)現(xiàn)方式,使用反引號或自定義方法實(shí)現(xiàn),需要的朋友可以參考下2023-06-06
JS定時(shí)器如何實(shí)現(xiàn)提交成功提示功能
這篇文章主要介紹了JS定時(shí)器如何實(shí)現(xiàn)提交成功提示功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積
這篇文章主要介紹了詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
利用js動(dòng)態(tài)添加刪除table行的示例代碼
本篇文章主要是對利用js動(dòng)態(tài)添加刪除table行的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12最新評論

