Echarts 堆疊條形圖,可以一次性顯示不同狀態(tài)的統(tǒng)計(jì)數(shù)據(jù)豺裆。但如果數(shù)據(jù)中包含 0拒秘,那么就是擠在一起,影響前一個(gè)狀態(tài)數(shù)據(jù)的顯示:
我們可以為 series 中每一項(xiàng)的 label.normal 添加相應(yīng)的 formatter 函數(shù)臭猜,讓其返回空串躺酒,具體代碼如下。
首先在 Vue.js 的 methods 中新增一個(gè)轉(zhuǎn)換函數(shù):
zero_format(){
return function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
}
接著蔑歌,在 $echarts 的 series 中羹应,為每一個(gè) label.normal.formatter 指定剛才定義的函數(shù):
...
{
name: '進(jìn)行中任務(wù)數(shù)',
type: 'bar',
stack: '總量',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: this.zero_format()
}
},
data: this.task_doing_counts
},
...
運(yùn)行結(jié)果:
是不是很簡單呀 O(∩_∩)O哈哈~