Tea Design

Appearance

日历热力图 Calendar Heatmap ​

我看你上周github压根没有提交记录，steam倒是天天在线

本组件提供了日历热力图最核心的数据分析和展示功能

基础用法 ​

通过设置mapData的值传入相关数据，使用@hover会在用户悬浮日历格子时执行回调，搭配tipInfo可实现悬浮时文字提示

在@hover方法可接受一个类型为{ date: string, count: number | undefined }的对象，为该位置所对应的数据

mapData 数据格式

请确保传入的数据是{ [key: string]: number }的形式，且其中键的值应为'YYYY-MM-DD'的格式

github提交
展开查看
vue
<template>
    <t-calendar-heatmap :mapData="data" @hover="showInfo" title="github提交图" :tipInfo="msg" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const data: { [key: string]: number } = {
    '2025-04-21': 1,
    '2025-04-26': 2,
    '2025-05-01': 3,
    '2025-05-02': 4,
    '2025-05-04': 5,
    '2025-05-11': 6,
    '2025-05-15': 7,
    '2025-05-20': 8,
    '2025-05-26': 9,
    '2025-05-31': 10,
    '2025-06-11': 11,
    '2025-06-24': 12,
    '2025-06-30': 13
}
const msg = ref<string>('')
const showInfo = (v: { date: string; count: number | undefined }) => {
    msg.value = v['count'] ? `${v['date']}共有${v['count']}次贡献` : `${v['date']}没有贡献`
}
</script>
vue
<template>
    <t-calendar-heatmap :mapData="data" @hover="showInfo" title="github提交图" :tipInfo="msg" />
</template>

<script setup>
import { ref } from 'vue'
const data = {
    '2025-04-21': 1,
    '2025-04-26': 2,
    '2025-05-01': 3,
    '2025-05-02': 4,
    '2025-05-04': 5,
    '2025-05-11': 6,
    '2025-05-15': 7,
    '2025-05-20': 8,
    '2025-05-26': 9,
    '2025-05-31': 10,
    '2025-06-11': 11,
    '2025-06-24': 12,
    '2025-06-30': 13
}
const msg = ref('')
const showInfo = v => {
    msg.value = v['count'] ? `${v['date']}共有${v['count']}次贡献` : `${v['date']}没有贡献`
}
</script>

自定义阈值 ​

你可以根据使用场景自定义变色的阈值，通过设置thresholds属性来使用组件提供的四种渐变颜色

假如传入[k1, k2, k3, k4]，那么

范围(-∞, k1](k1, k2](k2, k3](k3, k4](k4, +∞)
颜色默认颜色1颜色2颜色3颜色4

thresholds 数据格式

请确保传入的数据是长度为4的递增数组

降水量
展开查看
vue
<template>
    <t-calendar-heatmap :mapData="data" :thresholds="thresholds" @hover="showInfo" title="降水量" :tipInfo="msg" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const thresholds: number[] = [100, 200, 300, 400]
const data: { [key: string]: number } = {
   '2025-06-10': 134,
   '2025-06-09': 27,
   '2025-05-30': 388,
   '2025-05-24': 400,
   '2025-05-19': 5,
   '2025-05-11': 610,
   '2025-06-13': 241,
   '2025-06-18': 238,
   '2025-06-13': 190,
   '2025-06-03': 10,
   '2025-06-29': 111,
   '2025-06-27': 120,
   '2025-07-03': 130
}
const msg = ref<string>('')
const showInfo = (v: { date: string; count: number | undefined }) => {
    msg.value = v['count'] ? `${v['date']}\n降水量：${v['count']}mm` : `${v['date']}\n无降水`
}
</script>
vue
<template>
    <t-calendar-heatmap :mapData="data" :thresholds="thresholds" @hover="showInfo" title="降水量" :tipInfo="msg" />
</template>

