项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

桑基图 sankey ​

能量、资金、流量的守恒流动:节点分列排布,流带宽度即流量,一眼看出「从哪来、到哪去、谁是大头」。能源结构分析、成本构成追踪、用户路径转化的首选。

何时使用 ​

  • 数据是「源 → 转换 → 汇」的多级流动,且流量守恒(流出之和 ≈ 流入之和);
  • 关心每条路径的占比与去向,而不是单点数值(那用柱状图);
  • 节点列数建议 2–4 列,流带数量建议 ≤ 30 条,再多读图成本陡增。

示例 ​

专属数据字段 sankeyData({ nodes: [{ name }], links: [{ source, target, value }] })。节点 value 可省略,自动按链接汇总;流带颜色继承源节点色,同源同色不追色。

能源流动分析 ​

省级能源结构的经典表达:三类一次能源 → 发电 / 供热两条转换路径 → 居民 / 工业两类终端。悬浮流带强调自身与同源同宿路径、淡化其余;悬浮节点高亮相连全部流带并汇总总流量。

用户旅程分流 ​

从启动到付费的三步路径:每条流带的宽度就是「走这条路的人有多少」,流失发生在哪一段一图可见。

配置要点 ​

  • 流带颜色继承源节点槽位色;nodes[].color / links[].color 可显式定色;
  • 图例点选节点即隐去该节点与相连流带,剩余节点重新等比布局;
  • 悬浮语义:流带 → 强调自身 + 同源同宿,其余淡出;节点 → 强调相连流带;
  • 节点 value 缺省时按 max(入流, 出流) 自动汇总,一般不用手算;
  • sankey.nodeAlign 定列对齐:justify(默认)末端节点贴右缘,left 按拓扑深度自然排布。

相关 ​