桑基图
节点之间的流向与规模。建议英文标识：SankeyChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.sankey-chart |
| 名称 | 桑基图 |
| 二级分类 | 图表（charts） |
| 用途 | 节点之间的流向与规模 |
| 描述 | 建议英文标识：SankeyChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="sankey-chart">；nodes/links 结构直传（series.data 承载节点）；边为渐变流向色，悬停聚焦相邻节点。
DSL 结构
{
"type": "SankeyChart",
"props": {
"nodes": [
{
"name": "首页"
},
{
"name": "详情"
},
{
"name": "下单"
}
],
"links": [
{
"source": "首页",
"target": "详情",
"value": 60
},
{
"source": "详情",
"target": "下单",
"value": 25
}
]
}
}何时用
何时使用
- 节点间流向与规模（流量路径、能源流向、资金流转）。
- 多源多汇的桑基平衡图。
何时不用
- 简单线性漏斗：FunnelChart 更轻。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单路径流 | 单源单汇 | 页面跳转路径 |
| 多源多汇 | 网状流向 | 流量分配分析 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
nodes | { name: string }[] | [] | 节点数组 |
links | { source: string; target: string; value: number }[] | [] | 流向边（source → target 及数值） |
title / height / onSelect | — | — | 标题 / 高度 / 点击节点或边 |
使用规范
- 节点数 ≤ 12，过多交叉不可读。
- 流入总和 = 流出总和（桑基图语义），数据提供方保证平衡。
正例
- ✓ 用户路径分析：landing → 详情 → 下单/流失 的流向规模。
反例
- ✕ 有环流向（A→B→A）用桑基图（布局不支持环）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。