https://github.com/nqdy666/heatmapjs-vue
heatmapjs component for Vue.js.
https://github.com/nqdy666/heatmapjs-vue
heatmapjs vue
Last synced: 3 months ago
JSON representation
heatmapjs component for Vue.js.
- Host: GitHub
- URL: https://github.com/nqdy666/heatmapjs-vue
- Owner: nqdy666
- License: mit
- Created: 2019-03-08T02:44:21.000Z (over 7 years ago)
- Default Branch: dev
- Last Pushed: 2022-02-10T17:05:53.000Z (over 4 years ago)
- Last Synced: 2025-09-19T08:06:31.890Z (9 months ago)
- Topics: heatmapjs, vue
- Language: JavaScript
- Homepage: https://nqdy666.github.io/heatmapjs-vue/
- Size: 1.65 MB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# heatmapjs-vue
[](https://www.npmjs.com/package/heatmapjs-vue)
[](https://www.npmjs.com/package/heatmapjs-vue)
[](https://github.com/nqdy666/heatmapjs-vue/blob/dev/LICENSE)
> heatmapjs component for Vue.js.
> [CN 中文版](./README.zh_CN.md)
Built upon [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) v2.0.5+ and depends on [Vue.js](https://vuejs.org/) v2.2.6+.
#### Features
- IE9+
- Support Typescript
- Auto resize
## Documentation
- **[Demo](https://nqdy666.github.io/heatmapjs-vue/)**
- **[例子](https://nqdy666.github.io/heatmapjs-vue/cn/)**
- **[Example on JSBin](https://jsbin.com/quwakos/edit?html,css,js,output)**
## Install
#### NPM
Install the package.
```bash
$ npm install heatmapjs-vue
```
Register the component
```js
import Vue from 'vue'
import heatmapjsVue from 'heatmapjs-vue'
Vue.use(heatmapjsVue)
```
You may now use the component in your markup
```html
.heatmapjs-container {
width: 1000px;
height: 500px;
}
```
#### CDN
include `vue` 、`heatmap.js`、 `heatmapjs-vue.js`、`heatmapjs-vue.css` - I recommend using [unpkg](https://unpkg.com/#/).
```html
.heatmapjs-container {
width: 1000px;
height: 500px;
}
```
```html
```
You may now use the component in your markup
```html
```
#### typescript
**[heatmapjs-vue-ts-example](https://github.com/nqdy666/heatmapjs-vue-ts-example)**
## Using the component
### Props *(all reactive)*
* `options` (default: `{}`)
For further details, see [heatmap.js' API documentation](https://www.patrick-wied.at/static/heatmapjs/docs.html)
* `min` (default: `0`)
the lower bound of your dataset
* `max` (default: `100`)
the upper bound of your dataset
* `data` (default: `[]`)
dataset
```
var dataPoint = {
x: 5, // x coordinate of the datapoint, a number
y: 5, // y coordinate of the datapoint, a number
value: 100 // the value at datapoint(x, y)
};
var data = [
dataPoint, dataPoint, dataPoint, dataPoint
]
```
* `clickDrawable` (default: `false`)
add a datapoint when click
* `moveDrawable` (default: `false`)
add a datapoint when mousemove or touchmove
* `drawValue` (default: `1`)
the value of datapoint when click or move
### Methods
* `getValueAt`
* `getData`
* `getDataURL`
* `repaint`
For further details, see [heatmap.js' API documentation](https://www.patrick-wied.at/static/heatmapjs/docs.html)
### Events
* `change`
triggered when data changes due to a click or move and the first parameter emit is the latest dataset
## Local development
development
```bash
$ npm i
$ npm run docs-dev
```
publish
```bash
$ npm install -g babel-cli@6.26.0
$ npm install -g rollup@0.67.3
$ chmod a+x scripts/build
$ npm run release
$ git push --follow-tags origin dev && npm publish
```
If you use the window system, you can't execute directly `npm run release`, you need to install git bash software, and then use git bash to execute the command `./scripts/build` and `npm run release:only`.
docs-publish
```bash
$ npm install -g gh-pages
$ chmod a+x scripts/docs-publish
$ npm run docs-publish
```
If you use the window system, you can't execute directly `npm run docs-publish`, you need to install git bash software, and then use git bash to execute the command `./scripts/docs-publish`.
## Donation
If you find it useful, you can buy us a cup of coffee.
## License
[MIT](https://github.com/nianqin/heatmapjs-vue/blob/dev/LICENSE.md)
Copyright (c) 2019-present, Qin Nian