基本實(shí)現(xiàn)
如圖就是最終效果伞租，由于做的項(xiàng)目數(shù)據(jù)可視化選擇的是Echarts，所以一開(kāi)始是打算想用Echarts直接實(shí)現(xiàn)對(duì)任意圖片的熱力圖软免，但本人水平有限贰军，用Echarts沒(méi)做出來(lái)，所以找到了用heatmap.js來(lái)做份帐。
-語(yǔ)法都很簡(jiǎn)單璃吧，去網(wǎng)站documents看一下一會(huì)就會(huì)了。
<div id="heatmap" style=" width:40%; height: 50%; border: 1px solid;border-color: grey;">
<img id="baidu-img" src="images/hanzhong.png" style="width: 100%; height: 100%; ">
<img src="images/hanzhong_re.png " style="width: 100%; height: 100%; top: 0px;position: absolute; z-index: 1">
</div>
$("canvas,heatmap").remove();
_this.heatmapInstance = h337.create({
container: document.querySelector("#heatmap"),
radius: 50,
maxOpacity: 0.5,
minOpacity: 0,
blur: 0.75
});
var data = {
max: _this.max,
data: _this.points
};
_this.heatmapInstance.setData(data);
放一點(diǎn)核心的代碼吧废境。應(yīng)該很容易理解畜挨。
自適應(yīng)大小
重點(diǎn)要說(shuō)一下這里要實(shí)現(xiàn)自適應(yīng)大小怎么做筒繁。這里的data的數(shù)據(jù)結(jié)構(gòu)是[{x:1,y:2,value:3}]這樣的一個(gè)數(shù)組，里邊的x巴元、y分別對(duì)應(yīng)的是從圖片左上角為(0毡咏，0)起點(diǎn)，x代表距離左邊的像素距離逮刨，y代表距離上方的像素距離絕對(duì)值呕缭。
1.第一步
//要用一個(gè)全局變量記錄初始的寬和高
_this.cavWidth = document.getElementById("heatmap").clientWidth;
_this.cavHeight = document.getElementById("heatmap").clientHeight;
2.第二步
通過(guò)Vue的watch監(jiān)聽(tīng)這兩個(gè)值
cavWidth(curVal, oldVal) {
var _this = this;
this.cavWidth = curVal;
if (oldVal != 0) {
for (i = 0; i < this.points.length; i++) {
this.points[i].x = (this.points[i].x * curVal / oldVal).toFixed(0);
}
_this.init();
}
console.log("寬=" + curVal, oldVal);
},
cavHeight(curVal, oldVal) {
var _this = this;
this.cavHeight = curVal;
if (oldVal != 0) {
for (i = 0; i < this.points.length; i++) {
this.points[i].y = (this.points[i].y * curVal / oldVal).toFixed(0);
}
_this.init();
}
console.log("高=" + curVal, oldVal);
},
3.第三步
這樣還沒(méi)有實(shí)現(xiàn)監(jiān)聽(tīng)值變化的效果，還需要用mounted鉤子函數(shù)聲明一下resize方法
mounted() {
var _this = this
window.onresize = () => {
return (() => {
_this.cavWidth = document.getElementById("heatmap").clientWidth;
_this.cavHeight = document.getElementById("heatmap").clientHeight;
})()
}
},
這樣就可以實(shí)現(xiàn)自適應(yīng)的了修己。
但是這里有個(gè)問(wèn)題臊旭，由于計(jì)算后的x、y會(huì)是小數(shù)值箩退，這里一旦存在小數(shù)就沒(méi)辦法渲染熱力圖效果了离熏，所以我toFixed(0)了，但是這樣會(huì)存在誤差戴涝，有知道的人可以告訴我一下滋戳。
