Funnel
funnel漏斗图 · 阶段宽度按 value 比例 + 级间转化率徽标(本级/上一级) · 纵/横双向 + per-stage tone + renderStage 自定义 · computeFunnel 纯函数(不除零)带单测 · 任务漏斗/转化漏斗/留存(零依赖)
用法
基础用法（vertical）
每级一行，居中条按 value 比例缩放宽度，级间默认显示转化率徽标。per-stage tone 吃 token。
涌入1240
转化 87.1%
路由1080
转化 79.6%
执行860
转化 83.7%
完成720
tsx
<Funnel
stages={[
{ id: "in", label: "涌入", value: 1240, tone: "brand" },
{ id: "route", label: "路由", value: 1080, tone: "brand" },
{ id: "exec", label: "执行", value: 860, tone: "warning" },
{ id: "done", label: "完成", value: 720, tone: "success" },
]}
/>横向（horizontal）
每列一阶段，按 value 比例缩放高度，适合转化漏斗。
8600访问
48.8%
4200注册
45.2%
1900试用
33.7%
640付费
tsx
<Funnel
stages={[
{ id: "visit", label: "访问", value: 8600, tone: "brand" },
{ id: "signup", label: "注册", value: 4200, tone: "brand" },
{ id: "trial", label: "试用", value: 1900, tone: "warning" },
{ id: "pay", label: "付费", value: 640, tone: "success" },
]}
orientation="horizontal"
/>隐藏转化率徽标
showConversion={false} 关闭级间转化率，只看体量。
涌入1240
路由1080
执行860
完成720
tsx
<Funnel stages={stages} showConversion={false} />可点击下钻
传 onStageClick 后条变为按钮，点击回吐该阶段用于下钻。
转化 87.1%
转化 79.6%
转化 83.7%
tsx
<Funnel
stages={stages}
onStageClick={(s) => console.log(s.id)}
/>何时用
可视化「单一线性流程逐级流失/转化」时用——访问→注册→付费、任务涌入→完成、留存衰减。要表达跨多层的有向分流（一节点流向多去向）用 Sankey；只列扁平数值用 [Table]。Funnel 专门表达「每级相对上一级的转化率」。
导入
ts
import { Funnel, computeFunnel } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| stages* | FunnelStage[] | — | 阶段数组。{id, label, value, tone?}；漏斗宽/高按 value 比例缩放 |
| orientation | "vertical" | "horizontal" | "vertical" | vertical 每级一行按宽度比 / horizontal 每列按高度比 |
| showConversion | boolean | true | 是否显示级间转化率徽标 |
| className | string | — | 外层类名 |
FunnelStage.tone："neutral" \| "brand" \| "success" \| "warning" \| "danger"，缺省 brand（同 Tag 的 tone 语义，吃 token）。
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onStageClick | (stage) => void | 点击某一级回调 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| renderStage | (stage, ctx: FunnelRenderCtx) => ReactNode | 渲染函数：自定义阶段内容（替换默认 label + value）。ctx 含 widthRatio/conversion(首级 null)/index |
禁忌 / 坑
- tone 是固定语义枚举（neutral/brand/success/warning/danger），不接受任意 CSS 颜色——要自定义配色走
renderStage。 computeFunnel纯函数对首级conversion返回null（无上一级可比），且不除零；自定义渲染时务必判conversion == null。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
涌入1240
转化 87.1%
路由1080
转化 79.6%
执行860
转化 83.7%
完成720
<Funnel
stages={[
{ id: "in", label: "涌入", value: 1240, tone: "brand" },
{ id: "route", label: "路由", value: 1080, tone: "brand" },
{ id: "exec", label: "执行", value: 860, tone: "warning" },
{ id: "done", label: "完成", value: 720, tone: "success" },
]}
orientation="vertical"
showConversion={true}
onStageClick={(s) => console.log(s.id)}
/>