echarts 堆疊柱狀圖頂部顯示總和

用echarts實(shí)現(xiàn)了一個(gè)堆疊圖要求能夠在每個(gè)柱狀圖上顯示總數(shù)牺氨,參考了網(wǎng)上的一些辦法找都,也踩了一些坑

方法一

代碼

series: [{

? ? ? ? ? ? ? ? ? ? name: n[0],? ? //完成,

? ? ? ? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? ? ? ? barMaxWidth: 50,? ? //最大寬度

? ? ? ? ? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#15c7bd'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data1

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? name: n[1],? ? //未完成

? ? ? ? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#999999'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data2

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? name: '總數(shù)',? ? // 總數(shù)顯示兽埃,生成一個(gè)總數(shù)的柱狀圖廊敌,將顏色設(shè)為透明,? ? ? ?

? ? ? ? ? ? ? ? ? ? type: 'bar',? ? // label將位置設(shè)備內(nèi)部底部谁不,造成一個(gè)總數(shù)顯示在

? ? ? ? ? ? ? ? ? ? stack: 'sum',? ? // 柱狀圖上方的假象

? ? ? ? ? ? ? ? ? ? label: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? offset: ['50', '80'],

? ? ? ? ? ? ? ? ? ? ? ? ? ? show: true,

? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'insideBottom',

? ? ? ? ? ? ? ? ? ? ? ? ? ? formatter: '{c}',? ? ? ? // 顯示的總數(shù)

? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle: { color: '#000' }

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: 'rgba(128, 128, 128, 0)'? ? ? // 柱狀圖顏色設(shè)為透明

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data3

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ]


效果如下

有個(gè)問題钠导,雖然實(shí)現(xiàn)了效果震嫉,但是柱狀圖只是透明,而實(shí)際上還在牡属,導(dǎo)致了y軸自適應(yīng)的坐標(biāo)為最大值的2倍票堵,不是很好

網(wǎng)上找了優(yōu)化的方法,試了一下逮栅,有一定效果但是不知道是不是我的問題悴势,還是有問題,寫出來大家參考一下

優(yōu)化方法一:該方法會(huì)把原先的坐標(biāo)給拉長兩倍措伐,即會(huì)有一半的區(qū)域是空白的沒有圖像的特纤。比如,原先的總和是100侥加,現(xiàn)在再加上一個(gè)100捧存,就是一共200的刻度了。可以使用縮進(jìn)昔穴,使圖表整體向上(橫向則是向右)縮進(jìn)50%短蜕。對(duì)應(yīng)的設(shè)置項(xiàng)是

效果如下


可以看到,問題就是雖然縮進(jìn)了傻咖,但是y軸時(shí)不閉合的,實(shí)現(xiàn)了效果岖研,但是不完美

方法二:

 原理:在原本堆疊的柱狀圖的旁邊卿操,再起一個(gè)總和的柱形,顯然這個(gè)柱形和原本的柱形的高度是相同的孙援,然后我們將其平移(barGap: '-100%')害淤,使其與原本的柱形重合,這樣拓售,最終的效果就是一個(gè)柱形了窥摄,高度也不會(huì)加倍。

  優(yōu)化:對(duì)于echarts的渲染础淤,我們知道崭放,是根據(jù)配置項(xiàng)繪制的canvas,而繪制的順序就是我們代碼書寫的順序鸽凶。也就是說币砂,如果我們將總和放在后邊,那么就會(huì)是總和的柱形覆蓋原本的柱形玻侥,原本柱形的顏色就看不到了决摧。解決辦法有2個(gè):

  1.將總和放在前邊繪制,使用堆疊來覆蓋總和的柱形凑兰;

  2.總和在后邊掌桩,設(shè)置總和的柱形的顏色為透明(同第一種方法中的設(shè)置)。

  除此之外姑食,對(duì)于總和文字的顯示波岛,如果我們?cè)O(shè)置顯示在外部,那么就可能會(huì)出現(xiàn)超出可見區(qū)域的現(xiàn)象音半,處理方法同第一種方案中盆色,調(diào)整grid。另外祟剔,對(duì)于總和的label和原始數(shù)據(jù)的label隔躲,要設(shè)置不同的position來避免重疊。如果想要總和看起來明顯一些物延,可以給總和的柱形添加一個(gè)border宣旱。對(duì)于數(shù)據(jù)個(gè)數(shù)比較多又容易出現(xiàn)0導(dǎo)致重疊的問題,可以采用下邊的0不顯示或者如果position已經(jīng)沒辦法比較重疊時(shí)叛薯,可以使用拼接換行符浑吟、值先按比例放大以擴(kuò)大圖形爭取到空間笙纤,在顯示文字的時(shí)候再按同比例縮小以爭取現(xiàn)在來解決。

