热力图 heatmap.js

使用heatmap.js实现热力图

   <div class="content-box" >
            <img style="width: 100%; height: 429px;" src="@/assets/dataBoard/heat-bg.png" />
            <div class="heat-map">
                <div ref="heatmapContainer" style="width: 100%; height: 429px;"></div>
            </div>
        </div>

import heatmap from "heatmap.js";

export default {
    name: 'HeatAnalysisDetail',

    data() {
        return {
            heatmapInstance: null,
            heatmapData: [
                {
                    x: 25, y: 25, value: 2,
                },
                {
                    x: 30, y: 30, value: 10,
                },
                {
                    x: 35, y: 35, value: 15,
                },
                {
                    x: 40, y: 35, value: 10,
                }, {
                    x: 55, y: 40, value: 10,
                },
                {
                    x: 100, y: 100, value: 15,
                },
                {
                    x: 120, y: 120, value: 15,
                }, {
                    x: 115, y: 124, value: 15,
                }, {
                    x: 128, y: 122, value: 17,
                },
                {
                    x: 150, y: 120, value: 20,
                }
            ],
        };
    },

    mounted() {
        this.initHeatmap()
        setTimeout(() => {
            this.updateHeatmap()

        }, 0)
    },
    methods: {
        initHeatmap() {
            const cfg = {
                container: this.$refs.heatmapContainer,
                radius: 10, // 点的半径  
                maxOpacity: 1, // 最大不透明度  
                minOpacity: 0.05, // 最小不透明度  
                scaleRadius: true, // 是否缩放半径  
                useLocalExtrema: true, // 是否使用局部极值  
                gridSize: 20, // 网格大小  
                gradient: {
                    0.2: '#5d785d',
                    0.5: "#a66622",
                    0.7: '#ab271a',
                    1.0: '#aa121a' // 这里定义了不同值范围对应的颜色  
                },
            };
            this.heatmapInstance = heatmap.create(cfg);
        },

        updateHeatmap() {
            this.heatmapInstance.setData({
                data: this.heatmapData,
                max: 20 // 设置最大值
            });
        }
    }
};