ml-heatmap

欢迎使用 ML HeatMap

一个基于 Vue3 + Vite2 + Typescript 的仿造 GitHub 热力图的UI组件。

安装：

npm i ml-heatmap

使用方法：

<script setup lang="ts">
import {MlHeatmap} from 'ml-heatmap'
import 'ml-heatmap/dist/style.css'
</script>

<template>
  <ml-heatmap :data="[]" />
</template>

参数配置：

Params	Desc	Default
illustration	是否打开图解	true
year	数据当前年份 e.g. 2022	current year
locale	语言(中英) e.g. en cn	en
levelColor	等级颜色数组 e.g. [x, x, x, x, x]	['#EBEDF0', '#9BE9A8', '#40C463', '#30A14E', '#216E39']
level	等级数组，默认五级(第一级为0)，只需填写后四级即可 e.g. [1, 2, 3, 4]	[1, 4, 8, 12]
data	热力图数据，数据为一年中的所有数据(365/366天的数据) e.g. [ {date: '2022-01-12', count: 1}, ...... }	[]
title	标题	""
tip1	方格 hover 有数据时的提示文本 {0} - 数据占位符 {1} - 日期占位符	{0} contributions on {1}
tip2	方格 hover 无数据时的提示文本 {0} - 数据占位符 {1} - 日期占位符	No contributions on {1}

主要依赖：

Dependencies	Version
Vue	^3.2.25
Vite	^2.8.0
Element-Plus	^2.0.2
Moment	^2.29.1