说说 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哈哈~