Echarts在线免费图表

 
             // 真实后端数据
  const annularList = [
    { value: 33, name: "一班" },
    { value: 44, name: "二班" },
    { value: 57, name: "三班" },
    { value: 62, name: "四班" },
    { value: 27, name: "五班" },
  ];

  // 颜色
  const colorList = {
    一班: ["#49D6F6", "#49D6F6"],
    二班: ["#7AE89D", "#7AE89D"],
    三班: ["#FFB169", "#FFB169"],
    四班: ["#E786F7", "#E786F7"],
    五班: ["#8B90FF", "#8B90FF"],
  };

  // 组装数据
  const newAnnularList = annularList.map((item) => {
    return {
      ...item,
      itemStyle: {
        color: new echarts.graphic.RadialGradient(0, 0, 1, [
          {
            offset: 0,
            color: colorList[item.name][0],
          },
          {
            offset: 1,
            color: colorList[item.name][1],
          },
        ]),
      },
    };
  });

  // 配置项
  const option = {
    legend: {
      top: "bottom",
    },
    tooltip: {
      show: true,
      formatter: "{b}: {c} 人",
    },
    series: [
      {
        name: "信息上报来源统计事故",
        type: "pie",
        radius: ["40%", "60%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "outside",
          formatter: (params) => {
            return "{a| " + params.name + "}\n{b| " + params.value + "人}";
          },
          rich: {
            a: {
              align: "left",
              padding: 4,
            },
            b: {
              align: "left",
              padding: 4,
              fontSize: 14,
              fontWeight: 600,
            },
          },
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 30,
        },
        data: newAnnularList,
      },
    ],
  };