今天须要作一个堆叠柱状图上显示总数的统计图,可是网上找了不少方法,网上提供了一种方式以下:字体
添加一组总数数据,总数须要本身计算好,而后设置显示柱状图的显示颜色为图表的背景色,显示位置是在"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
关键代码以下