开发预览 更新于 2026-05-10

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

属性类型默认值说明
dataHeatmapDay[]日期 + 数值列表,缺失日期视为 0
startDatestring | Date今天 - 1 年范围起点
endDatestring | Date今天范围终点
thresholdsnumber[][1, 3, 6, 10]升序的强度分档;档位数 = 长度 + 1

HeatmapDay

字段类型说明
datestringYYYY-MM-DD 日期
valuenumber当日数值

反馈与讨论

CalendarHeatmap 活跃度热力图 的讨论

0
0 / 600
一键发送
正在加载评论...