heatmapjs-vue组件库项目简介-CSDN博客

heatmapjs-vue

heatmapjs 的 Vue.js 组件.

基于 heatmap.js v2.0.5+ 开发，依赖 Vue.js v2.2.6+.

引言

基于heatmapjs封装的vue组件，可靠稳定，支持vue-cli3以及typescript项目引用，文档详细以及提供丰富多样的例子。开源作品诚意之作。这个组件因为实际项目的需要而诞生，为了能够让更多人用到，我饱含着高昂的热情，对组件进行优化、编写测试用例，进行umd，es打包支持、编写cdn引用例子、ts例子、nuxt例子、各个浏览器下测试、编写英文的readme，编写中文的readme。这一套下来，花了挺多精力和时间，开源好一个项目确实是一件不容易的事情。且行且珍惜，大家也多多支持，有兴趣给个star。

项目地址

https://github.com/nqdy666/heatmapjs-vue/

文档

特性

IE9+
Support Typescript
Auto resize

安装

NPM

安装npm包.

$ npm install heatmapjs-vue
复制代码

组件注册

import Vue from 'vue'
import heatmapjsVue from 'heatmapjs-vue'
Vue.use(heatmapjsVue)
复制代码

现在可以使用该组件

<style>
  .heatmapjs-container {
    width: 1000px;
    height: 500px;
  }
</style>
<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>
复制代码

CDN

包含 vue 、heatmap.js、 heatmapjs-vue.js、heatmapjs-vue.css - 我推荐使用 unpkg.

<link rel="stylesheet" href="https://unpkg.com/heatmapjs-vue@0.0.5/dist/heatmapjs-vue.css"/>
<style>
  .heatmapjs-container {
    width: 1000px;
    height: 500px;
  }
</style>
复制代码

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/heatmap.js@2.0.5/build/heatmap.min.js"></script>
<!-- 使用最新版本 -->
<script src="https://unpkg.com/heatmapjs-vue@latest"></script>
<!-- 或指定某一个版本 -->
<script src="https://unpkg.com/heatmapjs-vue@0.0.5"></script>
复制代码

现在可以使用该组件


<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>
复制代码

typescript

heatmapjs-vue-ts-example

组件

属性 (全部可响应)

options (default: {})

更多信息，请查看 heatmap.js' API documentation
min (default: 0)

数据集最小边界值
max (default: 100)

数据集最大边界值

data (default: [])

数据集

var dataPoint = { 
  x: 5, // 数据点的x坐标, 数字
  y: 5, // 数据点的y坐标, 数字
  value: 100 // 在点(x, y)的值
};
var data = [
  dataPoint, dataPoint, dataPoint, dataPoint
]
复制代码

clickDrawable (default: false)

单击时添加数据点
moveDrawable (default: false)

当鼠标移动或触摸移动时添加一个数据点
drawValue (default: 1)

单击或移动时数据点的值

Methods

getValueAt
getData
getDataURL
repaint

更多信息，请查看 heatmap.js' API documentation

Events

change

当数据因单击或移动而发生更改时触发，且发送的第一个参数是最新的数据集

本地开发

开发

$ npm i
$ npm run docs-dev
复制代码

发布

$ npm install -g babel-cli
$ npm i rollup -g
$ chmod a+x scripts/build
$ npm run release
$ git push --follow-tags origin dev && npm publish
复制代码

如果您使用的是windows系统，您不能直接执行npm run release，您需要安装git bash软件，然后使用git bash执行命令./scripts/build和npm run release:only。

文档发布

$ npm install -g gh-pages
$ chmod a+x scripts/docs-publish
$ npm run docs-publish
复制代码

如果您使用windows系统，您不能直接执行npm run docs-publish，您需要安装git bash软件，然后使用git bash执行./scripts/docs-publish命令。

许可证

MIT