开发预览更新于 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月

日一二三四五六

少多

<script setup lang="ts">
import { CfCalendarHeatmap, type HeatmapDay } from '@chufix-design/vue';

function genYearOfData(): HeatmapDay[] {
  const out: HeatmapDay[] = [];
  const today = new Date();
  for (let i = 0; i < 365; i++) {
    const d = new Date(today);
    d.setDate(d.getDate() - i);
    const seed = (d.getFullYear() * 137 + d.getMonth() * 31 + d.getDate()) % 100;
    let v = 0;
    if (seed > 30) v = Math.floor((seed - 30) / 12);
    out.push({
      date: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`,
      value: v,
    });
  }
  return out;
}

const data = genYearOfData();
</script>

<template>
  <CfCalendarHeatmap :data="data" />
</template>

<script setup>
import { CfCalendarHeatmap } from '@chufix-design/vue';

function genYearOfData(): HeatmapDay[] {
  const out= [];
  const today = new Date();
  for (let i = 0; i < 365; i++) {
    const d = new Date(today);
    d.setDate(d.getDate() - i);
    const seed = (d.getFullYear() * 137 + d.getMonth() * 31 + d.getDate()) % 100;
    let v = 0;
    if (seed > 30) v = Math.floor((seed - 30) / 12);
    out.push({
      date: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`,
      value,
    });
  }
  return out;
}

const data = genYearOfData();
</script>

<template>
  <CfCalendarHeatmap :data="data" />
</template>

<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`	当日数值