【echart 图表绘制，圆环图，自定义legend】

demo记录
增加中间文字显示，自定义legend

var seriesdata = [
  { value: 110, name: '语文成绩' },
  { value: 5, name: '数学' },
  { value: 140.5, name: '英语成绩' }
];
option = {
  tooltip: {
    trigger: 'item'
  },
  color:['#2A73FE','#5AC581','#4CBDF3','#6C7E9E',],
  title: [
    {
      text: `23043`,
      subtext: '今日识别总数',
      left: '29%',
      top: '45%',
      textAlign: 'center',
      textStyle: {
        color: '#000',
        fontWeight: 'bold',
        fontSize: 33
      },
      subtextStyle: {
        color: 'rgba(34,34,34,0.75)',
        fontWeight: 'normal',
        fontSize: 15
      }
    }
  ],
  // graphic: {
  //   type: 'text',
  //   left: 'center', // 相对位置，居中
  //   top: 'center', // 相对位置，居中
  //   style: {
  //     text: 'Your Text', // 中间显示的文本
  //     textAlign: 'center',
  //     fill: '#000', // 文字的颜色
  //     fontSize: 30
  //   }
  // },
  legend: {
    orient: 'vertical',
    icon: 'circle', // 设置图例为圆点
    // left: 'right',
    // right: 30,
    top: '40%',
    left: '60%',
    bottom: 20,
    type: 'scroll',

    textStyle: {
      // 文字的样式
      fontSize: 24, // 可控制每个legend项的间距
      color: '#828282',
      rich: {
        // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
        oneone: {
          // 设置文字、数学、英语这一列的样式
          width: 50,
          color: '#000000',
          fontSize: 13,
          fontWeight: 'bolder'
        },
        twotwo: {
          // 设置10分、20分、30分这一列的样式
          width: 35,
          color: '#333',
          fontSize: 13
        },
        threethree: {
          // 设置百分比这一列的样式
          width: 20,
          color: '#333',
          fontSize: 13
        }
      }
    },
    formatter: (name) => {
      // formatter格式化函数动态呈现数据
      console.log(name);
      var total = 0; // 用于计算总数
      var target; // 遍历拿到数据
      for (var i = 0; i < seriesdata.length; i++) {
        total += seriesdata[i].value;
        if (seriesdata[i].name == name) {
          target = seriesdata[i].value;
        }
      }
      var v = ((target / total) * 100).toFixed(2);
      return `{oneone|${name}}   {twotwo|${target}}   {threethree|${v}%}`;
      //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
    }
  },
  series: {
    type: 'pie',
    radius: ['40%', '53%'],
    // center: ['40%', '50%'],
    center: ['30%', '50%'],
    avoidLabelOverlap: true,

    label: {
      show: false,
      position: 'center',
      normal: {
        show: false // 不显示饼图上的文本标签
      }
    },
    itemStyle: {
      //添加间隙
      borderRadius: 4,
      borderColor: '#fff',
      borderWidth: 3
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 20,
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: seriesdata
  }
};

对你有用记得点个赞
运行结果：