图表
FunnelChart
只会越来越窄的若干阶段。
什么时候用它
注册流程、招聘管线、结账流程。当流量会**分叉**而不只是收窄时，那是 SankeyChart——漏斗从构造上只有一条路径。
示例
default
| stage | Value |
|---|---|
| Visited | 4,200 |
| Signed up | 1,800 |
| Activated | 900 |
| Paid | 320 |
variant
| stage | Value |
|---|---|
| Visited | 4,200 |
| Signed up | 1,800 |
| Activated | 900 |
| Paid | 320 |
说明
只会越来越窄的若干阶段——注册流程、招聘管线、结账流程。
它的注意事项和所有漏斗图都一样：收窄编码的是相邻两阶段之间的比例，而眼睛读的是围出来的面积，于是漏斗会放大一次平缓的下滑、压平一次陡峭的下滑。当确切的流失率才是重点时，把百分比印到阶段上——<Funnel.Label> 就是干这个的——或者改用 <BarChart>，它把每个阶段编码在同一把老实的刻度上。
当流量会分叉、而不只是收窄时，改用 <SankeyChart>：漏斗从构造上只有一条路径。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——`<Funnel>`、`<Tooltip>`。 | |
| config必填 | ChartConfig | 阶段名 → 它的标签和上色。键必须和 `nameKey` 的取值对得上。 | |
| data必填 | TData[] | 各个阶段，最宽的在前。顺序就是漏斗本身；这里不会替你排序。 | |
| dataKey必填 | keyof TData & string | 存放每个阶段数值的数据字段。 | |
| nameKey必填 | keyof TData & string | 给每个阶段命名的数据字段。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| chartProps | ComponentProps<typeof RechartsFunnelChart> | 通往原始 Recharts 图表元素的逃生口。 | |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| hideDataTable | boolean | false | 去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。 |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 |
类型
export type FunnelVariant = 'stepped' | 'ramp'无障碍
- title 必填；各阶段同样会渲染成一份视觉隐藏的表格。
- 收窄编码的是相邻两阶段之间的**比例**，而眼睛读的是围出来的面积，所以漏斗会放大一次平缓的下滑。组合一个 Label 把数字印上去——那就是补救。
- 默认样式让每个阶段共用同一种填充、把落差交给形状去说。再让每个阶段依次加深，等于把同一个事实编码两遍。