vue+heatmapjs-vue实现热力图，点击/滑动可以监听并更新

实现效果如下：

点击的次数或者滑动越多，区域的颜色越深

1.下载最新版热力图插件

npm install heatmapjs-vue

2.main.js中全局引用

注意！！！只能全局引用，不能局部引用，局部引用就报错显示不出来

import heatmapjsVue from 'heatmapjs-vue'
Vue.use(heatmapjsVue)

3.完整代码

1.ref绑定节点

2.click-drawable：监听的点击事件

3.move-drawable：鼠标滑动也监听

4.draw-value：热力图圆点的大小

5.@change：值改变事件

<template>
    <div class="content-box">
        <div class="container">
          <h1>热力图，点击越多颜色越深</h1>
            <heatmapjs-vue
                ref="headmap"
                class="heatmapjs-container"
                :max="100"
                :min="0"
                :data="data"
                :click-drawable="true"
                :move-drawable="true"
                :draw-value="10"
                @change="heatChange"
            ></heatmapjs-vue>
            <el-button type="primary" @click="handleBtn">调用热力图的data数据</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [
                {
                    x: '52',
                    y: '150',
                    radius: 40,
                    value: 5
                }
            ],
        };
    },
    methods: {
        heatChange(arr) {
            this.heatData = arr;
        },
        handleBtn(){
          const res=this.$refs.headmap.getData();
          console.log(res,'获取数据');
        }
    }
};
</script>

<style lang="scss" scoped>
.heatmapjs-container {
    width: 100%;
    height: 500px;
    background-color: antiquewhite;
}
</style>