echarts：饼图标签formatter的使用/饼图自定义标签

需要实现一个“五彩斑斓”的饼图：每块饼上的标签颜色与这块饼的颜色一致。
效果图

要改变饼图标签的颜色，需要参考echarts饼图label配置项，以及这个很棒的官方示例：饼图引导线调整。从这个示例中可以了解到自定义标签涉及的两个配置项：formatter（用于自定义标签显示内容）、r i ch（用于自定义标签文字显示样式）。
自定义标签用到的配置项

label: {
  formatter: '{name|{b}}n{time|{c} 小时}',
  rich: {
    time: {
      fontSize: 10,
      color: '#999'
    }
  }
}

接下来稍微讲解下上面这段自定义标签的配置项：

比较简单的标签内容可以通过使用 echarts标签字符串模板实现（个人感觉理解起来类似于JS模板字符串），“{name|{b}}n{time|{c} 小时}”中包含两个内容（“{b}”、“{c} 小时”），它们之间使用“n”分隔。至于“{name|}”“{time|}”这种写法，大概相当于“<div class=‘name’&g t;{b}</div&g t;”、“<div class=‘time’&g t;{c} 小时</div&g t;”，用于为内容指定样式类名。
此外，还可以通过回调函数的方式手动返回 formatter 字符串，且回调函数中无法使用echarts标签字符串模板（也没有必要使用，回调函数传入的参数包含的数据更全），如果用回调函数生成上面的formatter 字符串，可以这样写：

label: {
  formatter: params =&gt; {
    // console.log(params)
    return `{name|${params.name}}n{time|${params.value} 小时}`
  },
  rich: {
    time: {
      fontSize: 10,
      color: '#999'
    }
  }
}

用于为每个样式类名配置具体样式内容，可以参考echarts支持的样式配置

let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) =&gt; {
  richColor[`color${idx}`] = { 
    fontSize: 28,
    color: item
  }
})

option = {
  color: pieColors,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['36%', '56%'],
      avoidLabelOverlap: false,
      label: {
        formatter: params => {
          // console.log(params)
          return `{color${params.dataIndex}|${params.name}(${params.value})}`
        },
        rich: richColor
      },
      labelLine: {
        lineStyle: {
          width: 3
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

let pieColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
let richColor = {}
pieColors.forEach((item, idx) => {
  richColor[`color${idx}`] = { 
    fontSize: 28,
    color: item
  }
})

let chartData = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]

option = {
  color: pieColors,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['36%', '56%'],
      avoidLabelOverlap: false,
      label: {
        formatter: params => {
          // console.log(params)
          return `{color${params.dataIndex}|${params.name}(${params.value})}`
        },
        rich: richColor
      },
      labelLine: {
        lineStyle: {
          width: 3
        }
      },
      data: chartData
    },
    {
      name: '数据总数',
      type: 'pie',
      radius: ['0%', '0%'],
      itemStyle: { // 防止鼠标悬浮到标签时出现放大的点
        color: 'transparent'
      },
      label: {
        position: 'inside',
        formatter: `{data|{c}}n{serie|{a}}`,
        rich: {
          data: {
            fontWeight: 'bold',
            fontSize: 64,
            color: `#202020`,
            lineHeight: 68,
            textBorderColor: `transparent`,
            textBorderWidth: 0
          },
          serie: {
            fontSize: 24,
            color: `#acbac6`,
            lineHeight: 28,
            textBorderColor: `transparent`,
            textBorderWidth: 0
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [ // 计算表格数据value总和
        chartData.reduce((prev, cur) => prev + cur.value, 0)
      ]
    }
  ]
};