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

Posted 2023-05-04

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

最终版本：

效果图：

echarts怎么设置饼图与引导线间距

参考技术A list2=[2, 1, 0, 0, 0, 0]
%>
var myChart = echarts.init(document.getElementById('chart1'));
var option =
title :
text: '项目结构分析',
x:'center'
,
tooltip :
show: true
,
legend:
orient: 'vertical',
x: "left",