- 分組
- 数据 · 总量怎么分流
- 元件
Sankey·#sankey
適合
- 一个总量由哪些部分组成、又流向哪里
- 预算、能源、流量的去向
不適合
- 只有一层构成：用 Donut 或 Treemap
- 没有数量的关系：用 NodeGraph
內容上限
| 1 | nodes 4–14 个，label ≤ 6 字；每列 ≤ 8 个 |
| 2 | 列数 2–4，由连线自动推出 |
| 3 | 数值标签含单位 ≤ 10 个字符 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
nodes · 必填 | { id, label }[] | 节点 |
links · 必填 | { from, to, value }[] | 流 |
unit | string | 单位，可带前导空格 |
decimals | number | 小数位 |
focus | string | 强调这个节点的流 |
範例程式碼
<Sankey kicker="流向" title="…" nodes={[{ id: 'coal', label: '煤电' }, …]} links={[{ from: 'coal', to: 'fossil', value: 10472 }, …]} focus="solar" />