vue+heatmap.js实现自定义图片热力图并且自适应

heatmap.png

基本实现

如图就是最终效果，由于做的项目数据可视化选择的是Echarts，所以一开始是打算想用Echarts直接实现对任意图片的热力图，但本人水平有限，用Echarts没做出来，所以找到了用heatmap.js来做。
-语法都很简单，去网站documents看一下一会就会了。

<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);

放一点核心的代码吧。应该很容易理解。

自适应大小

重点要说一下这里要实现自适应大小怎么做。这里的data的数据结构是[{x:1,y:2,value:3}]这样的一个数组，里边的x、y分别对应的是从图片左上角为(0，0)起点，x代表距离左边的像素距离，y代表距离上方的像素距离绝对值。
1.第一步

  //要用一个全局变量记录初始的宽和高
_this.cavWidth = document.getElementById("heatmap").clientWidth;
_this.cavHeight = document.getElementById("heatmap").clientHeight;

2.第二步
通过Vue的watch监听这两个值

            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.第三步
这样还没有实现监听值变化的效果，还需要用mounted钩子函数声明一下resize方法

       mounted() {
           var _this = this
           window.onresize = () => {
               return (() => {
                   _this.cavWidth = document.getElementById("heatmap").clientWidth;
                   _this.cavHeight = document.getElementById("heatmap").clientHeight;
               })()
           }
       },

这样就可以实现自适应的了。
但是这里有个问题，由于计算后的x、y会是小数值，这里一旦存在小数就没办法渲染热力图效果了，所以我toFixed(0)了，但是这样会存在误差，有知道的人可以告诉我一下。