今天須要作一個堆疊柱狀圖上顯示總數的統計圖,可是網上找了不少方法,網上提供了一種方式以下:字體
添加一組總數數據,總數須要本身計算好,而後設置顯示柱狀圖的顯示顏色爲圖表的背景色,顯示位置是在"top",字體顏色爲白色#e4e4e4;orm
我照作了,可是有問題,圖下圖所示:blog
代碼以下:it
{
name: "", // 總數顯示,生成一個總數的柱狀圖,將顏色設爲透明,
type: "bar", // label將位置設備內部底部,形成一個總數顯示在
stack: "tatol", // 柱狀圖上方的假象
barWidth : 0,
label: {
normal: {
show: true,
position: "top",
formatter: function(params){
if (params.value > 0) {
return params.value;
}else {
return '';
}
}, // 顯示的總數
textStyle: { color: "#000" }
}
},
itemStyle: {
normal: {
color: "rgba(128, 128, 128, 0)" // 柱狀圖顏色設爲透明
}
},
data: tatolData
}io
實際上就是搞了個透明的柱狀圖,全部灰色塊會變寬,並且可見柱狀圖會偏移(透明的柱狀圖是站位的),後來思索,本身想到了一個新的方式,邏輯以下:function
疊加的柱狀圖分爲A,B兩塊,下面的是A,上面的是B,當只有A柱狀圖不爲0時,則顯示在A柱狀圖上,只要B柱狀圖不爲0,則顯示在B柱狀圖上。form
效果圖以下所示:class
代碼以下:方法
series : [
{
name:"xx",
type:"bar",
stack: "oo",
data:statisticsA,
triggerEvent: true,
barWidth : 30,
label: {
normal: {
show: true,
position: "top",
formatter: function(params){
var index = params.dataIndex;
var val = tatolData[index];
if(val == 0)
{
val = "";
}
else if(statisticsB[index] > 0)
{
val = "";
}
return val;
}, // 顯示的總數
textStyle: { color: "#000" }
}
},
},
{
name:"xxx",
type:"bar",
stack: "oo",
data:statisticsB,
triggerEvent: true,
barWidth : 30,
label: {
normal: {
show: true,
position: "top",
formatter: function(params){
var index = params.dataIndex;
var val = tatolData[index];
if(val == 0)
{
val = "";
}
else if(statisticsB[index] != 0)
{
}
return val;
}, // 顯示的總數
textStyle: { color: "#000" }
}
},
},im
關鍵代碼以下