转化漏斗 <Funnel />

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

Template and style descriptions are currently available in Chinese only.

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

Good for

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

Avoid when

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

Content limits

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

Fields

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

Example

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