说说 Vue.js + Echarts 堆叠条形图，如何不显示为 0 的数据

Echarts 堆叠条形图，可以一次性显示不同状态的统计数据。但如果数据中包含 0，那么就是挤在一起，影响前一个状态数据的显示：

我们可以为 series 中每一项的 label.normal 添加相应的 formatter 函数，让其返回空串，具体代码如下。

首先在 Vue.js 的 methods 中新增一个转换函数：

zero_format(){
    return function (params) {
        if (params.value > 0) {
            return params.value;
        } else {
            return '';
        }
    }
}

接着，在 $echarts 的 series 中，为每一个 label.normal.formatter 指定刚才定义的函数：

...
{
    name: '进行中任务数',
    type: 'bar',
    stack: '总量',
    label: {
        normal: {
            show: true,
            position: 'insideRight',
            formatter: this.zero_format()
        }
    },
    data: this.task_doing_counts
},
...

运行结果：

是不是很简单呀 O(∩_∩)O哈哈~