漏斗图
流程阶段转化。建议英文标识：FunnelChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.funnel-chart |
| 名称 | 漏斗图 |
| 二级分类 | 图表（charts） |
| 用途 | 流程阶段转化 |
| 描述 | 建议英文标识：FunnelChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="funnel-chart">；默认降序（大在上）；阶段标签置于层内（卡片底色文字）。
DSL 结构
{
"type": "FunnelChart",
"props": {
"data": "${data.funnel}",
"nameKey": "stage",
"valueKey": "users"
}
}何时用
何时使用
- 流程阶段转化（访问 → 注册 → 付费）。
- 阶段数 3-7 的有序漏斗。
何时不用
- 无序类别构成：用 PieChart / ColumnChart（漏斗暗示顺序与流失）。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 标准漏斗 | 降序梯形层叠 | 转化漏斗 |
| 保序漏斗 | sort: 'none' 输入顺序 | 非数值递减的阶段展示 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 阶段数据行 |
nameKey / valueKey | string | 'name' / 'value' | 阶段名 / 数值字段 |
sort | `'descending' | 'ascending' | 'none'` |
colors / title / height / onSelect | — | — | 同 LineChart；onSelect 点击阶段 |
使用规范
- 阶段名 + 数值 + 转化率三级信息中，图内放前两级。
- 相邻阶段数值倒挂时检查 sort 设置。
正例
- ✓ 注册转化漏斗：访问 10000 → 注册 3200 → 付费 860，标注转化率。
反例
- ✕ 把漏斗当构成图展示无序类别（语义误导）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。