---
url: /chart/heatmap.md
---
# 热力图 heatmap

在二维网格上按数值着色：哪里密度高、什么时段有规律，颜色深浅一眼呈现。"星期 × 时段"活跃度是最经典的用法。

## 何时使用

* 两个维度交叉的**密度/强度**表达（时段 × 品类、地区 × 指标）；
* 数据量大到散点互相重叠、看不出形态时，热力是散点的密度化替代；
* 周期性规律（按天/小时）的展示效果极佳。

## 示例

专属数据字段 `heatmapData`（`{ x, y, value }`），色阶取默认蓝阶，数值越大颜色越深。

### 考勤与工时热力

行政与项目管理的真实用法：工作日早高峰 9-10 点打卡最密、周五下午骤降——排班、工位资源、加班审批的依据一图拿全。

### 财务对账差异热力

月度结算的对账复盘：门店 × 科目交叉看差异笔数——颜色集中的格子就是制度漏洞，比翻流水表快得多。

## 日历热力：年月日周激活热度

`type: 'calendar-heatmap'` 是热力图的时间轴特化（GitHub 活动热力同款）：列 = 周、行 = 星期，一天一格，回答「**哪段时间活跃、活跃了多少天**」。数据字段 `calendarData`（`{ date, value }`），`calendar.start` / `end` 缺省取数据极值并对齐周边界。

工作日密、周末疏的节律，月份标签一压，三个月的投入节奏直接可读；今日格主色描边，右下「少 — 多」色阶随明暗主题换挡。格子横向铺满绘图区（宽高独立自适应），`calendar.granularity` 支持 `day` / `week` / `month` 三档视角切换（周/月为求和聚合）。

悬浮任意格子读取日期与数值；`calendar.weekdayLabels` / `showAllWeekdays` 控制左列星期标签，`calendar.colors` 可整列替换色阶（5 色，第 1 位为空档色）。

## 配置要点

* 只传出现的组合即可，网格自动补齐坐标轴类目；
* 悬浮读取格子坐标与数值；
* 想看点与点的相关关系而非密度时改用[散点图](/chart/scatter)；
* 按天粒度的时间热度用日历热力图（本页上节），交叉维度对比用 `heatmapData`。

## 相关

* [散点图](/chart/scatter) · [箱线图](/chart/boxplot)
* [API 参考](/chart/api)