一个基于 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 |