类似github代码提交代码活跃图实现

最近，项目中有这样一个需求，想实现类似github代码提交记录这样的一个热力图的功能

第一个想法是看echart有没有类似的功能，确实有类似的一个热力图

但是，我不太想用这个热力图，想看看有没有专门的插件可用，真的被我找到了一个vue-calendar-heatmap
使用方法如下：

下载插件

npm install --save vue-calendar-heatmap

使用：
方法一：全局注册

import Vue from 'vue'
import VueCalendarHeatmap from 'vue-calendar-heatmap'

Vue.use(VueCalendarHeatmap)

方法二： 组件引入

import Vue from 'vue'
import { CalendarHeatmap } from 'vue-calendar-heatmap'

Vue.component('calendarHeatmap', CalendarHeatmap)

方法三： 在父组件vue文件中使用

import { CalendarHeatmap } from 'vue-calendar-heatmap'

  export default {
    components: {
      CalendarHeatmap
    },
    // ...
  }

使用vue-calendar-heatmap做了一个简单的demo，具体实现如下：

• 实现效果：
  

LOVE 实现的效果不是很好看，v的叉劈大了，不过大家还是凑合看吧

具体实现代码如下：

<template>
  <div>
    <calendar-heatmap end-date="2021-07-08" :values="timeValue" />
  </div>
</template>
<script>
import {
    CalendarHeatmap } from "vue-calendar-heatmap";
export default {
   
  data() {
   
    return {
   
      timeValue: [
        {
    date: "2020-08-02", count: 6 },
        {
    date: "2020-08-03", count: 6 },
        {
    date: "2020-08-04", count: 6 },
        {
    date: "2020-08-05", count: 6 },
        {
    date: "2020-08-06", count: 6 },
        {
    date: "2020-08-07", count: 6 },
        {
    date: "2020-08-08", count: 6 },
        {
    date: "2020-08-15", count: 6 },
        {
    date: "2020-08-22",