js heatmap.js 使用说明

GitHub: ​​https://github.com/pa7/heatmap.js​​​ 官方网址：​​https://www.patrick-wied.at/static/heatmapjs/​​ 官方 Doc 说明： ​​https://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create​​

我写的一个例子：​​https://kylebing.cn/e/#/test/heatmap​​

简介

​​heatmap.js​​ 能实现的是，在现有 dom 之上新建一个 canvas 层，在这个层上显示热力图，根据设置的 heat 点位。

安装

// NPM 
npm i heatmapjs

// 或者 yarn 
yarn add heatmapjs

主要方法

主要方法有两个，一个是根据 dom 元素 创建 heatmap 实例，config 的主要参数有 ： ​​https://www.patrick-wied.at/static/heatmapjs/docs.html#h337-create​​

let heatmap = h337.create(config)

一个是更新 ​​heatmap​​ 的点位数据

heatmap.setData({
     data: [
      {x: 23, y: 45, value: 23},
      {x: 23, y: 566, value: 45},
      {x: 45, y: 254, value: 12},
     ],
     max: 30, // 最大值
     min: 0 // 最小值
})

示例代码

// Vue
// 引入 heatmapjs
import h337 from 'heatmapjs'

// 初始化 heat map 
heatMapInit(){
    let config = {
        container: this.$refs.display, // 显示热力图的 dom 元素、或元素 id 名
        radius: 70, // 半径
        maxOpacity: 1, // 最大透明度 0 - 1.0
        minOpacity: 0, // 最小透明度 0 - 1.0
        blur: 0.6 // 边缘羽化程度 0.0 - 1.0
    }
    // create heatmap with configuration
    this.heatmap = h337.create(config);
    this.updateHeatMap()
},

// 根据数据数组 更新 heatmap 图
updateHeatMap(){
    let dataHeat = this.dataOrigin.map(item => {
        return {
            x: item.reserve.location.offsetX + 30,
            y: item.reserve.location.offsetY + 30,
            value: item.unit[2].value
        }
    })
    this.heatmap.setData(
        {
            data: dataHeat,
            max: 30,
            min: -10
        }
    )
},

例子

我写的一个例子：​​https://kylebing.cn/e/#/test/heatmap​​