在用 ECharts 作饼图的过程中遇到文字标签过于拥挤，需要增加标签间距离的问题，比如下图：
原始效果图
这个图大小为200*200（大小过大没有效果），ECharts 配置项如下：
option = {
tooltip : {
trigger: 'item',
formatter: '{b}:<br>{c}({d}%)',
},
series: [{
type:'pie',
avoidLabelOverlap: true,
label: {
show: true,
formatter: '{b}',
fontSize: 12,
},
labelLine: {
show: true,
length: 5,
length2: 5,
},
radius: ['20%', '40%'],
data: [
{value: 600, name: '直接访问'},
{value: 50, name: '邮件营销'},
{value: 50, name: '联盟广告'},
{value: 50, name: '视频广告'},
{value: 50, name: '搜索引擎'},
]
}]
}
ECharts 配置项中有 lineHeight 一项，修改以后发现并没有什么效果，但其实它修改的是整个标签块的行高，我们加上边框以后就可以发现端倪：
增加 lineHeight 示意图
上图 ECharts 配置项变更处如下：
...
label: {
show: true,
formatter: '{b}',
fontSize: 12,
lineHeight: 24,
borderWidth: 1,
borderColor: '#ddd',
},
...
我发现 avoidLabelOverlap 只是根据 fontSize 来计算得到文本所占的大小来避免标签重叠，与整个标签块的大小没有关系（不知道以后会不会改正），所以要增加标签间距只能加换行：
...
label: {
show: true,
formatter: '{b}\n',
fontSize: 12,
},
...
效果图如下：
加换行示意图
最简单的修改到这里就可以了。这里有两个不够完美的小问题：1) 标签和横线不对齐，2) 只能增加整数倍间距，0.5 行这样的间距无法实现，要解决这两个问题请往下看。
ECharts 文本标签支持富文本样式 rich，所以可以不同行用不同字体大小，记住富文本样式中的 fontSize 也只是影响显示的文字大小，不影响 avoidLabelOverlap 计算。然后标签和横线不对齐的问题就靠上下都多加一行解决。最后就是如何计算基础行高，即外部的 fontSize 了：
字体大小 myFontSize 12，文字 lines 1行，标签间距 space 0.5行，求基础行高 myLineHeight。
avoidLabelOverlap 计算的行高 = myLineHeight * (lines + 2) = myFontSize * (lines + space)
myLineHeight = myFontSize * (lines + space) / (lines + 2)
其中2表示上下多加的两行。
最终版本：
var myFontSize = 12; // 显示文字大小
var lines = 1; // 行数
var space = 0.5; // 标签间距，单位行
var myLineHeight = myFontSize * (lines + space) / (lines + 2); // 基础行高
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}:<br>{c}({d}%)',
},
series: [{
type: 'pie',
avoidLabelOverlap: true,
label: {
show: true,
formatter: '\n{a|{b}}\n',
fontSize: myLineHeight,
//lineHeight: myFontSize * space,
//borderWidth: 1,
//borderColor: '#ddd',
rich: {
a: {
fontSize: myFontSize,
//lineHeight: myFontSize,
}
}
},
labelLine: {
show: true,
length: 5,
length2: 5,
},
radius: ['20%', '40%'],
data: [
{value: 600, name: '直接访问'},
{value: 50, name: '邮件营销'},
{value: 50, name: '联盟广告'},
{value: 50, name: '视频广告'},
{value: 50, name: '搜索引擎'},
]
}]
}
效果图：
 最终效果图
|
 最终示意图
|
|---|---|
 多行效果图
|
 多行示意图
|
