vuejs监听页面宽度变化重新加载echarts图表

1，第一种：
vue通过element-resize-detector监听dom元素

  mounted() {
    this.drawChart1()
    this.drawChart2()
    let erd = elementResizeDetectorMaker();
    let that = this
    erd.listenTo(document.getElementById("main1"), (element) => {
      let width = element.offsetWidth;
      let height = element.offsetHeight;
      console.log(width)
      console.log(height)
      that.$nextTick(() => {
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("main1")).resize();
        that.$echarts.init(document.getElementById("main2")).resize();
      });
    });
  },

参考文章：

https://blog.csdn.net/qq_22182989/article/details/111403915
2，第二种：

data() {
    return {
      screenWidth: document.body.clientWidth,
     }
  },
  mounted() {
    this.drawChart1();
    this.drawChart2();
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  watch:{
    screenWidth(val){
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if(!this.timer){
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function(){
          // 打印screenWidth变化的值
          console.log(that.screenWidth)
          that.timer = false
        },400)
      }
    }
  }