思路: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中

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