heatmap在vue中的问题

heatmap.js（热力图）注意：此方法是在vue中使用heatmap.js，正常引用请参考官方网站https://www.patrick-wied.at/static/heatmapjs/index.html

1.安装heatmap.js

npm install heatmap.js

2.在vue项目中引用

import Heatmap from 'heatmap.js'

3.例子

<template>

<div id="heatmap">

</div>

</template>

<script>

import Heatmap from 'heatmap.js'

export default {

data () {

return {

}

},

mounted () {

// 创建一个heatmap实例对象

// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api

var heatmapInstance =Heatmap.create({

container: document.getElementById('heatmap')

})

// 构建一些随机数据点,网页切图价格这里替换成你的业务数据

var points = []

var max = 0

var width = 600

var height = 400

var len = 200

while (len--) {

var val = Math.floor(Math.random() * 100)

max = Math.max(max, val)

var point = {

x: Math.floor(Math.random() * width),

y: Math.floor(Math.random() * height),

value: val

}

points.push(point)

}

var data = {

max: max,

data: points

}

// 因为data是一组数据,web切图报价所以直接setData

heatmapInstance.setData(data)

}

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

div {

width:600px;

height:400px;

border: 1px solid;

border-color: gray;

}

</style>

注意：在vue中的创建和正常情况下略显不同的是

正常情况下创建是用h337.create，而vue中是Heatmap.create