echarts饼图如何在指引线上增加一个圆点？

Question

如何使用echarts在饼图的指引线上增加一个自定义圆点呢？

示例效果如下：

我实现的效果一：

效果一配置代码：

const option = {
    series: [
      {
        name: "下月应收件保费占比最高的产品",
        type: "pie",
        radius: ["43%", "73.4%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        labelLine: {
          normal: {
            length: fontSize(12),
            length2: fontSize(40),
            lineStyle: {
              color: "rgba(255, 255, 255, 0.65)",
              cap: "round",
            },
          },
        },
        label: {
          overflow: "truncate",
          formatter: (params) => {
            const value = showData[params.dataIndex].value;
            let name = params.name;
            return `{name|${name}}{icon| ●}\n{spaceLine|}\n{value|${numDivFo(
              showPercent(value)
            )}}`;
          },
          padding: [fontSize(8), -fontSize(4), fontSize(0), -fontSize(4)],
          rich: {
            icon: {
              fontSize: fontSize(18),
              color: "auto",
            },
            name: {
              fontSize: fontSize(14),
              fontWeight: 400,
              // padding: [0, 10, 0, 4],
              color: "#fff",
              title: "1223245",
            },
            spaceLine: {
              fontSize: fontSize(8),
            },
            value: {
              fontSize: fontSize(18),
              fontWeight: 600,
              padding: [0, 0, 0, 0],
              color: "#fff",
            },
          },
        },
        data: calcData,
      }
    ]
}

可以看到圆点不会总是贴着指引线，而是总是处在文字右侧，显然不是设计想要的效果。

我实现的效果二：

效果二配置代码：

const option = {
    series: [
      {
        name: "下月应收件保费占比最高的产品",
        type: "pie",
        radius: ["43%", "73.4%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        avoidLabelOverlap: false,
        labelLine: {
          normal: {
            length: fontSize(12),
            length2: fontSize(40),
            lineStyle: {
              color: "rgba(255, 255, 255, 0.65)",
              cap: "round",
            },
          },
        },
        label: {
          overflow: "truncate",
          formatter: (params) => {
            const value = showData[params.dataIndex].value;
            let name = params.name;
            return `{name|${name}}\n{spaceLine|}\n{value|${numDivFo(
              showPercent(value)
            )}}`;
          },
          padding: [fontSize(8), -fontSize(4), fontSize(0), -fontSize(4)],
          rich: {
            icon: {
              fontSize: fontSize(18),
              color: "auto",
            },
            name: {
              fontSize: fontSize(14),
              fontWeight: 400,
              // padding: [0, 10, 0, 4],
              color: "#fff",
              title: "1223245",
            },
            spaceLine: {
              fontSize: fontSize(8),
            },
            value: {
              fontSize: fontSize(18),
              fontWeight: 600,
              padding: [0, 0, 0, 0],
              color: "#fff",
            },
          },
        },
        data: calcData,
      },
      {
        name: "下月应收件保费占比最高的产品",
        type: "pie",
        silent: true, // 取消高亮
        radius: ["43%", "73.4%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        avoidLabelOverlap: false,
        labelLine: {
          show: false,
          normal: {
            length: fontSize(12),
            length2: fontSize(40),
            lineStyle: {
              color: "rgba(255, 255, 255, 0)",
            },
          },
        },
        label: {
          normal: {
            formatter: (params) => {
              return "{icon|●}";
            },
            padding: [0, -fontSize(18), fontSize(20), -fontSize(18)],
            rich: {
              icon: {
                fontSize: fontSize(18),
                color: "auto",
              },
            },
          },
        },
        data: calcData,
        z: -1,
      },
    ],
}

可以看到效果二也不理想，效果二是用两个pie拼凑出来的，但是因为pie1文字拥挤导致触发了鼠标hover才显示文字的效果，但是pie2的圆点并不会触发这个效果，导致单独出现一个圆点而没有文字。

---

以上就是我目前做到的程度，我看到echarts有提供自定义画图表的接口，但是从零开始画未免也太费时间了，我的想法是能不能继承现有的饼图类，然后在实现自己的饼图类再去实例化呢？貌似官方没有这类的接口。

Answer 1

兄弟你的代码实在跑不出来，给你精简了一些，其他的属性你自己再配置。

    let echartData = [
      {
        name: 'A类',
        value: '3720'
      },
      {
        name: 'B类',
        value: '2920'
      },
      {
        name: 'C类',
        value: '2200'
      },
      {
        name: 'D类',
        value: '1420'
      },
      {
        name: 'E类',
        value: '3200'
      },
      {
        name: 'F类',
        value: '2420'
      },
      {
        name: 'G类',
        value: '2200'
      },
      {
        name: 'H类',
        value: '1420'
      },
      {
        name: 'I类',
        value: '3200'
      },
      {
        name: 'J类',
        value: '2420'
      }
    ];
    option = {
      series: [
        {
          name: '下月应收件保费占比最高的产品',
          type: 'pie',
          radius: ['43%', '73.4%'],
          center: ['50%', '50%'],
          hoverAnimation: false,
          data: echartData,
          label: {
            normal: {
              formatter: (params) => {
                return (
                  '{icon|●}{name|' + params.name + '}\n{value|' + params.value + '}'
                );
              },
              // padding: [0 , -100, 25, -100],
              rich: {
                icon: {
                  fontSize: 16,
                  color: 'inherit'
                },
                name: {
                  fontSize: 18,
                  padding: [0, 0, 0, 10],
                  color: '#000'
                },
                value: {
                  fontSize: 14,
                  fontWeight: 'bolder',
                  padding: [10, 0, 0, 20],
                  color: 'inherit'
                  // color: '#333333'
                }
              }
            }
          }
        }
      ]
    };