Vue3使用组件库的tab切换echarts图表，图表出现宽度压缩变窄的问题

Vue3使用antd的tab从echarts图表A切换到图表B，再回到A的时候，A的图表宽度被压缩到100px

<Tabs v-model:activeKey="activekey">
    <TabPane key="1" tab="图表A">
        <div id="chartA" :style="{ width: 100%, height: '600px' }"></div>
    </TabPane>
    <TabPane key="1" tab="图表B">
        <div id="chartB" :style="{ width: 100%, height: '600px' }"></div>
    </TabPane>
</Tabs>

原因: 当我们从A标签切换到B标签时，图表A的display: none;，而我们切回A标签的时候，其display: block，出现的问题是，echarts的初始化代码在其容器渲染完成之前(也就是宽度复原之前)执行了，所以就出现了echarts图表宽度压缩变窄的情况

解决: 让echarts的初始化代码在容器被渲染完成之后再执行，这就很自然地想到了vue的nextTick，代码如下：

nextTick(() => {
  chartA.resize()
  chartA.setOption(option, true)
})

参考文章 https://www.cnblogs.com/ch-zaizai/p/14844111.html