饼图标签问题很多人都会遇到,不同情况下有不同的处理方式,本人翻遍了echart相关的配置项,在此整理了相关的解决方案,希望能够帮助到大家。
一、 单行标签
1. 添加avoidLabelOverlap
series
此配置项默认为true,单行标签会自动避免重叠,因此单行标签基本不会遇到标签重叠的问题,此文后续仅说明多行标签重叠的方案。
二、多行标签
假设我们设置了一个拥有多行标签的pie,如图:
会发现echarts无法自动处理重叠问题了,这时候又有哪些解决方案呢?
1.设置最小显示角度:minShowLabelAngle
我们将最小标签角度设置为10,如下:
series: {
minShowLabelAngle:10
}
此方法很好的解决了标签重叠问题,效果也较为美观,但丢失了饼图小于10度的信息,此方式仅适用于不关注占比较小数据时使用。
2. 最小显示角:minAngle
我们将minAngle设置为30,如下:
series: {
minShowLabelAngle:50
}
此方法解决了标签重叠问题,且标签数据完整,但饼图的比例与实际比例不一致,此方式适用于对图表不敏感而对数据敏感的情况下使用。
3.玫瑰图:roseType
我们将roseType设置为area,如下:
series: {
roseType:'area'
}
此方法解决了标签重叠问题,且标签数据完整,且比例能够保持正确,但改变了饼图的基本样式,若专注于数据层面的需求建议采用此方式。
饼图多行标签重合目前没有较为完美的策略,只能依据需求进行一定的取舍,如果有更好的方案,欢迎大家留言探讨!