2025-05-10 teek teek 1174 字 6 分钟 -- 次

贡献图表

最后更新于: 2026-06-27 15:38:29

贡献图表

简介

来给自己的Teek博客增加一个贡献图标功能。😊

贡献图表：

数据可视化: 通过日历热力图形式（类似 GitHub 贡献图）展示近 365 天文章发布频率，颜色深浅反映创作密度
创作激励: 直观呈现内容更新趋势，帮助作者回顾创作周期，激励持续输出
访客感知: 向访问者展示网站内容更新频率，增强内容可信度与专业形象
技术集成: 基于 ECharts 实现交互式图表，支持暗黑/亮色主题自动适配，响应式布局适配不同设备

版权

警告

本着开源共享、共同学习的精神：

本文是在《天客 - Teeker》博主的源码基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境

2025.5.9(已解决)

警告

次配置适用于Teek@1.1.4-2025.5.8版本（其它版本可自行测试）。

提示

自己开源的《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

安装

（1）安装依赖

1pnpm add -D echarts

（2）新建组件

创建docs\.vitepress\theme\components\ContributeChart.vue文件，添加如下代码：

  1<script setup lang="ts" name="ContributeChart">
  2import * as echarts from "echarts";
  3import { ref, watch, nextTick, computed, useTemplateRef } from "vue";
  4import { useData } from "vitepress";
  5import { formatDate, usePosts } from "vitepress-theme-teek";
  6
  7const { isDark } = useData();
  8const posts = usePosts();
  9
 10const today = formatDate(new Date(), "yyyy-MM-dd");
 11// 获取一年前的时间
 12const beforeOnYear = formatDate(new Date(new Date().getTime() - 365 * 24 * 60 * 60 * 1000), "yyyy-MM-dd");
 13
 14const contributeList = computed(() => {
 15  const contributeObject = ref({});
 16
 17  posts.value.sortPostsByDate.forEach(item => {
 18    const date = item.date.substring(0, 10);
 19    if (contributeObject.value[date]) contributeObject.value[date]++;
 20    else contributeObject.value[date] = 1;
 21  });
 22
 23  const contributeDays = Object.keys(contributeObject.value);
 24
 25  return contributeDays.map((item: string) => [item, contributeObject.value[item]]).reverse();
 26});
 27
 28const chartRef = useTemplateRef("chartRef");
 29const contributeChart = ref();
 30
 31const option = {
 32  tooltip: {
 33    formatter: function (params) {
 34      return `${params.value[0]} <br/> ${params.value[1]} 篇文章`;
 35    },
 36  },
 37  visualMap: {
 38    show: false,
 39    min: 0,
 40    max: 5,
 41    inRange: {
 42      color: ["#ebedf0", "#c6e48b", "#7bc96f", "#239a3b", "#196127", "#196127"],
 43    },
 44  },
 45  calendar: {
 46    left: "center",
 47    itemStyle: {
 48      color: "#ebedf0",
 49      borderWidth: 5,
 50      borderColor: "#fff",
 51      shadowBlur: 0,
 52    },
 53    cellSize: [20, 20],
 54    range: [beforeOnYear, today],
 55    splitLine: true,
 56    dayLabel: {
 57      firstDay: 7,
 58      nameMap: "ZH",
 59      color: "#3c3c43",
 60    },
 61    monthLabel: {
 62      color: "#3c3c43",
 63    },
 64    yearLabel: {
 65      show: true,
 66      position: "right",
 67    },
 68    silent: {
 69      show: false,
 70    },
 71  },
 72  series: {
 73    type: "heatmap",
 74    coordinateSystem: "calendar",
 75    data: [],
 76  },
 77};
 78
 79const renderChart = (data: any) => {
 80  option.calendar.itemStyle.borderColor = isDark.value ? "#1b1b1f" : "#fff";
 81  option.calendar.itemStyle.color = isDark.value ? "#787878" : "#ebedf0";
 82
 83  if (contributeChart.value) echarts.dispose(contributeChart.value);
 84  if (chartRef.value) contributeChart.value = echarts.init(chartRef.value);
 85
 86  option.series.data = data;
 87  contributeChart.value.setOption(option);
 88};
 89
 90watch(
 91  contributeList,
 92  async newValue => {
 93    await nextTick();
 94    renderChart(newValue);
 95  },
 96  { immediate: true }
 97);
 98
 99watch(isDark, () => {
100  renderChart(contributeList.value);
101});
102</script>
103
104<template>
105  <div class="contribute__chart">
106    <div class="chart__box" ref="chartRef"></div>
107  </div>
108</template>
109
110<style>
111.tk-page.tk-archives {
112  max-width: 1220px;
113}
114
115.tk-archives .contribute__chart {
116  width: 100%;
117  height: 260px;
118}
119
120.tk-archives .contribute__chart .chart__box {
121  margin: auto;
122  width: 100%;
123  height: 100%;
124}
125</style>

（3）注册组件

编辑docs\.vitepress\theme\components\TeekLayoutProvider.vue文件，添加如下代码：（具体代码可从我开源库Teek-one里获取）

1import ContributeChart from "./ContributeChart.vue"; //导入贡献图表 
2
3
4    <template #teek-archives-top-before>
5      <!-- 贡献图表 -->
6      <ContributeChart />
7    </template>