最近在做后台管理系统,遇到一个需求,就是要实现一个网站首页的点击率热力图展示。
效果图如下:
为了实现这个功能,可以通过heatmapjs-vue
插件来实现。
1.安装npm install heatmapjs-vue
npm install heatmapjs-vue
安装插件npm install heatmapjs-vue
2.main.js
中引入和注册插件
import Vue from 'vue'
import heatmapjsVue from 'heatmapjs-vue'
Vue.use(heatmapjsVue)
3.组件的基本使用
<style>
.heatmapjs-container {
width: 1000px;
height: 500px;
}
</style>
<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>
4.为了实现效果图,则需要有个透明度的蒙层
<heatmapjs-vue
class="heatmapjs-container"
:max="100"
:min="0"
:clickDrawable="true"
:drawValue="1"
@change="heatChange"
:data="heatData"
>
<div style="width: 100%; height: 100%; position: relative">
<div
@mousemove="mousemove"
@mouseenter="mousemove"
@click="mousemove"
style="
position: absolute;
top: 0;
left: 0;
z-index: 2;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
"
></div>
<span
v-if="currentPoint.value"
class="showDetail"
style="
position: absolute;
z-index: 3;
padding: 20px;
color: #f90;
background: #fff;
"
:style="{
left: currentPoint.x * 1 + 10 + 'px',
top: currentPoint.y * 1 + 10 + 'px',
}"
>
点击量:{
{
currentPoint.value }}
</span>
<iframe
src="https://www.51pcb.com/"
frameborder="0"
width="100%"
height="100%"
></iframe>
</div>
</heatmapjs-vue>
script
部分代码
<script>
export default {
data() {
return {
heatData: [
{
x: '52',
y: '150',
radius: 40,
value: 5,
},
{
x: '57',
y: '124',
radius: 40,
value: 5,
},
],
currentPoint: {
},
};
},
methods: {
mousemove(e) {
let x = e.layerX;
let y = e.layerY;
let arr = this.heatData.filter(
(item) =>
x > item.x * 1 - item.radius / 2 &&
x < item.x * 1 + item.radius / 2 &&
y > item.y * 1 - item.radius / 2 &&
y < item.y * 1 + item.radius / 2
);
let maxArr = arr.sort(this.sortBy('value')); //sortBy是根据value字段对对象数组进行排序
if (maxArr && maxArr[0] && maxArr[0].value) {
console.log(
'有数据',
maxArr[0],
maxArr[0].value,
maxArr[0].x,
x,
maxArr[0].y,
y
);
this.currentPoint = maxArr[0];
} else {
this.currentPoint = {
};
}
},
heatChange(arr) {
this.heatData = arr;
},
},
};
</script>
css
代码
<style scoped lang="less">
.heatmapjs-container {
width: 100%;
height: calc(100vh - 140px);
background: #fff;
}
</style>
最终效果如下:
点击的次数越多,热点的颜色越深,如上图所示:点击次数较低时,是浅浅的蓝色,次数再多就变成了绿色,再就是黄色 红色。。。
通过颜色就可以区分点击率
多多积累,多多收获!!!