转化漏斗 <Funnel />

居中的逐级变窄横条（等距变窄，不按比例），右侧是人数；相邻两级之间自动算出转化率，指定的一级标成强调色；右栏写为什么先修它。

版型與風格的說明目前僅提供簡體中文。

分組: 诊断 · 逐级转化与最该修的一级
元件: Funnel · #funnel
互動: 横条从中间展开，转化率标签依次出现；悬停一级时横条加深。

適合

注册、激活、付费这类逐级转化的流程
想说明“先修哪一级”，而不只是展示数字

不適合

各阶段不是包含关系（后一级不是前一级的子集）：用 MetricBars
只有两级：直接写一个 BigStat

內容上限

1	stages 4–6 级，数值逐级递减
2	label ≤ 8 字；note ≤ 18 字
3	leak 指向要先修的那一步（第 leak 级到下一级）；leakLabel ≤ 6 字
4	aside.title ≤ 14 字；aside.body ≤ 60 字
5	条宽只表示顺序，数据看数字和转化率

欄位

欄位	型別
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`stages` · 必填	`{ label, value, note? }[]`	各级
`leak`	`number`	要先修的那一步
`leakLabel`	`string`	这一步的标签，默认“优先修复”
`unit`	`string`	数值单位
`aside`	`{ title, body }`	右栏说明

範例程式碼

<Funnel
  kicker="转化漏斗"
  title="先修最漏的那一级"
  unit="人"
  stages={[
    { label: '注册试用', value: 2400 },
    { label: '激活', note: '首次出图', value: 960 },
    { label: '预约演示', value: 230 },
    { label: '付费', value: 86 },
  ]}
  leak={1}
  aside={{ title: '激活后尽快跟进', body: '…' }}
  source="示意：示例数据"
/>