ECharts中label都支持formatter和rich，label可能会有多个属性组合而成，
如下图所示，访问来源就是一个通过formatter和rich自定义的一个label，

ECharts巧用富文本标签rich实现label中文字自定义color、backgroundColor等属性

部分代码如下所示：

series: [{
  name: '访问来源',
  type: 'pie',
  radius: ['40%', '55%'],
  label: {
    normal: {
      formatter: '{a|{a}}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
      backgroundColor: '#eee',
      borderColor: '#aaa',
      borderWidth: 1,
      borderRadius: 4,
      rich: {
        a: {
          color: '#999',
          lineHeight: 22,
          align: 'center'
        },
        hr: {
          borderColor: '#aaa',
          width: '100%',
          borderWidth: 0.5,
          height: 0
        },
        b: {
          fontSize: 16,
          lineHeight: 33
        }
      }
    }
  }
}]

其中访问来源和百分比如果我想要保持和色块同一个颜色，即如下图所示

ECharts巧用富文本标签rich实现label中文字自定义color、backgroundColor等属性

此时可以在rich定义多个属性，代表不同的颜色值和背景色
如下所示的color0–color4和bg0–bg4

const per = {
  color: '#eee',
  padding: [2, 4],
  borderRadius: 2
}
rich: {
  color0: {
    color: '#c23531',
    lineHeight: 22,
    align: 'center'
  },
  color1: {
    color: '#2f4554',
    lineHeight: 22,
    align: 'center'
  },
  color2: {
    color: '#61a0a8',
    lineHeight: 22,
    align: 'center'
  },
  color3: {
    color: '#d48265',
    lineHeight: 22,
    align: 'center'
  },
  color4: {
    color: '#91c7ae',
    lineHeight: 22,
    align: 'center'
  },
  bg0: {
    ...per,
    backgroundColor: '#c23531'
  },
  bg1: {
    ...per,
    backgroundColor: '#2f4554'
  },
  bg2: {
    ...per,
    backgroundColor: '#61a0a8'
  },
  bg3: {
    ...per,
    backgroundColor: '#d48265'
  },
  bg4: {
    ...per,
    backgroundColor: '#91c7ae'
  }
}

最后利用formatter配合rich就能实现自定义效果，此处用了ES6的字符串拼接方法，/斜杠是为了转义rich的大括号

formatter: (params) => {
  console.log(params)
  const seriesName = params.seriesName;
  const name = params.name;
  const value = params.data.value;
  const percent = params.percent + '%';
  const index = params.dataIndex;
  return `\{color${index}|${seriesName}\}\n\{hr|\}\n  \{b|${name}：\}${value}  \{bg${index}|${percent}\}  `
}

完整代码：
可直接复制代码到此处直接运行：https://www.echartsjs.com/examples/editor.html

const per = {
  color: '#eee',
  padding: [2,4],
  borderRadius: 2
}
option = {
  tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  series: [
    {
      name:'访问来源',
      type:'pie',
      radius: ['40%', '55%'],
      label: {
        normal: {
          //formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          formatter: (params) => {
            console.log(params)
            const seriesName = params.seriesName;
            const name = params.name;
            const value = params.data.value;
            const percent = params.percent + '%';
            const index = params.dataIndex;
            return `\{color${index}|${seriesName}\}\n\{hr|\}\n  \{b|${name}：\}${value}  \{bg${index}|${percent}\}  `
          },
          backgroundColor: '#eee',
          borderColor: '#aaa',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            hr: {
              borderColor: '#aaa',
              width: '100%',
              borderWidth: 0.5,
              height: 0
            },
            b: {
              fontSize: 16,
              lineHeight: 33
            },
            color0: {
              color: '#c23531',
              lineHeight: 22,
              align: 'center'
            },
            color1: {
              color: '#2f4554',
              lineHeight: 22,
              align: 'center'
            },
            color2: {
              color: '#61a0a8',
              lineHeight: 22,
              align: 'center'
            },
            color3: {
              color: '#d48265',
              lineHeight: 22,
              align: 'center'
            },
            color4: {
              color: '#91c7ae',
              lineHeight: 22,
              align: 'center'
            },
            bg0: {
              ...per,
              backgroundColor: '#c23531'
            },
            bg1: {
              ...per,
              backgroundColor: '#2f4554'
            },
            bg2: {
              ...per,
              backgroundColor: '#61a0a8'
            },
            bg3: {
              ...per,
              backgroundColor: '#d48265'
            },
            bg4: {
              ...per,
              backgroundColor: '#91c7ae'
            }
          }
        }
      },
      data:[
          {value:335, name:'直达'},
          {value:310, name:'邮件营销'},
          {value:234, name:'联盟广告'},
          {value:135, name:'视频广告'},
          {value:1048, name:'谷歌'}
      ]
    }
  ]
}