echarts 饼状图入门使用

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: 0,
    top: 'center',
    itemGap: 20,
    itemWidth: 8,
    itemHeight: 8,
    icon: 'circle',
    formatter: function (name) {
      let flag = null;
      flag = option.series[0].data;
      for (var i = 0; i < flag.length; i++) {
        if (flag[i].name === name) {
          return name + '      ' + flag[i].value;
        }
      }
    }
  },
  series: [
    {
      center: ['20%', '50%'], //设置饼状图位置
      type: 'pie',
      radius: '50%',
      radius: ['0%', '25%'], //控制饼状图大小，是否空心
      data: [
        { name: '已处理', value: 123 },
        { name: '未处理', value: 200 },
        { name: '处理中', value: 232 }
      ],
      label: {
        show: false,
        position: 'center'
      },
      itemStyle: {
        // 设置每个数据项的样式
        color: function (params) {
          // 自定义颜色函数
          var colorList = ['#29BF8A', '#F1A14C', '#009AFF']; // 自定义颜色列表
          return colorList[params.dataIndex]; // 返回对应索引位置的颜色值
        }
      },
      labelLine: {
        show: false // 隐藏引导线
      }
    }
  ]
};

option && myChart.setOption(option);