heatmap.js

2025-02-16 技术教程

恩如题

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

<div id="mengban" > <div id="heatContainer" > </div></div>//引用插件 //热力图组件引入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