0.0.6 • Published 2 years ago
ml-heatmap v0.0.6
欢迎使用 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 |