(參考了博客https://www.cnblogs.com/ljwsyt/p/9963473.html)

series: [{

? ? ? ? ? ? ? ? ? ? name: n[0],//完成,

? ? ? ? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? ? ? ? barMaxWidth: 50,//最大寬度

? ? ? ? ? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#15c7bd'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data1

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? name: n[1],//未完成

? ? ? ? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#999999'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data2

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? name: '總數(shù)',? ? ?

? ? ? ? ? ? ? ? ? ? type: 'bar',?

? ? ? ? ? ? ? ? ? ? barGap: '-100%',? ? ? ? // 左移100%组力,stack不再與上面兩個(gè)在一列

? ? ? ? ? ? ? ? ? ? label: {? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? show: true,

? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'top',? ? ? //? 位置設(shè)為top

? ? ? ? ? ? ? ? ? ? ? ? ? ? formatter: '{c}',

? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle: { color: '#000' }

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: 'rgba(128, 128, 128, 0)'? ? // 仍為透明

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data3

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ]

就是新增一總數(shù)列省容,上面放一個(gè)label顯示總數(shù),position設(shè)為top,再左移燎字,由于顏色為透明腥椒,因此不會(huì)覆蓋原有的,當(dāng)然如果放在完成候衍,已完成的前面笼蛛,顏色可以不為透明

可以·看到,有效果蛉鹿,但是有個(gè)問題是我的x軸不是固定的滨砍,柱狀圖寬度會(huì)隨著數(shù)量多少進(jìn)行改變,所以需要把柱狀圖設(shè)為固定寬度妖异,所以這種方法也不適合我惋戏,當(dāng)然由于是找的方法,所以我也沒仔細(xì)研究他膳,應(yīng)該可以優(yōu)化

方法三

series: [{

? ? ? ? ? ? ? ? ? ? name: n[0],//完成,

? ? ? ? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? ? ? ? barMaxWidth: 50,//最大寬度

? ? ? ? ? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#15c7bd'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data1

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? name: n[1],//未完成

? ? ? ? ? ? ? ? ? ? type: 'bar',?

? ? ? ? ? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: '#999999'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data: data2

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? name: '總數(shù)',

? ? ? ? ? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? ? ? ? ? stack: 'sum',? ? // 與上面為一列

? ? ? ? ? ? ? ? ? ? label: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? show: true,

? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'top',

? ? ? ? ? ? ? ? ? ? ? ? ? ? formatter: '{c}',

? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle: { color: '#000' }

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: 'rgba(128, 128, 128, 0)'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? data:[["1",0], ["2",0], ["3",0], ["4",0], ["5",0], ["6",0],["7",0], ["8",0], ["9",0], ["10",0],["11",0], ["12",0]]? ? ? ? ? // 數(shù)據(jù)默認(rèn)值為0

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ]

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表日川。

? ? ? ? ? ? var series = option["series"];

? ? ? ? ? ? var fun = function (params) {

? ? ? ? ? ? ? ? var data4 = 0;

? ? ? ? ? ? ? ? for (var i = 0, l = series.length; i < l; i++) {

? ? ? ? ? ? ? ? ? ? data4 += series[i].data[params.dataIndex]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? return data4

? ? ? ? ? ? }

? ? ? ? ? ? //加載頁面時(shí)候替換最后一個(gè)series的formatter

? ? ? ? ? ? series[series.length - 1]["label"]["normal"]["formatter"] = fun

解釋一下,將總數(shù)一列所有數(shù)據(jù)設(shè)為0(根據(jù)x軸參數(shù)矩乐,這里只是舉例龄句,寫死了各項(xiàng)數(shù)據(jù)),然后采用function給每一項(xiàng)賦值散罕,替換fomatter,參考博客https://blog.csdn.net/youyuliu/article/details/83017831分歇,詳細(xì)看原博客,試過欧漱,可行职抡,另一個(gè)類似的博客

https://www.cnblogs.com/huaxiaguyuan/p/11097474.html?都可以借鑒

這里的數(shù)據(jù)由于項(xiàng)目上的數(shù)據(jù)是字符串,轉(zhuǎn)一下就好了误甚,同時(shí)我的數(shù)據(jù)中已經(jīng)有了總數(shù)缚甩,所以數(shù)據(jù)有些對(duì)不上,但是方法是可行的


方法四

由方法三啟示得來的窑邦,既然可以方法四重新賦值擅威,那么干脆直接給未完成重新賦值一個(gè)label為總數(shù),去掉總數(shù)這一列

用echarts中l(wèi)abel的formatter屬性就可以實(shí)現(xiàn)了冈钦,formatter采用回調(diào)函數(shù)的格式郊丛,有一個(gè)參數(shù)是params,這是個(gè)對(duì)象,有一個(gè)指向當(dāng)前數(shù)據(jù)索引的dataIndex屬性厉熟,根據(jù)這個(gè)屬性可以找到堆積柱狀圖中的數(shù)據(jù)

series: [{

? ? ? ? ? ? name: n[0],//完成,

? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? barMaxWidth: 50,//最大寬度

? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? color: '#15c7bd'

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? data: data1

? ? ? ? },

? ? ? ? {

? ? ? ? ? ? name: n[1],//未完成

? ? ? ? ? ? type: 'bar',

? ? ? ? ? ? stack: 'sum',

? ? ? ? ? ? label: {

? ? ? ? ? ? ? ? normal: {? ? ? // 重寫未完成label导盅,通過計(jì)算屬性重新給formatter賦值,返回

? ? ? ? ? ? ? ? ? ? show: true,? // 計(jì)算的總數(shù)

? ? ? ? ? ? ? ? ? ? position: 'top',

? ? ? ? ? ? ? ? ? ? formatter: function (params) {

? ? ? ? ? ? ? ? ? ? ? ? return params.value + data1[params.dataIndex]

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? textStyle: { color: '#000' }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? color: '#999999'

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? data: data2

? ? ? ? }

? ? ? ? ]

效果如下

四種方法揍瑟,僅供參考白翻,個(gè)人感覺方法四較為便捷

————————————————

版權(quán)聲明:本文為CSDN博主「鯉魚和龍蝦」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議绢片,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明滤馍。

原文鏈接:https://blog.csdn.net/lxj7607/article/details/100710955

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市杉畜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌衷恭,老刑警劉巖此叠,帶你破解...
    沈念sama閱讀 216,324評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異随珠,居然都是意外死亡灭袁,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門窗看,熙熙樓的掌柜王于貴愁眉苦臉地迎上來茸歧,“玉大人,你說我怎么就攤上這事显沈∪硐梗” “怎么了?”我有些...
    開封第一講書人閱讀 162,328評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵拉讯,是天一觀的道長涤浇。 經(jīng)常有香客問我,道長魔慷,這世上最難降的妖魔是什么只锭? 我笑而不...
    開封第一講書人閱讀 58,147評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮院尔,結(jié)果婚禮上蜻展,老公的妹妹穿的比我還像新娘。我一直安慰自己邀摆,他們只是感情好纵顾,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,160評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著栋盹,像睡著了一般片挂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,115評(píng)論 1 296
  • 那天音念,我揣著相機(jī)與錄音沪饺,去河邊找鬼。 笑死闷愤,一個(gè)胖子當(dāng)著我的面吹牛整葡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播讥脐,決...
    沈念sama閱讀 40,025評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼遭居,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了旬渠?” 一聲冷哼從身側(cè)響起俱萍,我...
    開封第一講書人閱讀 38,867評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎告丢,沒想到半個(gè)月后枪蘑,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,307評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡岖免,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,528評(píng)論 2 332
  • 正文 我和宋清朗相戀三年岳颇,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颅湘。...
    茶點(diǎn)故事閱讀 39,688評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡话侧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出闯参,到底是詐尸還是另有隱情瞻鹏,我是刑警寧澤,帶...
    沈念sama閱讀 35,409評(píng)論 5 343
  • 正文 年R本政府宣布鹿寨,位于F島的核電站乙漓,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏释移。R本人自食惡果不足惜叭披,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,001評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望玩讳。 院中可真熱鬧涩蜘,春花似錦、人聲如沸熏纯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽樟澜。三九已至误窖,卻和暖如春叮盘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背霹俺。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評(píng)論 1 268
  • 我被黑心中介騙來泰國打工柔吼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人丙唧。 一個(gè)月前我還...
    沈念sama閱讀 47,685評(píng)論 2 368
  • 正文 我出身青樓愈魏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親想际。 傳聞我的和親對(duì)象是個(gè)殘疾皇子培漏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,573評(píng)論 2 353