如何在Apache ECharts中将环形饼图修改为带箭头的环形图表？

嗨～ 我明白你想把现在这个普通的环形饼图改成每个分段内侧带指向中心箭头的样式对吧？这其实用ECharts的graphic组件就能轻松实现，我已经帮你调整好代码了，直接用就行！

先给你看修改后的完整代码：

var data = [
  { name: 'Label 1', value: 16.67 },
  { name: 'Label 2', value: 16.67 },
  { name: 'Label 3', value: 16.67 },
  { name: 'Label 4', value: 16.67 },
  { name: 'Label 5', value: 16.67 },
  { name: 'Label 6', value: 16.67 },
];

// 计算每个箭头的位置：6个均分项，每个占60度
const arrowConfigs = data.map((_, index) => {
  // 每个扇区的中心角度（从x轴正方向顺时针算）
  const angle = index * 60 + 30; // 第一个扇区中心在30度，依次加60
  const radian = (angle * Math.PI) / 180;
  // 箭头位置的半径：比环形内半径（50%）小5%，让箭头在环形内侧
  const radiusPercent = 45;
  return {
    position: [
      radiusPercent * Math.cos(radian),
      radiusPercent * Math.sin(radian)
    ],
    rotation: -radian, // 让箭头指向中心，对应角度旋转
    shape: {
      d: 'M 0 0 L 15 0 L 10 -5 L 10 5 Z', // 自定义实心箭头的SVG路径
      fill: '#fff' // 箭头颜色，可根据需求修改
    }
  };
});

option = {
  series: {
    type: "pie",
    radius: ['50%', '70%'],
    left: "center",
    data: data,
    // 给每个扇区设置不同颜色，增强区分度
    itemStyle: {
      color: (params) => {
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
        return colors[params.dataIndex];
      }
    }
  },
  // 通过graphic组件批量绘制箭头
  graphic: arrowConfigs.map(config => ({
    type: 'path',
    left: 'center',
    top: 'center',
    offsetCenter: config.position,
    rotation: config.rotation,
    shape: config.shape,
    silent: true // 箭头不响应鼠标事件，避免干扰饼图交互
  }))
};

我给你拆解下关键部分，方便你按需调整：

• 箭头位置计算：因为你的6个数据是均分的，每个扇区占60度，所以我循环算出了每个扇区的中心角度，再用三角函数把箭头定位在环形内侧靠近中心的位置。如果后续数据不是均分的，只需要调整角度计算逻辑就行。
• 自定义箭头样式：箭头是用SVG路径定义的实心样式，你要是觉得箭头太大/太小、形状不对，直接修改shape.d里的路径参数就能调整。
• 扇区配色：我给每个扇区加了不同的颜色，方便区分，你可以把colors数组换成自己需要的配色方案。
• 无干扰交互：给箭头设置了silent: true，这样鼠标放到箭头上不会影响饼图的正常交互（比如hover高亮）。

如果还有其他细节要调整，比如箭头颜色和扇区颜色匹配，只需要在arrowConfigs里根据params.dataIndex对应取颜色就行～

备注：内容来源于stack exchange，提问作者Krunal T.