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

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

原始效果图

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

option = {
  tooltip : {
    trigger: 'item',
    formatter: '{b}:
{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}:
{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: '搜索引擎'},
    ]
  }]
}

效果图：

最终效果图	最终示意图
多行效果图	多行示意图