前端實戰項目積累小知識（9）：vue項目 onresize() 監聽窗口實現echarts地圖自適應

window.onresize() 監聽窗口實現echarts地圖自適應

項目需求變動，之前是做大屏的尺寸沒考慮周全，echarts地圖沒有隨大小變化而變化，現在要實現自適應只需要小改動即可。

修改前：

修改的代碼：

        <div
          class="g-h100 g-w100"
          ref="map"
          style="position:relative;z-index: 1;">
        </div>

import 'echarts/lib/chart/map'
export default {
  name: "real",
  data() {
    return {
 
    }
  },
  created() {

  },
  mounted() {
    let self = this;
    //1
    self.creatMap();
    //一定要等結果渲染完纔去監聽窗口變化，所以放在mounted裏
    window.onresize = (value) => {
      console.log(value, "value");
      //3
      //每次改變窗口調用一次resize()
      self.myMap.resize()
    }
  },
  methods: {
    creatMap() {
      let self = this
      //2
      //把echarts封裝好的map存放再自定義myMap裏
      self.myMap = echarts.init(self.$refs['map']);
      self.myMap.setOption(self.mapChartsOption);
      self.myMap.on("click", function (params) {
        console.log(params, "params");
      });
    },
}

修改後的效果 ：不管窗口怎麼變化都會自適應窗口

寄語：小知識積累，進步每一天，希望也能幫助和我遇到一樣問題的朋友。