Vue使用Tab页切换EChart,图表显示变形,未铺满父容器踩坑

  在使用Tab页第一次切换到有echart页面时,发现echart画的图形未铺满父容器。那是因为父容器最初是被隐藏的,高宽为0。

 先提出方案解决这个问题。

elementUi为例:

1.利用v-if值切换来重绘图形页面。

当前tab的name为‘line’,切换到图形页面时,v-if条件满足 直接重绘子组件图形。这样绘画的图形就会铺满父容器

2.lazy=’true’ 

这个是最简单方便的,在el-tab-pane加上lazy=’true’属性

官方对lazy的解释是延迟加载,也就是待tab页切换时,父容器tab渲染完毕再去渲染子组件。

发布了17 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/u013025674/article/details/101052048