CalendarHeatmap 活跃度热力图
一年 52 周 × 7 天的方格热力图,按数值强度显示密度颜色,常用于活跃度 / 提交统计。
基础用法
data 是 [{ date: 'YYYY-MM-DD', value: number }]。thresholds 默认 [1, 3, 6, 10],对应 5 档颜色(含 0)。
5月6月7月8月9月10月11月12月1月2月3月4月5月
日一二三四五六
少多
<CfCalendarHeatmap :data="data" /> <CfCalendarHeatmap data={data} /> API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | HeatmapDay[] | — | 日期 + 数值列表,缺失日期视为 0 |
startDate | string | Date | 今天 - 1 年 | 范围起点 |
endDate | string | Date | 今天 | 范围终点 |
thresholds | number[] | [1, 3, 6, 10] | 升序的强度分档;档位数 = 长度 + 1 |
HeatmapDay
| 字段 | 类型 | 说明 |
|---|---|---|
date | string | YYYY-MM-DD 日期 |
value | number | 当日数值 |
反馈与讨论
CalendarHeatmap 活跃度热力图 的讨论