桑基图 <Sankey />
2–4 列节点，带宽与数值成正比的流带把它们连起来；逐条展开时一列一列流过去。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 总量怎么分流
- Component
Sankey·#sankey
Good for
- 一个总量由哪些部分组成、又流向哪里
- 预算、能源、流量的去向
Avoid when
- 只有一层构成：用 Donut 或 Treemap
- 没有数量的关系：用 NodeGraph
Content limits
| 1 | nodes 4–14 个，label ≤ 6 字；每列 ≤ 8 个 |
| 2 | 列数 2–4，由连线自动推出 |
| 3 | 数值标签含单位 ≤ 10 个字符 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
nodes · required | { id, label }[] | 节点 |
links · required | { from, to, value }[] | 流 |
unit | string | 单位，可带前导空格 |
decimals | number | 小数位 |
focus | string | 强调这个节点的流 |
Example
<Sankey kicker="流向" title="…" nodes={[{ id: 'coal', label: '煤电' }, …]} links={[{ from: 'coal', to: 'fossil', value: 10472 }, …]} focus="solar" />