- 分组
- 拆解 · 从期初到期末
- 组件
Waterfall·#waterfall- 交互
- 柱子依次升起（减少项从上往下落）。
适合
- ARR、利润、预算、人数等从期初到期末的变化拆解
- 想说明“增长被什么吃掉了”
不适合
- 各项之间不是加减关系：用 MetricBars 或 DeltaBars
- 变化项超过 6 个：合并小项
内容上限
| 1 | steps 3–6 项，正数加、负数减；期末自动计算 |
| 2 | label ≤ 6 字；end ≤ 6 字 |
| 3 | notes 2–3 条：key ≤ 8 字（可含一个数字），text ≤ 30 字 |
| 4 | 数值保持在 5 位数以内，用 unit 写万元、千人 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
start · 必填 | { label, value } | 期初 |
steps · 必填 | { label, value }[] | 增减项 |
end · 必填 | string | 期末标签 |
unit | string | 单位 |
digits | number | 小数位，默认 0 |
notes | { key, text }[] | 右栏解读 |
示例代码
<Waterfall
kicker="收入桥"
title="年度经常性收入从哪里来"
start={{ label: '期初 ARR', value: 1200 }}
steps={[{ label: '新签', value: 420 }, { label: '扩容', value: 180 }, { label: '流失', value: -140 }]}
end="期末 ARR"
unit="万元"
source="示意"
/>