Echarts饼图按需展示部分label标签

羊角鱼

已于 2023-01-30 15:42:34 修改

阅读量1.3w

点赞数 10

文章标签： echarts 前端 javascript

于 2022-07-14 15:54:12 首次发布

本文链接：https://blog.csdn.net/quqiaoluo5620/article/details/125784544

版权

本文介绍了如何在Echarts饼图中实现部分标签显示，通过在option外部定义label样式，然后在series中针对特定数据项赋值，结合设置全局label显示为false，达到只显示部分标签的效果。这种方法兼顾了标签显示的一般性和特殊性需求。

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

思路：option中设置所有label不展示，在option外设置需要的label样式，并将特殊的label样式赋给series中对应数据。一句话总结：普遍性和特殊性结合。

1、在option设置具体值之前单独定义展示的label

// 这里设置需要展示的label的样式
let label = {
    show:true,
    fontSize:14,
    color:'#000' // 默认颜色是饼块的颜色
}
// 设置标签指示线的样式
let labelLine = {
    show: true,
    lineStyle:{ // 指示线样式，默认为饼块颜色
        color: '#000'
    }
}

2、给需要展示的数据赋予label样式

// seriesData是写在饼图series中的data对应的数据
seriesData.forEach((item,index)=>{
    if(index<5){
        item['label'] = label // 设置饼图中对应数据的label是之前定义的label
        item['labelLine'] = labelLine
    }
})

3、option设置所有标签不显示（若设置为显示则所有标签都会显示）

option={
    // 图的其他相关设置此处不赘述    
    series:[
        {
            type:'pie',
            // 饼图其他设置不赘述,label是关键
            label:{
                show:false
            }
            data:seriesData
        }
    ]
}

效果图如下：以echarts官方“可滚动的图例”为基础实现的

PS: 可滚动的图例设置在legend中