散点图
两变量关系与分布。建议英文标识：ScatterChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.scatter-chart |
| 名称 | 散点图 |
| 二级分类 | 图表（charts） |
| 用途 | 两变量关系与分布 |
| 描述 | 建议英文标识：ScatterChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="scatter-chart">；seriesKey 存在时按值拆系列并配图例，否则单系列；坐标轴均为数值轴。
DSL 结构
{
"type": "ScatterChart",
"props": {
"data": "${data.campaigns}",
"xKey": "cost",
"yKey": "roi",
"seriesKey": "channel"
}
}何时用
何时使用
- 两数值变量的关系与分布（成本-ROI、时长-转化率）。
- 分组对比分布（seriesKey 拆系列）。
何时不用
- 类目对比：用 ColumnChart（散点无类目轴语义）。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 单系列 | 单色散点 | 单群体分布观察 |
| 分组 | seriesKey 多色散点 + 图例 | 多群体分布对比 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 数据行数组 |
xKey / yKey | string | 'x' / 'y' | X / Y 数值字段 |
seriesKey | string | — | 分组字段（按值拆系列） |
colors / title / height / onSelect | — | — | 同 LineChart；onSelect 点击数据点 |
使用规范
- 点量过大（>1k）时考虑聚合或采样，避免渲染压力。
- 两轴语义需在标题或周边文案说明。
正例
- ✓ 广告投放分析：xKey=cost，yKey=roi，seriesKey=channel 观察渠道分布差异。
反例
- ✕ 把时间字段放进散点轴却期望趋势解读（应折线图）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。