Echarts 解决饼图文字过长重叠的问题

下面再来说下解决方案

第一步：调整文字的显示大小，手机上文字可以更小，这里我用的是8px字号

第二步：设置最小扇区角度，minAngle（最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互）

第三步：avoidLabelOverlap（是否启用防止标签重叠策略，默认默认开启）

第四步：文字换行展示，echarts给我们提供了一个 formatter（标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行） 属性。

转发自

在用 ECharts 作饼图的过程中遇到文字标签过于拥挤，需要增加标签间距离的问题，比如下图：

这个图大小为200*200（大小过大没有效果），ECharts 配置项如下：

ECharts 配置项中有 lineHeight 一项，修改以后发现并没有什么效果，但其实它修改的是整个标签块的行高，我们加上边框以后就可以发现端倪：

上图 ECharts 配置项变更处如下：

我发现 avoidLabelOverlap 只是根据 fontSize 来计算得到文本所占的大小来避免标签重叠，与整个标签块的大小没有关系（不知道以后会不会改正），所以要增加标签间距只能加换行：

效果图如下：

最简单的修改到这里就可以了。这里有两个不够完美的小问题：1) 标签和横线不对齐，2) 只能增加整数倍间距，0.5 行这样的间距无法实现，要解决这两个问题请往下看。

ECharts 文本标签支持富文本样式 rich ，所以可以不同行用不同字体大小，记住富文本样式中的 fontSize 也只是影响显示的文字大小，不影响 avoidLabelOverlap 计算。然后标签和横线不对齐的问题就靠上下都多加一行解决。最后就是如何计算基础行高，即外部的 fontSize 了：

字体大小 myFontSize 12，文字 lines 1行，标签间距 space 0.5行，求基础行高 myLineHeight。

其中2表示上下多加的两行。

最终版本：

效果图：

---