echarts中饼图的指示线加圆点，文字向外对齐

需求：echarts中饼图的指示线加圆点，文字向外对齐

效果图如下：

代码实现：

<template>
  <!-- <img :src="barbg" style="width: 18px; height: 100px;;"> -->
  <div :id="props.id" style=" width: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { nextTick, onBeforeUnmount, onMounted } from 'vue';

const props = defineProps({
  id: {
    type: String,
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
let timer = null;
let myChart = null;
// const data = reactive({
// });

onMounted(() => {
  nextTick(() => {
    // 一条数据
    myChart = echarts.init(document.getElementById(props.id));
    initEcharts1();
    window.addEventListener('resize', resizeEcharts);
  });
});


const initEcharts1 = () => {
  //职称结构取数
  
  const alignTo = 'edge';
  var colorList = [
    '#77E750',
    '#FFDF02',
    '#F67825',
    '#F93148',
    '#A4036E',
    '#821313',
  ];

  //职称结构图表
  let option = {
    // color: colorList,
    backgroundColor: '#13305D',
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: false,
      // data:getsjjg,
      itemWidth: 6,
      itemHeight: 6,
      top: 6,
      // top: -12px
      textStyle: {
        color: '#fff',
      },
    },
    title: {
      text: '自定义',
      x: 'center',
      y: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 12,
        lineHeight: 25,
        fontWeight: 400,
      },
    },
    series: [
      {
        itemStyle: {
          normal: {
            borderColor: '#13305D',
            borderWidth: 3,
            color: (params) => {
              let item = colorList[params.dataIndex];
              return item;
            },
          },
        },
        type: 'pie',
        silent: true, //取消高亮
        radius: ['45%', '62%'],
        center: ['50%', '50%'],
        labelLine: {
          // width: 4,
          // length: 10,
          // length2: 200,
          show: true,
          color: 'red',
          lineStyle: {
            color: 'red',
            width: 1,
            // type: 'dashed',
          },
        },
        label: {
          formatter: (params) => {
            console.log(params);
            // return `{a|${params.name}}\n{hr|}\n {c|${params.percent}}`;
            return `{c|${params.name}}\n{d|${params.percent}%}`;
          },
          // padding: [0, -50, 0, -50],
          alignTo: alignTo,
          edgeDistance: '5%',

          width: 50,
          rich: {
            d: {
              fontSize: 12,
              color: '#fff',
              padding: [4,0,4,0],
            },
            c: {
              fontSize: 12,
              color: '#fff',
              padding: [4,0,4,0],
            },
          },
        },
        data: props.data,
        z: -1,
      },
      {
        itemStyle: {
          normal: {
            borderColor: '#13305D',
            borderWidth: 3,
            color: (params) => {
              let item = colorList[params.dataIndex];
              return item;
            },
          },
        },
        type: 'pie',
        silent: true, //取消高亮
        radius: ['45%', '62%'],
        center: ['50%', '50%'],
        labelLine: {
          show: true,
          color: 'yellow',
          lineStyle: {
            color: 'yellow',
            width: 1,
          },
        },
        label: {
          formatter: (params) => {
            console.log(params);
            return `{i|}`;
          },
          padding: [0, -5, 0, -5],
          align: 'center',
          alignTo: alignTo,
          edgeDistance: '5%',
          rich: {
            i: {
              backgroundColor: 'red',
              borderRadius: 4,
              width: 4,
              height: 4,
              padding: [0, 0, 0, 0],
            },
          },
        },
        data:  props.data,
        z: 1,
      },
    ],
  };
  option && myChart.setOption(option);
};

const resizeEcharts = () => {
  if (timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    if (myChart) {
      myChart.resize();
    }
  }, 300);
};
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeEcharts);
});
</script>

<style lang="scss" scoped></style>