echarts柱状图数据为0时产生堆叠，实现不显示0

最新推荐文章于 2024-08-09 13:16:42 发布

ZaynahLy

最新推荐文章于 2024-08-09 13:16:42 发布

阅读量1w

点赞数 8

分类专栏： web前端

本文链接：https://blog.csdn.net/ZaynahLy/article/details/89248381

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

echarts柱状图数据存在0时，会与其他数据产生堆叠，对页面的样式产生影响，如图：
在这里插入图片描述
为了解决这个问题，决定将数据为0的模块隐藏。
修改方式是，为echarts的配置项 series 中每一项的label.normal添加formatter函数，实现代码为：

series: [
    {
        name: '材料阅读',
        type: 'bar',
        stack: '总量',
        label: {
                normal: {
                	show: true,
                	formatter: function (params) {
                    	if (params.value > 0) {
                        	return params.value;
                    	} else {
                        	return '';
                    	}
                	}
	             }
         },
         data: []
	},
	{
        name: '提交作品',
        type: 'bar',
        stack: '总量',
        label: {
                normal: {
                	show: true,
                	formatter: function (params) {
                    	if (params.value > 0) {
                        	return params.value;
                    	} else {
                        	return '';
                    	}
                	}
	             }
         },
         data: []
	},
	...
]