气泡图
三变量关系。建议英文标识：BubbleChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.bubble-chart |
| 名称 | 气泡图 |
| 二级分类 | 图表（charts） |
| 用途 | 三变量关系 |
| 描述 | 建议英文标识：BubbleChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="bubble-chart">；sizeKey 数值线性映射 12-48px 气泡半径；支持 seriesKey 分组。
DSL 结构
{
"type": "BubbleChart",
"props": {
"data": "${data.products}",
"xKey": "price",
"yKey": "sales",
"sizeKey": "profit"
}
}何时用
何时使用
- 三变量关系：两轴 + 气泡大小（价格-销量-利润）。
何时不用
- 仅两变量：ScatterChart 更直接（气泡增加面积误判）。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单系列气泡 | 单色气泡 | 三变量总体关系 |
| 分组气泡 | seriesKey 多色 | 类目 + 三变量 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data / xKey / yKey | — | — | 同 ScatterChart |
sizeKey | string | 'size' | 气泡大小字段（第三变量） |
seriesKey | string | — | 分组字段 |
colors / title / height / onSelect | — | — | 同 ScatterChart |
使用规范
- 大小映射的字段必须为非负数值。
- 气泡数 ≤ 50 时可读，超出考虑聚合。
正例
- ✓ 商品组合分析：price × sales，气泡大小 = profit 找高利润爆品。
反例
- ✕ sizeKey 取负值或枚举（大小无线性语义）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。