Echarts初始化时渲染异常

问题

在一次开发过程中，需要用到Echarts图表来列举数据，即每一组数据对应生成一幅柱状图、饼图之类。将绘制不同类型的方法提取出来，然后图表样式根据数据中的type字段来判断（省略）。
大致效果如下：

• 

所有卡片通过v-for循环实现，那么怎样让图表实现依次渲染呢？这里为放置echarts的div设置ref，例如ref = “subjectChart”，然后在请求方法中根据索引依次执行绘制图表的函数。此处的drawBar（dom,data》）函数为封装后的。

          this.$nextTick(() => {
            // @ts-ignore
            for (const [index, ele] of this.chartDataList.entries()) {
              this.saveCharts.push(
                // @ts-ignore
                drawBar(this.$refs.subjectChart[index], ele)
              );
            }
          });

然而在初始化时，Echarts没有获取到容器的宽高，使得渲染畸形，只有在执行resize()才恢复正常。因此在执行绘制函数时，为dom设置一个初始值：

export function drawBar(dom: any, data: any) {
  const myChart: any = dom;
  myChart.style.width = '32vh';
  myChart.style.height = '23.77vh';
  // 初始化图表
  const mainChart = echarts.init(myChart);

  const option = {
    ...//略
  };
  // @ts-ignore
  mainChart.setOption(option);
  window.addEventListener('resize', () => {
    // 屏幕大小自适应，重置容器高宽
    // resizeMainContainer();
    mainChart.resize();
  });
  return mainChart;
}