Vue使用npm包实现热力图

npm install heatmap.js

运行上面的命令行，
在helloworld.vue里引入一个图片：

在script里引入Heatmap

然后写具体代码

<script>
    import Heatmap from 'heatmap.js'
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        },
        mounted: function () {
            // 创建一个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 = 50;
            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)
            }
            console.log(points);
            var data = {
                max: max,
                data: points
            }
            // 因为data是一组数据,web切图报价所以直接setData
            heatmapInstance.setData(data)
        }
    }
</script>

参考链接：
链接: 参考链接.