用echarts實現了一個堆疊圖要求能夠在每個柱狀圖上顯示總數,參考了網上的一些辦法,也踩了一些坑
方法一
代碼
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: '總數', // 總數顯示,生成一個總數的柱狀圖,將顏色設爲透明,
type: 'bar', // label將位置設備內部底部,造成一個總數顯示在
stack: 'sum', // 柱狀圖上方的假象
label: {
normal: {
offset: ['50', '80'],
show: true,
position: 'insideBottom',
formatter: '{c}', // 顯示的總數
textStyle: { color: '#000' }
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)' // 柱狀圖顏色設爲透明
}
},
data: data3
}
]
效果如下
有個問題,雖然實現了效果,但是柱狀圖只是透明,而實際上還在,導致了y軸自適應的座標爲最大值的2倍,不是很好
網上找了優化的方法,試了一下,有一定效果但是不知道是不是我的問題,還是有問題,寫出來大家參考一下
優化方法一:該方法會把原先的座標給拉長兩倍,即會有一半的區域是空白的沒有圖像的。比如,原先的總和是100,現在再加上一個100,就是一共200的刻度了。可以使用縮進,使圖表整體向上(橫向則是向右)縮進50%。對應的設置項是
效果如下
可以看到,問題就是雖然縮進了,但是y軸時不閉合的,實現了效果,但是不完美
方法二:
原理:在原本堆疊的柱狀圖的旁邊,再起一個總和的柱形,顯然這個柱形和原本的柱形的高度是相同的,然後我們將其平移(barGap: '-100%'),使其與原本的柱形重合,這樣,最終的效果就是一個柱形了,高度也不會加倍。
優化:對於echarts的渲染,我們知道,是根據配置項繪製的canvas,而繪製的順序就是我們代碼書寫的順序。也就是說,如果我們將總和放在後邊,那麼就會是總和的柱形覆蓋原本的柱形,原本柱形的顏色就看不到了。解決辦法有2個:
1.將總和放在前邊繪製,使用堆疊來覆蓋總和的柱形;
2.總和在後邊,設置總和的柱形的顏色爲透明(同第一種方法中的設置)。
除此之外,對於總和文字的顯示,如果我們設置顯示在外部,那麼就可能會出現超出可見區域的現象,處理方法同第一種方案中,調整grid。另外,對於總和的label和原始數據的label,要設置不同的position來避免重疊。如果想要總和看起來明顯一些,可以給總和的柱形添加一個border。對於數據個數比較多又容易出現0導致重疊的問題,可以採用下邊的0不顯示或者如果position已經沒辦法比較重疊時,可以使用拼接換行符、值先按比例放大以擴大圖形爭取到空間,在顯示文字的時候再按同比例縮小以爭取現在來解決。
(參考了博客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: '總數',
type: 'bar',
barGap: '-100%', // 左移100%,stack不再與上面兩個在一列
label: {
normal: {
show: true,
position: 'top', // 位置設爲top
formatter: '{c}',
textStyle: { color: '#000' }
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)' // 仍爲透明
}
},
data: data3
}
]
就是新增一總數列,上面放一個label顯示總數,position設爲top,再左移,由於顏色爲透明,因此不會覆蓋原有的,當然如果放在完成,已完成的前面,顏色可以不爲透明
可以·看到,有效果,但是有個問題是我的x軸不是固定的,柱狀圖寬度會隨着數量多少進行改變,所以需要把柱狀圖設爲固定寬度,所以這種方法也不適合我,當然由於是找的方法,所以我也沒仔細研究,應該可以優化
方法三
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: '總數',
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]] // 數據默認值爲0
}
]
// 使用剛指定的配置項和數據顯示圖表。
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
}
//加載頁面時候替換最後一個series的formatter
series[series.length - 1]["label"]["normal"]["formatter"] = fun
解釋一下,將總數一列所有數據設爲0(根據x軸參數,這裏只是舉例,寫死了各項數據),然後採用function給每一項賦值,替換fomatter,參考博客https://blog.csdn.net/youyuliu/article/details/83017831,詳細看原博客,試過,可行,另一個類似的博客
https://www.cnblogs.com/huaxiaguyuan/p/11097474.html 都可以借鑑
這裏的數據由於項目上的數據是字符串,轉一下就好了,同時我的數據中已經有了總數,所以數據有些對不上,但是方法是可行的
方法四
由方法三啓示得來的,既然可以方法四重新賦值,那麼幹脆直接給未完成重新賦值一個label爲總數,去掉總數這一列
用echarts中label的formatter屬性就可以實現了,formatter採用回調函數的格式,有一個參數是params,這是個對象,有一個指向當前數據索引的dataIndex屬性,根據這個屬性可以找到堆積柱狀圖中的數據
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,通過計算屬性重新給formatter賦值,返回
show: true, // 計算的總數
position: 'top',
formatter: function (params) {
return params.value + data1[params.dataIndex]
},
textStyle: { color: '#000' }
}
},
itemStyle: {
normal: {
color: '#999999'
}
},
data: data2
}
]
效果如下
四種方法,僅供參考,個人感覺方法四較爲便捷