heatmap.js

恩如題

用了seajs 也可以不用

heatmapComponent.js

define(function (require, exports, module) {
    //require('./gmaps-heatmap.js');//這個作用不明，不引用應該也可以
    require('./heatmap.js');
    $("#mengban").css("display", "none");
    //require('./heatmap.min.js');//引用不壓縮版的就是正常的，壓縮版的就不行，蛋疼
    var commpent = {
        showct: function (id) {//顯示
            document.getElementById(id).style.display = "block";
        },
        hidect: function (id) {//隱藏
            document.getElementById(id).style.display = "none";
        },
        getheatMapData() {
            var userData = {};
        },
        initcontainer: (obj) => {
            //containerId,
            // var ct = document.getElementById(obj.parentContainer) ? document.getElementById("mengban" + obj.containerId) :
            //     document.getElementById('mengban');//父親組件
            // $(ct).css({ "display": "block" });
            var max = 1;
            var maxitem = {};
            let pContainer = obj.parentContainer || obj.selector || 'heatContainer';

            let st = obj.selector || 'body';
            console.log("this.initcontainer");
            if (obj.selector) {
            }
            function formatDataf(data) {
                var cwidth = document.body.clientWidth;
                var formatArray = [];

                data.forEach(function (item) {
                    item.x = parseInt(item.x * (cwidth / item.width));
                    item.y = parseInt(item.y * (cwidth / item.width));
                    // item.x = (item.x * (cwidth / item.width));
                    // item.y = (item.y * (cwidth / item.width));
                    var sarry = formatArray.some(function (itemarr) {//判斷是否有重復的
                        return function () {
                            if (item.x === itemarr.x && item.y === itemarr.y && item.width === itemarr.width && item.height === itemarr.height) {
                                itemarr.value = itemarr.value + 1;
                                max = Math.max(max, itemarr.value);
                                return true;
                            } else {
                                return false;
                            }
                        }();

                    })
                    if (!sarry) {
                        formatArray.push(item);
                    } else {

                    }

                })
                // debugger
                console.table(formatArray);
                return formatArray;
            }
            $.ajax({//獲取首頁簽約用戶
                //url: "/getheatmapData/mainHome0",
                url: obj.url,
                data: {},
                type: "POST",
                error: function (error) {
                    console.log(error)
                },
                success: function (data) {
                    // debugger
                    let userData = {};
                    userData.a = data;
                    var formatData = formatDataf(data);
                    // console.log('formatData', formatData);
                    console.log("***********簽約用戶數量", data.length);
                    console.log('組件', document.getElementById(obj.containerId));
                    // console.log('offsetHeight', document.getElementById(obj.containerId).offsetHeight);
                    var heatmap = '';
                    setTimeout(function () {//此處加定時是確保dom加載完成再開始繪制
                                        //因為dom是異步加載的，可以根據實際情況去掉
                        if (obj.containerId) {//如果傳入id
                            heatmap = h437.create({
                                container: document.getElementById(obj.containerId),
                                // maxOpacity: .5,
                                // minOpacity: .8,
                                // blur: .75,
                                radius: 30,//繪圖半徑
                                // gradient: {
                                //     // enter n keys between 0 and 1 here
                                //     // for gradient color customization
                                //     '.5': 'blue',
                                //     '.8': 'red',
                                //     '.95': 'white'
                                // },
                                // backgroundColor with alpha so you can see through it
                                backgroundColor: 'rgba(0, 0, 0, 0)'
                            });
                        } else {
                            heatmap = h437.create({
                                container: document.getElementById('heatContainer'),
                                maxOpacity: .5,
                                minOpacity: 0,
                                blur: .75,
                                radius: 10,
                                // gradient: {
                                //     // enter n keys between 0 and 1 here
                                //     // for gradient color customization
                                //     '.5': 'blue',
                                //     '.8': 'red',
                                //     '.95': 'white'
                                // },
                                // backgroundColor with alpha so you can see through it
                                backgroundColor: 'rgba(0, 0, 0, 0)'
                            });
                        }
                        // this.heatmap = heatmap;
                        console.log('max', max, maxitem);
                        heatmap.setData({
                            max: max, //按了最大值如果嫌淺，可以自己調節
                            min: 0,
                            data: formatData
                        });
                    }, 3000)

                    var self = this;
                    // setTimeout(() => {
                    //     $(ct).css({ 'display': "none" });
                    //     $("#mengban").css({ 'display': "none" });
                    //     $("#mengban" + obj.containerId).css({ 'display': "none" });
                    // }, 5000);

                }
            })

        },
        init: (obj) => {
            initcontainer(selector, parentContainer)
        }

    }
    module.exports = commpent
});

commpent.init(obj)方法來初始化，url是請求數據的地址，containerId是選擇的元素id
可以選擇已經有的dom元素，heatmap會在選擇的dom里面添加，而不會覆蓋掉原有內容，所以不用新添加元素
dom：
index.html:

<!-- 熱力圖 -->
<div id="mengban" >
    <div id="heatContainer" >
    </div>
</div>

//引用插件

     //熱力圖組件 引入js
    var heatMap = require('./heatmapComment');
    //主頁   url 是ajax接口地址 
    heatMap.init({ url: "/getheatmapData/mainHome0", containerId: "mainHome" });

恩heatmap下載很重要，要感謝大神的分享，這個上面有heatmap.js下載鏈接

https://blog.csdn.net/iqzq123/article/details/8877707