vue子组件echarts图表resize问题

1、父组件和单个子组件中使用window.onresize问题

子组件中的会没有作用，解决办法：在子组件中使用addEventListener("resize",callback)替代（可参考https://blog.csdn.net/believet93/article/details/107255405）

2、父组件和多个子组件时，方案1的办法也不能奏效

解决办法：在父组件中监听window.onresize方法，并设置一个变量（resize），然后在子组件中监听变量（resize）的变化

// 父组件中监听窗口大小改变，并保存在vuex的状态管理器中
mounted() {
    window.onresize = () => {
      // 窗口大小变化
      this.$store.dispatch(
        "setResize",
        document.body.clientHeight + document.body.clientWidth
      );
    }
}

在子组件中获取resize

  computed: {
    // 窗口大小
    size: function () {
      // 获取父组件中设置的resize变量
      return this.$store.state.resize;
    },
  },

  watch: {
    // 窗口大小改变时重绘echarts图形，调用echarts两次resize方法是为了解决
    // 点击浏览器最大最小化按钮时echarts图形没有按照预期的
    size: function (nv,ov) {
      this.chart.resize();
      setTimeout(() => {
        this.chart.resize();
      }, 50);
    }
  }