- 分组
- 数据 · 两个指标的分布
- 组件
Scatter·#scatter
适合
- 6–60 个对象在两个指标上的位置
- 想按“高/低 × 高/低”把它们分组
不适合
- 点少于 6 个：用 Quadrant 摆卡片
- 要看时间变化：用 LineChart
内容上限
| 1 | points 6–60 个，带名字的 ≤ 8 个，name ≤ 6 字 |
| 2 | xLabel / yLabel ≤ 14 字 |
| 3 | quadrants 4 个，每个 ≤ 8 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
points · 必填 | { name, x, y, label?, focus? }[] | 点 |
xLabel · 必填 | string | 横轴名与单位 |
yLabel · 必填 | string | 纵轴名与单位 |
split | { x, y } | 象限分界值 |
quadrants | [左上, 右上, 左下, 右下] | 象限名 |
xDecimals | number | 横轴小数位 |
yDecimals | number | 纵轴小数位 |
示例代码
<Scatter kicker="追赶" title="…" points={[{ name: '中国', x: 0.7, y: 11.1, label: true }, …]} xLabel="2015 年占比（%）" yLabel="2025 年占比（%）" split={{ x: 1.1, y: 8.7 }} quadrants={['后来居上', '一直领先', '仍在起步', '被平均追上']} />