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>

引用的时候

 //热力图组件 引入jsvar heatMap = require(‘./heatmapComment‘);//主页 url 是ajax接口地址 heatMap.initcontainer({ url: "/getheatmapData/mainHome0" });

恩heatmap下载很重要,要感谢大神的分享,这个上面有heatmap.js下载链接

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

相关文章