XHeatmap — 贡献热力图

Gitee 风格的贡献热力图组件，按周聚合展示每日贡献次数，颜色深浅表示贡献量。不传数据时自动生成最近一年随机示例，纯前端即可预览。

实时演示

贡献热力图共 2015 次贡献

一

三

五

少多

<!-- 不传 data，自动生成最近一年随机示例 -->
<XHeatmap color="#1f6feb" />

传入自定义数据：

<XHeatmap :data="[
  { date: '2026-01-01', count: 5 },
  { date: '2026-01-02', count: 0 }
]" color="#1f6feb" />

Props

属性	类型	默认值	说明
data	Array<{ date, count }>	null	贡献数据；不传自动生成最近一年随机示例
color	string	'#216e39'	最深色（level 4）。其余 4 级色阶由该色向白色自动计算；默认 Gitee 同款绿

注意事项

• 颜色分级：传入 color 作为最深色，组件按 0.25/0.5/0.75/1 向白色混合生成 5 级色阶（level 0 为空位灰 #ebedf0）。
• 分级阈值：0 → 空位；1~3 → 浅；4~7 → 中浅；8~12 → 中深；>12 → 最深。
• 按「周一开头」对齐，缺失日期显示为空位。
• 头部统计所选数据区间的总贡献次数。