双漏斗对比 <DoubleFunnel />
两个漏斗背靠背,阶段名在中间一列,左右各自的条形宽度按数值缩放,并标出相对第一级的百分比。
Template and style descriptions are currently available in Chinese only.
- Group
- 对比 · 两组对象经过同样的阶段
- Component
DoubleFunnel·#double-funnel
Good for
- 两个群体、两个版本的转化对比
- 3–5 个相同的阶段
Avoid when
- 只有一组:用 Funnel
- 阶段不同:分两页
Content limits
| 1 | stages 3–5 个各 ≤ 8 字 |
| 2 | values 与 stages 一一对应、逐级不增 |
| 3 | name ≤ 8 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
stages · required | string[] | 阶段名 |
left · required | { name, values } | 左边 |
right · required | { name, values } | 右边 |
unit | string | 单位 |
Example
<DoubleFunnel kicker="对比" title="…" unit="页" stages={['全部页面', '写了出处', '出处 + 逐条展开']} left={{ name: 'GEO 演示', values: [31, 24, 4] }} right={{ name: 'GTM 演示', values: [30, 23, 10] }} />