ECharts饼图文本标签间距问题Hack

在用 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表示上下多加的两行。

最终版本：

效果图：

需要注意的是，这个的数据需要我们自己设置,可以自定义加入正简大key,name,label等等，到时候取出来

饼状图默认有如下提示咐尘

如果不想要这个提示文字，需要像如下设置

如果需要自定义label里面的文字，请看如下设置

Y轴数字未太大，未完全展示举竖出来

修改属性后

---