【echarts 饼图引导线末端新增圆点】

需求

代码

let bgColor = "#000000";
let title = "总量";
let color = ["#EBC85E", "#4DAF7B", "#E15331", "#F8456B", "#00FFFF", "#4AEAB0"];
let data = [
  {
    stationName: null,
    count: 1,
    studyClass1: "12",
    percent: "0.00",
  },
  {
    stationName: null,
    count: 1,
    studyClass1: "ECG",
    percent: "0.00",
  },
  {
    stationName: null,
    count: 1,
    studyClass1: "MR",
    percent: "0.00",
  },
  {
    stationName: null,
    count: 1,
    studyClass1: "NM",
    percent: "0.00",
  },
];
let echartData = data.map((val) => {
  return {
    name: val.studyClass1,
    value: val.count,
  };
});
let echartData1 = echartData.map((val, index) => {
  return {
    ...val,
    label: {
      textStyle: {
        color: color[index % 6],
      },
    },
  };
});
option = {
  backgroundColor: bgColor,
  color: color,
  title: [
    {
      left: "center",
      text: "日诊断量分布",
      top: "0%",
      textStyle: {
        fontSize: 22,
        color: "#ffffff",
        fontWeight: 500,
      },
    },
  ],
  series: [
    {
      itemStyle: {
        normal: {
          label: {
            show: true,
            textStyle: {
              color: color,
            },
          },
          borderWidth: 4,
          borderColor: "#000000",
        },
      },
      type: "pie",
      radius: ["30%", "60%"],
      center: ["50%", "50%"],
      data: echartData1,
      hoverAnimation: false,
      labelLine: {
        normal: {
          length: 40,
          length2: 130,
          lineStyle: {
            color: "#e6e6e6",
          },
        },
      },
      label: {
        normal: {
          alignTo: "labelLine",
          // ·圆点
          backgroundColor: "auto",
          height: 0,
          width: 0,
          lineHeight: 0,
          distanceToLabelLine: 0,
          borderRadius: 5,
          padding: [5, -5, 5, -5],
          formatter: (params) => {
            return `{name|${params.name}${params.percent}%}`;
          },
          rich: {
            name: {
              fontSize: 18,
              padding: [0, -110, 20, -110],
              fontWeight: "bold",
            },
          },
        },
      },
    }
  ],
};