需求的效果：
地圖熱力圖.png
需求：
在地圖上根據地區的位置顯示相關信息的數量高低（或參數的大?。?，展示不同顏色，用來表示數據，話不多說，開始擼代碼：
1、html中的代碼：
這里的id='heatmap'是一個父級的盒子，其中的圖片寬度和高度都是父級元素的100%，用來展示熱力圖的位置
<div class="maps">
<div class="hotPic" id="heatmap">
<img src="../../../assets/stationchange/zhutubeijing.png" alt="">
</div>
</div>
2、data中存放的變量
data() {
return {
points: [], // 熱力圖數據存放數組
cavWidth: null, //獲取寬度
cavHeight: null, //獲取高度
}
},
3、method中的方法
methods:{
// 初始化獲取寬高(考慮到后期的適配，獲取父級元素的寬高)
getRectValue(){
this.cavWidth = document.getElementById("heatmap").clientWidth;
this.cavHeight = document.getElementById("heatmap").clientHeight;
console.log(this.cavWidth,this.cavHeight)
},
// 初始化獲取數據（模擬的展示數據）
initValue(){
var len = 30
while (len--) {
var val = Math.floor(Math.random() * 100)
// max = Math.max(max, val)
var point = {
x: Math.floor(Math.random() * 500),
y: Math.floor(Math.random() * 400),
value: val
}
this.points.push(point)
}
},
}
在這里說明一下，熱力圖的數據是根據數據中的坐標點進行疊加(下面的兩段代碼是數據結構的介紹)
point = {
x: 5, // x coordinate of the datapoint, a number(x坐標)
y: 5, // y coordinate of the datapoint, a number（y坐標）
value: 100 // the value at datapoint(x, y)
};
最終熱力圖上的顯示是需要多個point進行疊加的，也就是相當于多個point的集合
data = {
max: 100,
min: 0,
data: [
point, point ,point, point
]
};
接上面的模擬數據方法：
// 初始化熱力圖
initHotPic(){
this.deleteHotMap()
let self = this
var heatmapInstance = Heatmap.create({
container: document.getElementById('heatmap'),
gradient: {//漸變顏色
"0": "rgba(255,255,255,1)",//value為0的顏色
"0.3": "#82ff6d",//value為500的顏色
"0.8": "#f3ff6d",//value為1000的顏色
"1": "#ff6d6d",//value為2000的顏色
},
// radius: 10,
maxOpacity: 1,
minOpacity: 0,
blur: .75,
// radius:30, //半徑
// opacity:0.5, //透明
// maxOpacity, //熱圖中最大值具有的最大不透明度
// minOpacity, //熱圖中最小值的最小不透明度
// onExtremaChange, //傳遞回調以接收極值更改更新
// blur, //將應用于所有數據點的模糊因子。模糊因子越高，漸變將越平滑
// xField, //數據點中x坐標的屬性名稱
// yField, //數據點中y坐標的屬性名稱
// valueField //數據點中y坐標的屬性名稱
})
var max = 0
// var width = 600
// var height = 400
var data = {
max: 100, //數據對比(max和min進行數據對比，從而展示熱力顏色)
min:0,
data: self.points
}
heatmapInstance.setData(data)
},
Tips:熱力圖的每一次加載都會在dom里創建一個自己的canvas，所以，在每次初始化之前都需要提前清楚上一次的創建，防止熱力圖展示的疊加（本人親自踩過的坑）
// 刪除之前的熱力圖
deleteHotMap(){
var heatmapBox = document.getElementById("heatmap");
if(heatmapBox.children.length>1){
var oldCanvas = heatmapBox.children[1];
heatmapBox.removeChild(oldCanvas);
}
},
4、在周期函數里進行初始化
但是這里需要注意的是，為了自適應窗口的大小，保證x、y的位置不會存在誤差，這里要進行相關的函數處理，需要對窗口的大小進行監聽，窗口大小改變時，進行對數據中的x、y進行重新計算：
created(){
this.initValue()
},
mounted(){
this.getRectValue()
this.initHotPic()
this.progressDom = document.getElementsByClassName('progress_list')
var _this = this
window.onresize = () => {
return (() => {
_this.cavWidth = document.getElementById("heatmap").clientWidth;
_this.cavHeight = document.getElementById("heatmap").clientHeight;
})()
}
},
當然，為了保證熱力圖的數據能夠自動根據窗口的大小進行改變，當然少不了監聽函數,對視口的寬高進行設置，
watch:{
cavWidth:{
handler(curVal, oldVal) {
var _this = this;
_this.cavWidth = curVal;
if (oldVal != 0 && oldVal!=null) {
for (var i = 0; i < this.points.length; i++) {
this.points[i].x = Number((this.points[i].x * curVal / oldVal).toFixed(0));
}
_this.initHotPic();
}
// console.log("寬=" + curVal, oldVal);
},
},
cavHeight:{
handler(curVal, oldVal) {
var _this = this;
_this.cavHeight = curVal;
if (oldVal != 0 && oldVal!=null) {
for (var i = 0; i < this.points.length; i++) {
this.points[i].y = Number((this.points[i].y * curVal / oldVal).toFixed(0));
console.log(this.points[i].y)
}
_this.initHotPic();
}
// console.log("高=" + curVal, oldVal);
},
}
},
總結：
由于是項目中涉及到的，會有的坑已經被本人踩過了，代碼及拿即用，歡迎各位猿友電站或在下方評論，有問題評論我會及時回復的，謝謝。
heatmap的官網指導：https://www.patrick-wied.at/static/heatmapjs/docs.html
