heatmapjs-vue组件库项目简介

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/

文档

• Demo
• 中文例子
• Example on JSBin

特性

• 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

Copyright (c) 2019-present, Qin Nian