恩如題

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、大寧網(wǎng)站維護(hù)、網(wǎng)站推廣。

用了seajs 也可以不用

heatmapComponent.js

define(function (require, exports, module) {
    //require('./gmaps-heatmap.js');//這個(gè)作用不明，不引用應(yīng)該也可以
    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) {//判斷是否有重復(fù)的
                        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({//獲取首頁(yè)簽約用戶
                //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("***********簽約用戶數(shù)量", data.length);
                    console.log('組件', document.getElementById(obj.containerId));
                    // console.log('offsetHeight', document.getElementById(obj.containerId).offsetHeight);
                    var heatmap = '';
                    setTimeout(function () {//此處加定時(shí)是確保dom加載完成再開始繪制
                                        //因?yàn)閐om是異步加載的，可以根據(jù)實(shí)際情況去掉
                        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, //按了大值如果嫌淺，可以自己調(diào)節(jié)
                            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是請(qǐng)求數(shù)據(jù)的地址，containerId是選擇的元素id
可以選擇已經(jīng)有的dom元素，heatmap會(huì)在選擇的dom里面添加，而不會(huì)覆蓋掉原有內(nèi)容，所以不用新添加元素
dom：
index.html:

    

    


//引用插件

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：heatmap.js-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/ddgoes.html