vue+heatmapjs-vue realisiert eine Heatmap, durch Klicken/Wischen kann es überwacht und aktualisiert werden

Der Effekt ist wie folgt:

Je häufiger geklickt oder gewischt wird, desto dunkler wird die Farbe des Bereichs

1. Laden Sie die neueste Version des Heatmap-Plug-Ins herunter

npm install heatmapjs-vue

2. Globale Referenz in main.js

Notiz! ! ! Nur globale Referenzen, keine lokalen Referenzen. Lokale Referenzen melden Fehler und werden nicht angezeigt

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

3. Vollständiger Code

1.ref-Bindungsknoten

2.click-drawable: Das zu überwachende Klickereignis

3.move-drawable: Das Gleiten der Maus wird ebenfalls überwacht

4. Draw-Value: Die Größe der Punkte in der Heatmap

5. @change: Wertänderungsereignis

<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>