如何在Apache ECharts桑基图中让节点显示同名且不破坏连接?
解决方案
要实现节点显示文本与节点关联标识分离,无需修改name字段(这是维持连接关系的核心依据),只需为指定节点单独配置label.formatter即可覆盖显示文本。
具体操作:
- 保留
data中所有节点的name值不变,确保links的连接逻辑不受影响 - 给需要显示为"z"的节点(
a和a2)添加label配置,通过formatter指定显示文本
完整代码示例:
option = { series: { type: 'sankey', layout: 'none', emphasis: { focus: 'adjacency' }, data: [ { name: 'a', label: { formatter: 'z' // 自定义显示文本为z } }, { name: 'b' }, { name: 'a1' }, { name: 'a2', label: { formatter: 'z' // 自定义显示文本为z } }, { name: 'b1' }, { name: 'c' } ], links: [ { source: 'a', target: 'a1', value: 5 }, { source: 'a', target: 'a2', value: 3 }, { source: 'b', target: 'b1', value: 8 }, { source: 'a', target: 'b1', value: 3 }, { source: 'b1', target: 'a1', value: 1 }, { source: 'b1', target: 'c', value: 2 } ] } };
原理说明:
ECharts桑基图的连接关系完全依赖name字段匹配节点,因此必须保证links中的source/target与data节点的name一致。而label.formatter仅控制节点的显示文本,不会对连接逻辑产生任何影响。
内容的提问来源于stack exchange,提问作者fermacias
相关产品推荐
相关产品推荐

