Echarts饼图引导线小圆点，文字两端对齐

先看一下效果图：

实现思路：

除了本来要绘制的饼图以外，再绘制两个透明的饼图（一个用来将标志线与饼图分隔开，另一个展示小圆点）

function setOption(chart, chartData) {
  let pieSeries = {
    type: 'pie',
    minAngle: 18,
    center: ['50%', '46%'],
    data: [
        {name: '类型一', value: 210},
        {name: '类型二', value: 22},
        {name: '类型三', value: 10},
        {name: '类型四', value: 20},
        {name: '类型五', value: 30},
        {name: '类型六', value: 30},
        {name: '类型七', value: 22210}
    ]
  };
  const option = {
    backgroundColor: "#fff",
    color: ["#3C90F7", "#39DADD", "#35D065", "#F4CD49", "#F5913D", "#7B4BD9",  "#E9431F"],
    legend: {
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      bottom: 0,
      itemGap: 20,
      padding: [ 10, 18 ],
      data: legendData
    },
    series: [{
      // 透明饼图（只展示小圆点），用作标志线的起点
      ...pieSeries,
      radius: ['0%', '50%'],
      labelLine: { length: 0, length2: 0 },
      itemStyle: { opacity: 0 },
      label: {
        normal: {
          show: true,
          formatter: '{b|}',
          rich: {
              b: {
                  height: 4,
                  width: 4,
                  lineHeight: 0,
                  marginBottom: 10,
                  padding: [1, -5],
                  borderRadius: 5,
                  backgroundColor: 'auto', // 圆点颜色和饼图块状颜色一致
              }
          }
        }
      }      
    }, {
      // 透明饼图（只展示标志线），用来将标志线和饼图分离开
      ...pieSeries,
      radius: ['30%', '50%'],
      labelLine: { length2: 600 },
      itemStyle: { opacity:0 },
      label: {
        alignTo: 'edge',
        margin: 0,
        formatter: '{value|{c}}{abg|}\n{hr|}\n{name|{b}({d}%)}',
        rich: {
          value: {
            color: '#000',
            lineHeight: 18,
            fontSize: 12
          },
          hr: { height: 0 },
          name: {
            fontSize: 12,
            lineHeight: 18,
            color: '#696969'
          }
        },
        distanceToLabelLine: 0
      }
    }, {
      // 环形饼图（不展示标志线）
      ...pieSeries,
      radius: ['30%', '44%'],
      label: {
        show: false
      },
    }]
  };
  chart.setOption(option);
}

不足：

1、上面这种方法基本上可以实现，但是小圆点的位置有一丢丢的歪，如若各位老兄有更好的方案，欢迎指正。
2、必须需设置 minAngle , 否则当扇形区域角度很小的时候，文案会各种堆叠。。。。

其他数据可视化工具推荐：

如果项目没有要求必须用Echarts，则可以尝试一下AntV-F2，该工具可以完美的实现上图所示的效果（官方文档地址：https://f2.antv.vision/zh/examples/pie/basic#pie-with-label），但是目前微信小程序上的PieLabel插件的引用还存在一些问题，如有大佬解决了这个问题（除了修改构建后的包之外）希望也能联系我，在此先行谢过~