vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题

通过原生自带的window.onresize监听窗口大小 + Echart自带的冲渲染函数.resize()
刚开始我改变大小时 感觉挺好 但是我一点窗口最大化就开始出现问题 他没有时时根据窗口大小改变而是跟进上一次的大小改变的
我找了好久才想到是不是执行循序的问题 就加了个 定时器setTimeout 发现加上后就正常了 确实可以

<div>
 	<div ref="FileNumEchartMain" :style="{width: this.EchartWidth + 'px', height: this.Echartheight + 'px'}"></div>
</div>

没加之前

// onresize 我是写在mounted中  应该也可以写在created中
	window.onresize = async () => {
      this.EchartWidth =  document.body.clientWidth
      this.Echartheight = this.EchartWidth / 2
      this.FileNumChart.resize()
      console.log('onresize', nowScreenWidth,this.EchartWidth,this.Echartheight)
    }

加了之后

	window.onresize = async () => {
      this.EchartWidth =  document.body.clientWidth
      this.Echartheight = this.EchartWidth / 2
      setTimeout(() => {
        this.FileNumChart.resize()
      }, 100);
      console.log('onresize', nowScreenWidth,this.EchartWidth,this.Echartheight)
    }

我在vue中的初始化函数 上面的 this.FileNumChart就在这生成的

initFileNumEchart(type){
      this.FileNumChart = echarts.init(this.$refs.FileNumEchartMain);
      let option;
      option = {
        tooltip: {
          // 触发类型，默认数据触发
          trigger: 'item',
          // 触发位置
          position: 'top',
          // 文本设置
          textStyle: {
            // width: 10,
            // height: 20,
            fontSize: 8
          }
        },
        // 标题
        title: {
          text: '文件数量统计',
          // 标题位置 内边距
          padding: [10, 10]
        },
        // 数据图形颜色
        color: '#25C1C3',
        xAxis: {
          type: 'category',
          // x轴文字 旋转角度
          // axisLabel: {
          //   rotate: 45,
          // },
          data: ['文档', '图片', '视频', '音频', '其他']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            barWidth:'40%',
            data: [120, 200, 150, 80, 70, 110],
            type: 'bar',
            markLine: {
              label: {
                color: "rgba(0, 255, 229, 1)"
              },
              lineStyle: {
                color: "rgba(0, 255, 229, 1)"
              },
              data: [{
                name: '平均线',
                type: "average",
              }]
            }
          }
        ]
      };
      this.FileNumChart.setOption(option);
      this.FileNumChart.on('click',(param) => {
        console.log('FileNumChart click',param)
      });
      console.log('initEchart')
    },