用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