本文介绍了在Vue项目中使用el-tab组件时遇到Echarts图表显示异常的问题。当切换tab时，图表出现压缩或显示不正常。博主分析了问题原因，并提供了两种解决方案，推荐使用Vue的$nextTick结合el-tab的change事件来解决这个问题，确保Echarts在正确的时间渲染。通过在切换后的回调中初始化图表，避免了图表的显示异常。
项目场景：
el-tab切换时Echarts图表被压缩在一起或显示异常
如图：
原因分析：
解释1 （但是博主试了下 lazy属性不起作用 果断放弃）
解释2 （用vue自带的$nextTick钩子 + el-tab的自带的change事件）
解决方案：
推荐 第二种方案，这本来也是这个bug的问题所在，
在还没有 切换到 第二个标签页的 时候 ， 我已经在mounted 里面把 Echarts画出来了，所以一切换，图表还来不及渲染，就显示异常了吧，
所以这是 当然 要用 $nextTick 哦，处理这个bug非常合适， 当然还可以setTimeout，只是没必要。
代码：
<el-tabs 
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
