Vue—Echarts饼图数据为0时如何不显示label与labelLine

最新推荐文章于 2024-06-14 10:38:15 发布

原创最新推荐文章于 2024-06-14 10:38:15 发布 · 8k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #vue.js

Vue 专栏收录该内容

8 篇文章

订阅专栏

在Echarts饼图中，当数据项的value为0时，想要隐藏对应的label和labelLine。通过在series的label.normal.formatter中设置条件判断，若value为0，则将labelLine.show和label.show设为false，从而实现隐藏效果。具体代码已在问题中给出。

【前言】

在项目开发过程中，遇到这样的问题：当data中的value值为0时，在饼状图上是不占百分比的，例如下图：

当value值为0时，如何让label与labelLine不显示呢？

【内容】

直接上代码

            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.name
						            	}
						            },    
						        }       
						    },
				            type: 'pie',
				            radius: '65%',
				            center: ['50%', '50%'],
				            selectedMode: 'single',
				            data: [
				                {value: 484,name: '联盟广告',itemStyle:{'color':'#74a275'},labelLine: {show: true},label:{show:true}},
				                {value: 0, name: '视频广告',itemStyle:{'color':'#769a9f'},labelLine: {show: true},label:{show:true}},
				                {value: 580, name: '邮件营销',itemStyle:{'color':'#eddc7e'},labelLine: {show: true},label:{show:true}},
				                {value: 735, name: '直接访问',itemStyle:{'color':'#e87e58'},labelLine: {show: true},label:{show:true}},
				                {value: 1048, name: '搜索引擎',itemStyle:{'color':'#db6c69'},labelLine: {show: true},label:{show:true}}
				            ],
				            emphasis: {
				                itemStyle: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]

说明：
1、在data中默认设置labelLine和label为显示
2、在label中判断为0的时候把show改为false