使用el-tabs切换时echarts的宽高获取不到

977 阅读1分钟

今天在用vue3开发项目的时候遇到使用el-tabs 切换echarts图表宽高不显示的问题
el-tabs在切换时候v-show为false,容器没有宽高,v-show为true,echart渲染没来得及获取刚显示的div的宽高。

解决办法:

1、切换tab时无法显示

不要在onMounted的时候就渲染隐藏tab里的图表,在点击tab的change回调中执行初始化 可以添加数据监听,有值了再渲染

2、div从隐藏到显示时无法显示

加个setTimeout,比如定个0.5秒,确保div显示之后有了实际宽高再渲染图表