需求的效果：

地圖熱力圖.png

需求：

在地圖上根據(jù)地區(qū)的位置顯示相關(guān)信息的數(shù)量高低（或參數(shù)的大小）硼莽，展示不同顏色，用來(lái)表示數(shù)據(jù)煮纵，話不多說(shuō)懂鸵，開(kāi)始擼代碼：

1、html中的代碼：

這里的id='heatmap'是一個(gè)父級(jí)的盒子醉途，其中的圖片寬度和高度都是父級(jí)元素的100%矾瑰，用來(lái)展示熱力圖的位置

<div class="maps">
      <div class="hotPic" id="heatmap">
        <img src="../../../assets/stationchange/zhutubeijing.png" alt="">
      </div>
    </div>

2、data中存放的變量

data() {
    return {
      points: [],       // 熱力圖數(shù)據(jù)存放數(shù)組
      cavWidth: null,    //獲取寬度
      cavHeight: null,    //獲取高度
    }
  },

3隘擎、method中的方法

methods:{
    // 初始化獲取寬高(考慮到后期的適配殴穴，獲取父級(jí)元素的寬高)
    getRectValue(){
      this.cavWidth = document.getElementById("heatmap").clientWidth;
      this.cavHeight = document.getElementById("heatmap").clientHeight;
      console.log(this.cavWidth,this.cavHeight)
    },
    // 初始化獲取數(shù)據(jù)（模擬的展示數(shù)據(jù)）
    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)
      }
    },
}

在這里說(shuō)明一下，熱力圖的數(shù)據(jù)是根據(jù)數(shù)據(jù)中的坐標(biāo)點(diǎn)進(jìn)行疊加(下面的兩段代碼是數(shù)據(jù)結(jié)構(gòu)的介紹)

point = {
  x: 5, // x coordinate of the datapoint, a number(x坐標(biāo))
  y: 5, // y coordinate of the datapoint, a number（y坐標(biāo)）
  value: 100 // the value at datapoint(x, y)
};

最終熱力圖上的顯示是需要多個(gè)point進(jìn)行疊加的，也就是相當(dāng)于多個(gè)point的集合

data = {
  max: 100,   
  min: 0,
  data: [
    point, point ,point, point
  ]
};

接上面的模擬數(shù)據(jù)方法：

// 初始化熱力圖
    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, //傳遞回調(diào)以接收極值更改更新
        // blur, //將應(yīng)用于所有數(shù)據(jù)點(diǎn)的模糊因子采幌。模糊因子越高劲够，漸變將越平滑
        // xField, //數(shù)據(jù)點(diǎn)中x坐標(biāo)的屬性名稱
        // yField, //數(shù)據(jù)點(diǎn)中y坐標(biāo)的屬性名稱
        // valueField //數(shù)據(jù)點(diǎn)中y坐標(biāo)的屬性名稱
      })

      var max = 0

      // var width = 600

      // var height = 400
      var data = {
        max: 100,     //數(shù)據(jù)對(duì)比(max和min進(jìn)行數(shù)據(jù)對(duì)比，從而展示熱力顏色)
        min:0,
        data: self.points

      }
      heatmapInstance.setData(data)
    },

Tips:熱力圖的每一次加載都會(huì)在dom里創(chuàng)建一個(gè)自己的canvas休傍，所以征绎，在每次初始化之前都需要提前清楚上一次的創(chuàng)建，防止熱力圖展示的疊加（本人親自踩過(guò)的坑）

// 刪除之前的熱力圖
    deleteHotMap(){
      var heatmapBox = document.getElementById("heatmap");
      if(heatmapBox.children.length>1){
        var oldCanvas = heatmapBox.children[1];
        heatmapBox.removeChild(oldCanvas);
      }
    },

4磨取、在周期函數(shù)里進(jìn)行初始化

但是這里需要注意的是人柿，為了自適應(yīng)窗口的大小，保證x忙厌、y的位置不會(huì)存在誤差凫岖，這里要進(jìn)行相關(guān)的函數(shù)處理，需要對(duì)窗口的大小進(jìn)行監(jiān)聽(tīng)逢净，窗口大小改變時(shí)哥放，進(jìn)行對(duì)數(shù)據(jù)中的x、y進(jìn)行重新計(jì)算：

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;
      })()
    }
  },

當(dāng)然爹土，為了保證熱力圖的數(shù)據(jù)能夠自動(dòng)根據(jù)窗口的大小進(jìn)行改變甥雕，當(dāng)然少不了監(jiān)聽(tīng)函數(shù),對(duì)視口的寬高進(jìn)行設(shè)置，

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

總結(jié)：

由于是項(xiàng)目中涉及到的胀茵，會(huì)有的坑已經(jīng)被本人踩過(guò)了社露，代碼及拿即用，歡迎各位猿友電站或在下方評(píng)論宰掉，有問(wèn)題評(píng)論我會(huì)及時(shí)回復(fù)的呵哨，謝謝。
heatmap的官網(wǎng)指導(dǎo)：https://www.patrick-wied.at/static/heatmapjs/docs.html