通过Echart画圆形图

// 最好去找echarts社区(重点)

let dashedPic =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC";

let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF", "#009D00"];

// 数据
let chartData = [
  {
    name: "事件类别1",
    value: 95,
  },
  {
    name: "事件类别2",
    value: 75,
  },
  {
    name: "事件类别3",
    value: 55,
  },
  {
    name: "事件类别4",
    value: 40,
  },
  {
    name: "事件类别5",
    value: 20,
  },
];
let arrName = [];
let arrValue = [];
let sum = 0;
let lineYAxis = [];

// 数据处理
chartData.forEach((v, i) => {
  arrName.push(v.name);
  arrValue.push(v.value);
});

const radius = [
  ["43%", "50%"], // 7
  ["34%", "40%"], // 6
  ["26%", "31%"], // 5
  ["19%", "23%"], // 4
  ["13%", "16%"], // 3
];
const pieSeries = [];

// 图表option整理
chartData.forEach((v, i) => {
  pieSeries.push({
    name: "事件",
    type: "pie",
    clockWise: false,
    hoverAnimation: false,
    radius: radius[i],
    center: ["25%", "50%"],
    itemStyle: {
      borderRadius: 10,
    },
    label: {
      show: false,
    },
    data: [
      {
        value: v.value * 0.75,
        name: v.name,
      },
      {
        value: 100 - v.value * 0.75,
        name: "",
        itemStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
    ],
  });
  // 背景
  pieSeries.push({
    name: "",
    type: "pie",
    silent: true,
    z: 1,
    clockWise: false,
    hoverAnimation: false,
    radius: radius[i],
    center: ["25%", "50%"],
    label: {
      show: false,
    },
    data: [
      {
        value: 7.5,
        itemStyle: {
          color: "#EEEEEE",
        },
      },
      {
        value: 2.5,
        name: "",
        itemStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
    ],
  });

  v.percent = ((v.value / sum) * 100).toFixed(1) + "%";
    lineYAxis.push({
    value: i,
    textStyle: {
      rich: {
        circle: {
          color: color[i],
          padding: [0, 5],
        },
      },
    },
  });

});

option = {
  backgroundColor: "#fff",
    xAxis: [
    {
      show: false,
    },
  ],
    color: color,
  grid: {
    top: "25%",
    bottom: "55%",
    left: "50%",
    containLabel: false,
  },
     yAxis: [
    {
      type: "category",
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
      formatter: function (params) {
          let item = chartData[params];
          console.log(item);
          return (
            "{line|}{circle|●}{name|" +
            item.name +
            "}{bd||}{percent|" +
            item.percent +
            "}{value|" +
            item.value +
            "}{unit|元}"
          );
        },
      
      
        show: true,
      },
      data: lineYAxis,
    },
  ],
  series: pieSeries,
};