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:

    

    


//引用插件

     //热力图组件 引入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