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

修改后的效果 ：不管窗口怎么变化都会自适应窗口

寄语：小知识积累，进步每一天，希望也能帮助和我遇到一样问题的朋友。