最近,项目中有这样一个需求,想实现类似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",