heatmap.js

Posted 2022-01-10

恩如题

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