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)
})