echart饼图标签重叠_echarts-pie饼图解决标签重叠的方法

饼图标签问题很多人都会遇到，不同情况下有不同的处理方式，本人翻遍了echart相关的配置项，在此整理了相关的解决方案，希望能够帮助到大家。

一、 单行标签

1. 添加avoidLabelOverlap

series: {

avoidLabelOverlap:true

}

此配置项默认为true，单行标签会自动避免重叠，因此单行标签基本不会遇到标签重叠的问题,此文后续仅说明多行标签重叠的方案。

二、多行标签

假设我们设置了一个拥有多行标签的pie，如图：

会发现echarts无法自动处理重叠问题了，这时候又有哪些解决方案呢？

1.设置最小显示角度:minShowLabelAngle

我们将最小标签角度设置为10，如下:

series: {

minShowLabelAngle:10

}

此方法很好的解决了标签重叠问题，效果也较为美观，但丢失了饼图小于10度的信息，此方式仅适用于不关注占比较小数据时使用。

2. 最小显示角：minAngle

我们将minAngle设置为30，如下:

series: {

minShowLabelAngle:50

}

此方法解决了标签重叠问题，且标签数据完整，但饼图的比例与实际比例不一致，此方式适用于对图表不敏感而对数据敏感的情况下使用。

3.玫瑰图:roseType

我们将roseType设置为area，如下:

series: {

roseType:'area'

}

此方法解决了标签重叠问题，且标签数据完整，且比例能够保持正确，但改变了饼图的基本样式，若专注于数据层面的需求建议采用此方式。

饼图多行标签重合目前没有较为完美的策略，只能依据需求进行一定的取舍，如果有更好的方案，欢迎大家留言探讨！