在用 ECharts 作餅圖的過程中遇到文字標(biāo)簽過于擁擠怜庸，需要增加標(biāo)簽間距離的問題世杀，比如下圖：

原始效果圖

這個圖大小為200*200（大小過大沒有效果）阳仔，ECharts 配置項如下：

option = {
  tooltip : {
    trigger: 'item',
    formatter: '递礼:<br>{c}(3f77drd%)',
  },
  series: [{
    type:'pie',
    avoidLabelOverlap: true,
    label: {
      show: true,
      formatter: '鹦牛',
      fontSize: 12,
    },
    labelLine: {
      show: true,
      length: 5,
      length2: 5,
    },
    radius: ['20%', '40%'],
    data: [
      {value: 600, name: '直接訪問'},
      {value:  50, name: '郵件營銷'},
      {value:  50, name: '聯(lián)盟廣告'},
      {value:  50, name: '視頻廣告'},
      {value:  50, name: '搜索引擎'},
    ]
  }]
}

ECharts 配置項中有 lineHeight 一項，修改以后發(fā)現(xiàn)并沒有什么效果钙皮，但其實它修改的是整個標(biāo)簽塊的行高蜂科，我們加上邊框以后就可以發(fā)現(xiàn)端倪：

增加 lineHeight 示意圖

上圖 ECharts 配置項變更處如下：

    ...
    label: {
      show: true,
      formatter: '',
      fontSize: 12,
      lineHeight: 24,
      borderWidth: 1,
      borderColor: '#ddd',
    },
    ...

我發(fā)現(xiàn) avoidLabelOverlap 只是根據(jù) fontSize 來計算得到文本所占的大小來避免標(biāo)簽重疊短条，與整個標(biāo)簽塊的大小沒有關(guān)系（不知道以后會不會改正）导匣，所以要增加標(biāo)簽間距只能加換行：

    ...
    label: {
      show: true,
      formatter: '\n',
      fontSize: 12,
    },
    ...

效果圖如下：

加換行示意圖

最簡單的修改到這里就可以了茸时。這里有兩個不夠完美的小問題：1) 標(biāo)簽和橫線不對齊贡定，2) 只能增加整數(shù)倍間距，0.5 行這樣的間距無法實現(xiàn)屹蚊，要解決這兩個問題請往下看厕氨。

ECharts 文本標(biāo)簽支持富文本樣式 rich进每，所以可以不同行用不同字體大小命浴，記住富文本樣式中的 fontSize 也只是影響顯示的文字大小烘跺，不影響 avoidLabelOverlap 計算。然后標(biāo)簽和橫線不對齊的問題就靠上下都多加一行解決智润。最后就是如何計算基礎(chǔ)行高国葬，即外部的 fontSize 了：
字體大小 myFontSize 12贤徒，文字 lines 1行，標(biāo)簽間距 space 0.5行汇四，求基礎(chǔ)行高 myLineHeight接奈。

avoidLabelOverlap 計算的行高 = myLineHeight * (lines + 2) = myFontSize * (lines + space)
myLineHeight = myFontSize * (lines + space) / (lines + 2)

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

最終版本：

var myFontSize = 12;  // 顯示文字大小
var lines = 1;  // 行數(shù)
var space = 0.5;  // 標(biāo)簽間距通孽，單位行
var myLineHeight = myFontSize * (lines + space) / (lines + 2);  // 基礎(chǔ)行高

var option = {
  tooltip: {
    trigger: 'item',
    formatter: '序宦:<br>{c}(zz3791j%)',
  },
  series: [{
    type: 'pie',
    avoidLabelOverlap: true,
    label: {
      show: true,
      formatter: '\n{a|}\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: '聯(lián)盟廣告'},
      {value:  50, name: '視頻廣告'},
      {value:  50, name: '搜索引擎'},
    ]
  }]
}

效果圖：

最終效果圖	最終示意圖
多行效果圖	多行示意圖