- 分組
- 分布 · 两个维度交叉的数值
- 元件
Heatmap·#heatmap- 互動
- 格子沿对角线依次弹出；悬停格子时放大，悬停一行时行名变为强调色。
適合
- 分批留存（签约月份 × 第几个月）
- 渠道 × 漏斗阶段的转化率、功能 × 客户群的使用率
不適合
- 只有一行或一列：用 MetricBars
- 要看精确比较而非整体规律：用 Matrix
內容上限
| 1 | cols 3–8 列，每个 ≤ 6 个字符 |
| 2 | rows 3–7 行；label ≤ 8 字；sub ≤ 10 个字符 |
| 3 | 数值 ≤ 4 位（含小数），单位用 unit |
| 4 | notes 2–3 条：key ≤ 8 字，text ≤ 30 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
cols · 必填 | string[] | 列标签 |
rows · 必填 | { label, sub?, values }[] | 行；values 里 null 表示还没有数据 |
unit | string | 格子里的单位 |
digits | number | 小数位 |
min / max | number | 色阶两端，默认取数据的最小值和最大值 |
scale | [string, string] | 色阶两端的文字 |
notes | { key, text }[] | 右栏解读 |
範例程式碼
<Heatmap
kicker="分批留存"
title="按签约月份看留存"
cols={['第 1 月', '第 2 月', '第 3 月']}
rows={[
{ label: '1 月签约', values: [92, 86, 82] },
{ label: '2 月签约', values: [93, 87, null] },
]}
unit="%"
source="示意"
/>