heatmap.png

基本實(shí)現(xiàn)

如圖就是最終效果，由于做的項(xiàng)目數(shù)據(jù)可視化選擇的是Echarts，所以一開始是打算想用Echarts直接實(shí)現(xiàn)對(duì)任意圖片的熱力圖，但本人水平有限，用Echarts沒做出來，所以找到了用heatmap.js來做。
-語法都很簡(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)要說一下這里要實(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.第二步
通過Vue的watch監(jiān)聽這兩個(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.第三步
這樣還沒有實(shí)現(xiàn)監(jiān)聽值變化的效果，還需要用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è)問題，由于計(jì)算后的x、y會(huì)是小數(shù)值，這里一旦存在小數(shù)就沒辦法渲染熱力圖效果了，所以我toFixed(0)了，但是這樣會(huì)存在誤差，有知道的人可以告訴我一下。