const data = [
  {
    value: 100,
    name: '未标注'
  },
  {
    value: 100,
    name: '已标注'
  },
  {
    value: 100,
    name: '标注中'
  }
];

option = {
  tooltip: {
    backgroundColor: '#fff',
    extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
    backgroundColor: 'rgba(0,0,0,0.75)',
    textStyle: {
      color: '#FFFFFF'
    },
    formatter: (param) => {
      let { name, value } = param;
      let result = `<div>${name}：${value}</div>`;
      return result;
    }
  },
  legend: {
    top: 'center',
    right: '10%',
    orient: 'horizontal',
    itemWidth: 6,
    itemHeight: 6,
    icon: 'circle',
    data: data,
    formatter: function (name) {
      const value = data.find((item) => item.name === name).value;
      return `{a|${name}}\n{b|${value}}`;
      // 实现方式1 通过三行文本，使得标题居中
      // return `{b|${""}}\n{a|${name}}\n{b|${value}}`;
    },
    textStyle: {
      // 实现方式2 通过文字设置padding，使得点和第一行统一
      // padding: [35, 0, 0, 0],
      color: '#808080',
      fontSize: 16,
      rich: {
        a: {
          fontWeight: 500,
          fontSize: 16,
          color: '#808080',
          width: 100
        },
        b: {
          padding: [10, 0, 0, 0],
          fontWeight: 'bold',
          fontSize: 22,
          color: '#1A1A1A'
        }
      }
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['43%', '55%'],
      center: ['30%', '50%'],
      label: {
        show: false
      },
      color: ['#67d6b2', '#ed742a', '#f2ae72'],
      data: data
    }
  ]
};