Vue3 轻松实现 GitHub 贡献图：打造你的专属“格子图”组件！

本文链接：https://blog.youkuaiyun.com/BG1230521/article/details/145011226

引言

你是否曾被 GitHub 上的贡献图（Contribution Graph）吸引过？那些密密麻麻的绿色格子不仅记录了开发者的每一次提交，更是一种“代码生活”的象征。现在，你也可以用 Vue3 轻松实现一个类似的“格子图”组件！无论是用于展示个人贡献，还是作为数据可视化工具，这个组件都能让你的项目更加生动有趣。接下来，我们就来看看如何使用这个组件吧！

什么是“格子图”组件？

“格子图”组件是一个基于 Vue3 的可视化工具，它通过不同颜色的格子来展示数据。每个格子代表一个时间段（如一天），颜色深浅则表示数据的强度（如提交次数、活跃度等）。它的灵感来源于 GitHub 的贡献图，但你可以根据自己的需求自定义数据、颜色和样式。

这是组件是我使用别人写好的ts代码！但是有些BUG的代码进行修改并优化的代码！效果图如下：

修改优化的内容：

由原来的3种颜色改为5种颜色
由原来的上面的月份不是自适应修改成自适应
鼠标滑过停留样式进行了修改

如何使用“格子图”组件？

1. 使用组件

首先，你需要将下面的组件代码复制到你的 Vue3 项目中。

2. 引入组件

在你的 Vue 组件中引入并使用“格子图”组件，这个就不用我教了吧！！！

3. 准备数据

“格子图”组件需要一个二维数组作为数据源。每个子数组代表一行格子，数组中的每个数字代表格子的值。例如：

const data = [
  {
    date: '2024-06-01',
    count: 2
  },
  {
    date: '2024-06-07',
    count: 5
  },
  {
    date: '2024-06-14',
    count: 5
  }
]

4. 自定义组件配置

在模板中使用组件，并传入数据和配置：

你可以通过修改 colors 属性来调整格子的颜色，或者通过 CSS 自定义组件的样式。

const config = {
  showFooter: true, //贡献图底部包括数据统计、等级说明等信息的展示，默认为true
  level1Color: "#9BE9A8", 
  level2Color: "#40c463",
  level3Color: "#30a14e",
  level4Color: "#297c3a",
  level5Color: "#005716",
  size: '20px',  //格子大小
  tipActionName: '提示'  //提示框的标识
}