- 分组
- 数据 · 两个维度上的定位
- 组件
Bubble·#bubble
适合
- 对象在两个连续指标上的位置
- 想同时看第三个量(气泡大小)
不适合
- 只有两个类别的定位:用 Quadrant
- 点超过 10 个
内容上限
| 1 | points 3–10 个:label ≤ 8 字 |
| 2 | x / y.label ≤ 10 字,带单位 |
| 3 | sizeLabel ≤ 12 字,note ≤ 30 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名,2–8 字 |
title · 必填 | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
points · 必填 | { label, x, y, size?, side? }[] | 点 |
x · 必填 | { label, min, max } | 横轴 |
y · 必填 | { label, min, max } | 纵轴 |
sizeLabel | string | 气泡大小的含义 |
focus | string | 焦点点的 label |
note | string | 右侧结论 |
示例代码
<Bubble
kicker="页数与模板"
title="页数越多,用到的模板越多"
points={[{ label: 'GEO', x: 31, y: 25, size: 4, side: 'right' }, { label: 'GTM', x: 30, y: 26, size: 10, side: 'left' }, …]}
x={{ label: '页数', min: 0, max: 35 }}
y={{ label: '模板种类', min: 0, max: 30 }}
sizeLabel="气泡大小:逐条展开的页数"
focus="GTM"
source="…"
/>