heatmapjs-vue项目简介
发布于 8 个月前 作者 qjzd 343 次浏览 来自 分享

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

包含 vueheatmap.jsheatmapjs-vue.jsheatmapjs-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/buildnpm 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 © 2019-present, Qin Nian

其他

heatmapjs中文资料

回到顶部