Echarts饼图数据为0时如何不显示label_echarts饼图鼠标移入不想展示label-优快云博客

本文链接：https://blog.youkuaiyun.com/Qian_v1/article/details/122927733

此篇博客介绍了如何使用ECharts库实现饼图时，根据数据值动态控制labelLine和label的显示。当数据值为0时，会隐藏标签线和标签，否则显示百分比信息。

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

obj.Data.forEach(item => {
item.labelLine = { show: true };
item.label = { show: true };
})

series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['38%', '53%'],
data: echartData,
//data: [
// { value: 0, name: '红色区域', itemStyle: { 'color': '#74a275' }, labelLine: { show: true }, label: { show: true } },
// { value: 321, name: '黄色区域', itemStyle: { 'color': '#769a9f' }, labelLine: { show: true }, label: { show: true } },
// { value: 0, 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 } }
//],

label: {
normal: {

formatter: function (e) {
debugger
let data = e.data;
if (data.value == 0) {
data.labelLine.show = false;
data.label.show = false;
} else {
return `{value| ${e.percent}%}`
}
},

//formatter: params => {
// if (params.value === 0) {
// data.labelLine.show = false;
// data.label.show = false;
// }
// return '{value|' + params.value + '%}'
// // (
// // '{icon|●}{name|' + params.name + '}{value|' +
// // formatNumber(params.value) + '}'
// // );
//},
/* padding: [0, -38, 15, -30],*/
rich: {
icon: {
fontSize: ''
},
name: {
fontSize: '14',
/* padding: [0, 10, 0, 4],*/
fontWeight: 'bold',
color: '#02d5fa'
},
value: {
padding: [20, -30, 0, -30],
fontSize: '14',

}
}
}
},
},

}