Echarts饼图数据为0时如何不显示label

Nike丶超哥哥

已于 2022-09-27 16:28:20 修改

阅读量1.5w

点赞数 29

文章标签： echarts vue javascript html

于 2021-03-08 10:53:24 首次发布

本文链接：https://blog.csdn.net/weixin_42080056/article/details/114523820

版权

本文介绍了如何在Echarts中处理饼图数据为0时，不显示标签和标签线的问题。通过在series的label.normal.formatter中添加条件判断，当数据值为0时关闭labelLine和label的显示。提供了一段具体的配置代码示例，适用于Echarts 5.0.2及以上版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看效果

如果数据中有0的话，Echarts默认是不展示的，这样很鸡肋，你可以直接更改为文字，像这样：

但是产品此时又会说，为毛和其他区域展示不一样，能不能为0的时候不展示。此时你硬着头皮：So easy;

然而，通读了一遍API眼花缭乱的你也没瞅着哪儿可以把他去掉。于是你就百度百度不停的百度，终于看到一篇文章《Echarts饼图数据为0时如何不显示label》，看标题，是不是有了什么启发，对，label，为0的文字叫label，为0的那条线叫labelLine，或许你看过一篇文章叫《echarts饼图不显示数据为0的数据》，但是当你复制到你的编辑器里时，然并卵，像这样：

相信此时的博主也很无奈，难倒你们看不到这段code吗？<script type="text/javascript" src="echarts.js"></script>，Emmmm，这段代码咋了，博主用的是个低版本的，而现在Echarts已经升级到了5.0.2，so...

接下来看大哥的...不需要你通读，不需要你了解，依旧copy、copy、copy就OK了。

上code:

            series: [
				        {
				        	label:{
						        normal:{
						         formatter:function(e){
						            let data=e.data;
						            	if(data.value==0){
						            		data.labelLine.show=false;
						            		data.label.show=false;
						            	}else{
						            		return  `${data.value}\n${e.percent}%`
						            	}
						            },    
						        }       
						    },
				            type: 'pie',
				            radius: '65%',
				            center: ['50%', '50%'],
				            selectedMode: 'single',
				            data: [
				                {value: 123,name: '红色区域',itemStyle:{'color':'#74a275'},labelLine: {show: true},label:{show:true}},
				                {value: 321, name: '黄色区域',itemStyle:{'color':'#769a9f'},labelLine: {show: true},label:{show:true}},
				                {value: 666, name: '紫色区域',itemStyle:{'color':'#eddc7e'},labelLine: {show: true},label:{show:true}},
				                {value: 333, name: '蓝色区域',itemStyle:{'color':'#e87e58'},labelLine: {show: true},label:{show:true}},
				                {value: 111, name: '绿色区域',itemStyle:{'color':'#db6c69'},labelLine: {show: true},label:{show:true}}
				            ],
				            emphasis: {
				                itemStyle: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]

看到这里无非就两块，在data中默认设置labelLine和label为显示，在label中判断为0的时候把show改为false，瞅着确实挺简单，但问题你就是找不到API，哈哈。

终于好了，复制到这里，你可以拿去交工了，不用谢，不要喷，喜欢的点赞带走，不喜欢的请自觉绕道，写个需要的人，喷子勿扰！！！