项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

热力图 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 位为空档色)。

配置要点 ​

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

相关 ​