ECharts旭日图实现同时高亮祖先与后代节点的技术方案

在数据可视化领域，ECharts作为一款优秀的开源可视化库，其旭日图（Sunburst）常用于展示层次结构数据。近期社区提出了一个关于节点交互的重要需求：当用户悬停在某个节点时，需要同时高亮显示该节点的所有祖先节点和后代节点。

技术背景

旭日图通过环形切割的方式展示层级数据，传统的交互高亮模式通常只支持单一方向：

• 仅高亮当前节点（'self'模式）
• 仅高亮祖先链（'ancestor'模式）
• 仅高亮后代树（'descendant'模式）

但在实际业务场景中，用户往往需要同时看到完整的关联路径，这对分析数据层级关系具有重要意义。

实现方案分析

目前ECharts的树图（Tree）系列已支持'relative'模式，可以同时高亮祖先和后代节点。该功能的实现原理是：

1. 通过树形数据结构遍历算法定位目标节点
2. 向上递归查找所有父节点
3. 向下深度优先搜索所有子节点
4. 对找到的节点集合应用高亮样式

对于旭日图，虽然当前版本尚未原生支持此功能，但开发者可以通过以下两种方式实现：

方案一：基于事件的手动实现

利用ECharts的鼠标事件系统，开发者可以自行实现完整的高亮逻辑：

myChart.on('mouseover', function(params) {
    // 获取当前节点数据
    const node = params.data;
    
    // 自定义查找祖先和后代节点的逻辑
    const highlightNodes = [
        ...findAncestors(node),
        node,
        ...findDescendants(node)
    ];
    
    // 批量更新节点样式
    myChart.dispatchAction({
        type: 'highlight',
        dataIndex: highlightNodes.map(n => n.dataIndex)
    });
});

方案二：扩展源码实现

熟悉ECharts源码的开发者可以直接修改Sunburst系列的核心代码，参考Tree系列的实现方式：

1. 在SunburstPiece.ts中扩展高亮逻辑
2. 添加'relative'模式的处理分支
3. 实现节点遍历算法
4. 维护正确的z-index层级关系

最佳实践建议

对于不同场景的开发者，我们推荐：

• 普通用户：等待官方版本更新（该功能已被标记为easy级别，预计很快会合并）
• 中级开发者：采用事件方案临时实现，注意设置emphasis.focus='none'避免冲突
• 高级开发者：可以基于TreeView.ts的现有代码进行移植开发

技术展望

随着层次数据可视化需求的增加，未来ECharts可能会：

1. 统一各系列的高亮交互API
2. 提供更灵活的关系高亮配置项
3. 优化大规模节点高亮的性能表现
4. 支持多维度的高亮组合策略

该功能的实现将显著提升旭日图在复杂业务场景下的表现力，特别是在供应链分析、组织架构展示等需要同时观察上下级关系的场景中具有重要价值。