堆叠柱状图在使用dataset作为数据源时,当某一项的值为0时,该项的label与前一数据的label重叠。
配置项如下
app.title = '堆叠条形图';
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
dataset: {
source: [
['类型', '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
['周一', 0, 120, 0, 150, 0],
['周二', 302, 0, 182, 0, 832],
['周三', 0, 101, 0, 201, 0],
['周四', 334, 0, 234, 0, 934],
['周五', 0, 90, 0, 190, 0],
['周六', 330, 0, 330, 0, 1330],
['周日', 0, 210, 0, 410, 0]
]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: function(data) {
for(let i in data.data) {
if (typeof i==='number') {
if (i>0) {
return i;
}
return '';
}
return i;
}
}
}
},
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
}
]
};