echarts resize方法重新绘制后的宽高不正确

需求：如下图所示，收起侧边菜单栏后echarts图表需要根据新的宽高重新绘制

结果：echarts resize方法成功调用，但结果不符合预期，如下图所示：

错误代码：

watch: {
  '$store.state.app.sidebar': { // 监听侧边菜单栏的点击
    handler(oldVal, newVal) {
      this.resize() // 错误代码
    },
    deep: true
  }
},
mounted () {
   this.setEchart(this.lineOption, this.pieOption)

   window.addEventListener('resize', () => {
     this.resize()
   })
},
methods: {
	setEchart(value1, value2) {
      this.statisticsLeftChart = echarts.init(document.getElementById('statisticsLeftChart'))
      value1 && this.statisticsLeftChart.setOption(value1)

      this.statisticsRightChart = echarts.init(document.getElementById('statisticsRightChart'))
      value2 && this.statisticsRightChart.setOption(value2)
    },
    resize() {
      this.statisticsLeftChart.resize()
      this.statisticsRightChart.resize()
    },
}

原因：本项目中侧边菜单栏收起/展开时有动画效果，而此时监听侧边菜单栏按钮的点击并调用resize方法时，侧边菜单栏的动画效果还没有结束，容器的宽高还是保持不变的，此时resize方法被立即调用（也就是动画效果使得页面元素的宽高改变有延迟，导致resize方法的调用在页面元素宽高改变前），重新绘制的动作开始但获取到的“新”容器宽高其实还是“旧”的，当侧边菜单栏的动画执行完毕后，“旧图表”显示在新元素上，造成了上图所示的留有空白。因此，只需让侧边菜单栏收起/展开时的动画效果完成，所有元素有了新的宽高以后，再执行resize方法，此时resize方法获取到的新容器宽高就是我们想要的了。即确保resize方法调用时所有的相关元素已经有了新的宽高。

正确的代码：

watch: {
  '$store.state.app.sidebar': {
    handler(oldVal, newVal) {
      setTimeout(() => {
        this.resize()
      }, 500) // 定时器具体时间可做更精确的计算
    },
    deep: true,
  }
},