需求是做一个tabs切换显示不同的内容,显示内容时可以切换显示图表和表格。
首先是tab切换的时候,echarts图表会无法获取宽高,这是因为tab不显示的时候就没有宽高,渲染图表的时候tab没显示、或者没来得及获取刚切出来的tab,图表就无法正常渲染。
其次是切换div图表和表格显示时,原因也是一样的,v-show为false,容器没有宽高,v-show为true,echart渲染没来得及获取刚显示的div的宽高。
针对不同原因,有不同的解决办法:
1、切换tab时无法显示
不要在created的时候就渲染隐藏tab里的图表,在点击tab的时候再执行初始化
可以添加数据监听,有值了再渲染
将初始化放入this.$nextTick()
2、div从隐藏到显示时无法显示
加个setTimeout,比如定个0.5秒,确保div显示之后有了实际宽高再渲染图表

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