热力图
二维密度与强弱。建议英文标识：Heatmap。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.heatmap |
| 名称 | 热力图 |
| 二级分类 | 图表（charts） |
| 用途 | 二维密度与强弱 |
| 描述 | 建议英文标识：Heatmap。 |
预览
渲染为 echarts canvas 容器 <div data-slot="heatmap">；x/y 类目自动去重；visualMap 色阶取主题色板（深色端 = palette[2]，浅色端 = palette[0]），数值范围取数据最值。
DSL 结构
{
"type": "Heatmap",
"props": {
"data": "${data.punch}",
"xKey": "hour",
"yKey": "weekday",
"valueKey": "commits"
}
}何时用
何时使用
- 二维类目密度（时段 × 星期 的活跃度、功能 × 版本 的缺陷密度）。
何时不用
- 仅一维分布：用 ColumnChart。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 提交热力 | 小时 × 星期 网格 | 协作平台活跃度 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 数据行（x / y / value） |
xKey / yKey | string | 'x' / 'y' | 横 / 纵类目字段 |
valueKey | string | 'value' | 数值字段 |
title / height / onSelect | — | — | 标题 / 高度 / 点击单元格 |
使用规范
- 缺失组合显示为背景色（无数据），不用 0 填充混淆。
- 类目轴顺序业务可控时先排序数据再传入。
正例
- ✓ 代码提交热力图：xKey=hour（0-23），yKey=weekday。
反例
- ✕ 连续数值轴用热力图（散点密度更合适）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。