【前言】
在项目开发过程中,遇到这样的问题:当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
在Echarts饼图中,当数据项的value为0时,想要隐藏对应的label和labelLine。通过在series的label.normal.formatter中设置条件判断,若value为0,则将labelLine.show和label.show设为false,从而实现隐藏效果。具体代码已在问题中给出。

1926

被折叠的 条评论
为什么被折叠?



