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