<script setup>
import { ref } from 'vue'
const thresholds = [100, 200, 300, 400]
const data = {
    '2025-06-10': 134,
    '2025-06-09': 27,
    '2025-05-30': 388,
    '2025-05-24': 400,
    '2025-05-19': 5,
    '2025-05-11': 610,
    '2025-06-13': 241,
    '2025-06-18': 238,
    '2025-06-13': 190,
    '2025-06-03': 10,
    '2025-06-29': 111,
    '2025-06-27': 120,
    '2025-07-03': 130
}
const msg = ref('')
const showInfo = v => {
    msg.value = v['count'] ? `${v['date']}\n降水量：${v['count']}mm` : `${v['date']}\n无降水`
}
</script>

触发方式 ​

绑定@hover事件会在悬浮元素时执行回调，除此之外组件还提供在点击时触发的@pick事件

展开查看
vue
<template>
    <t-calendar-heatmap :mapData="data" @pick="logInfo" />
</template>

<script setup lang="ts">
const data: { [key: string]: number } = {
    '2025-04-21': 1,
    '2025-04-26': 2,
    '2025-05-01': 3,
    '2025-05-02': 4,
    '2025-05-04': 5,
    '2025-05-11': 6,
    '2025-05-15': 7,
    '2025-05-20': 8,
    '2025-05-26': 9,
    '2025-05-31': 10,
    '2025-06-11': 11,
    '2025-06-24': 12,
    '2025-06-30': 13
}
const logInfo = (v: { date: string, count: number | undefined }) => {
    console.log(v)
}
</script>
vue
<template>
    <t-calendar-heatmap :mapData="data" @pick="logInfo" />
</template>

<script setup>
const data = {
    '2025-04-21': 1,
    '2025-04-26': 2,
    '2025-05-01': 3,
    '2025-05-02': 4,
    '2025-05-04': 5,
    '2025-05-11': 6,
    '2025-05-15': 7,
    '2025-05-20': 8,
    '2025-05-26': 9,
    '2025-05-31': 10,
    '2025-06-11': 11,
    '2025-06-24': 12,
    '2025-06-30': 13
}
const logInfo = v => {
    console.log(v)
}
</script>

颜色与尺寸 ​

设置属性theme以调整主题颜色，col以调整渲染列数



展开查看
vue
<template>
    <t-calendar-heatmap :mapData="data" theme="info" :col="45" />
    <t-calendar-heatmap :mapData="data" theme="wine" :col="10" />
</template>

<script setup lang="ts">
const data: { [key: string]: number } = {
    '2025-04-21': 1,
    '2025-04-26': 2,
    '2025-05-01': 3,
    '2025-05-02': 4,
    '2025-05-04': 5,
    '2025-05-11': 6,
    '2025-05-15': 7,
    '2025-05-20': 8,
    '2025-05-26': 9,
    '2025-05-31': 10,
    '2025-06-11': 11,
    '2025-06-24': 12,
    '2025-06-30': 13
}
</script>
vue
<template>
    <t-calendar-heatmap :mapData="data" theme="info" :col="45" />
    <t-calendar-heatmap :mapData="data" theme="wine" :col="10" />
</template>

<script setup>
const data = {
    '2025-04-21': 1,
    '2025-04-26': 2,
    '2025-05-01': 3,
    '2025-05-02': 4,
    '2025-05-04': 5,
    '2025-05-11': 6,
    '2025-05-15': 7,
    '2025-05-20': 8,
    '2025-05-26': 9,
    '2025-05-31': 10,
    '2025-06-11': 11,
    '2025-06-24': 12,
    '2025-06-30': 13
}
</script>

相关属性 ​

属性名说明类型默认值
mapData数据信息，格式见“基本用法”Object{}
thresholds变色阈值，格式见“自定义阈值”number[][1, 3, 5, 7]
title标题内容string | nullnull
tipInfo显示文字提示的内容string | nullnull
theme颜色主题'tea' | 'info' | 'wine''tea'
col渲染列数number40

相关事件 ​

事件名说明回调参数
hover悬浮时触发该事件value: { date: string, count: number }
pick点击时触发该事件value: { date: string, count: number }

Copyright © 2023-present Teashirt