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
组件
属性 (全部可响应)
-
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
getValueAtgetDatagetDataURLrepaint
更多信息，请查看 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命令。
许可证
Copyright (c) 2019-present, Qin Nian
