Echarts.js桑基图Levels配置失效，节点无法按层级对齐求助

一、节点无法按层级对齐的问题修复 #

你的代码里存在两个关键问题导致布局异常：

1. 重复且错误的label配置 #

代码中重复定义了两次label配置块，后一个会覆盖前一个的设置，且第二个label里的size属性是错误写法（正确属性应放在textStyle.fontSize中）。重复配置会干扰ECharts的布局计算，导致节点排列错乱。

修复方式：合并两个label配置，修正属性写法：

label: {
  formatter: '{b}: {c}%',
  position: 'left', // 垂直布局下，将label放在节点左侧更合理，避免跨层重叠
  textStyle: {
    fontSize: 24
  }
}

2. 层级推断或布局参数缺失 #

垂直布局（orient: 'vertical'）下，ECharts会自动根据links推断节点层级，但如果部分节点没有关联链路，可能会导致层级混乱。可以手动在data.nodes中为每个节点指定depth属性，强制固定层级：

// 示例nodes数据结构，手动指定depth
data: [
  { name: '节点A', depth: 0 },
  { name: '节点B', depth: 1 },
  { name: '节点C', depth: 2 },
  // ...其他节点
]

另外，可添加nodeGap参数调整同一层级内节点的垂直间距，优化布局：

series: [
  {
    type: 'sankey',
    orient: 'vertical',
    nodeGap: 20, // 同一层级节点的垂直间距，按需调整
    // ...其他配置
  }
]

二、替代桑基图JS库推荐 #

如果需要更灵活或更简洁的桑基图实现，可考虑这些库：

• D3.js：功能最全面的可视化库，原生支持桑基图，可完全自定义布局、样式和交互，适合复杂场景，但学习成本较高。
• Plotly.js：开箱即用的可视化库，提供封装好的桑基图组件，配置简单，交互性强，支持多种布局方向。
• Sankey.js：轻量级专用桑基图库，专注于桑基图的布局渲染，体积小，API简洁，适合快速实现基础桑基图需求。
• Highcharts：成熟的商业可视化库，桑基图组件稳定性高，配置直观，适合企业级项目（注意非开源免费）。

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