如何实现Echarts Sunburst子元素归属双父元素的效果？

ECharts官方的旭日图（Sunburst）基于严格的树形数据结构，每个子节点仅能对应一个父节点，无法直接实现单节点同时归属两个父元素的效果，可通过以下两种变通方案模拟目标效果：

方案一：复制节点模拟双归属 #

• 在数据源中把需要双归属的节点复制一份，分别挂载到两个目标父节点下
• 给两个复制节点设置完全一致的名称、样式，同时在交互（如tooltip、点击事件）中做统一处理，避免用户感知到重复节点
• 注意：两个节点属于独立数据对象，统计数据时需避免重复计算，可根据业务需求拆分原数值或保持数值一致
• 简化版示例数据结构：

const data = {
  name: '总节点',
  children: [
    {
      name: '父节点A',
      children: [
        { name: '双归属子节点', value: 10 }
      ]
    },
    {
      name: '父节点B',
      children: [
        { name: '双归属子节点', value: 10 }
      ]
    }
  ]
};

方案二：自定义系列实现视觉效果 #

• 借助ECharts的自定义系列（custom series）结合图形API，自行实现旭日图的布局与视觉呈现
• 该方案自由度极高，可直接绘制子节点同时连接两个父节点的视觉效果，但需自行处理布局计算、hover/点击等交互逻辑，开发成本较高
• 核心逻辑：先计算所有父节点的扇形区域，再在对应位置绘制子节点扇形，额外绘制连接线关联两个父节点与子节点

替代方案提示 #

若业务场景允许，可考虑更换可视化方案：桑基图（Sankey）原生支持节点间的多连接关系，更适合展示这类多归属的从属/流量逻辑

内容的提问来源于stack exchange，提问作者beginnercoder