欢迎使用 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 |