heatmap.js

恩如題

用了seajs 也可以不用

define(function (require, exports, module) {
    require('./gmaps-heatmap.js/index.js');//這個作用不明，不引用應該也可以
    require('./heatmap.js');
    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) => {
            $('#mengban').css({ "display": "block" });
            var max = 0;
            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 = item.x * (item.width / cwidth);
                    item.y = item.y * (item.width / cwidth);
                    item.value = 1;
                    var sarry = formatArray.some(function (itemarr) {//判斷是否有重複的
                        if (item.x == itemarr.x && item.y == itemarr.y) {
                            itemarr.value = itemarr.value + 1;
                            max = Math.max(max, itemarr.value);
                            return true;
                        } else {
                            return false;
                        }
                    })
                    formatArray.push(item);
                    if (!sarry) {
                        formatArray.push(item);
                    } else {

                    }

                })
                //formatArray=data;//測試
                //return 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('heatContainer'));
                    console.log('offsetHeight', document.getElementById('heatContainer').offsetHeight);
                    var heatmap = '';
                    if (obj.containerId) {
                        heatmap = h337.create({
                            container: document.getElementById(obj.containerId),
                            backgroundColor: 'red',    // '#121212'    'rgba(0,102,256,0.2)'
                            radius: 10,        // [0,+∞)
                            opacity: 1,
                        });
                    } else {
                        heatmap = h337.create({
                            container: document.getElementById('heatContainer')
                        });
                    }

                    // this.heatmap = heatmap;
                    console.log('max', max)
                    heatmap.setData({
                        max: max, //按了最大值如果嫌淺，可以自己調節
                        min: 1,
                        data: formatData
                    });
                    var ct = document.getElementById('mengban');
                    var self = this;
                    // setTimeout(() => {
                    //     $('#mengban').css({ 'display': "none" });
                    // }, 5000);

                }
            })

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

    }
    module.exports = commpent
});

dom：

在需要加入熱點圖的地方加上；沒做動態添加dom的，有時間可以做下；

<!-- 熱力圖 -->
<div id="mengban" style="position: absolute;width:100%;height:100%;z-index: 99">
<div id="heatContainer" style="height: 100%;width:100%;position:relative">
</div>
</div>

引用的時候

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

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

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