解决 Vue 中 <el-tab-pane> 里面使用echarts 大小自适应问题

  这几天在写数据统计图,折线图等等,使用的是echarts, 因为我这个统计数据界面是封装在一个组件里面的,然后在选项卡<el-tab-pane> 中调用

因为需求是要统计图跟着屏幕大小自适应,不能写死,所以我宽度给了 100% 根据父视图的大小来。

如下:


给div 定义宽度为100%之后 然后在 mounted() 方法去声明一个页面监听方法 这样页面改变了 就会触发事件


这样设置之后 图表的大小确实会根据页面的大小进行自适应,但这个时候存在一个问题,就是页面刚初始化的时候,图表刚开始默认大小是100px 特别的小,然后再去拉动页面的大小后 立马又正常了。

如下:

因为页面刚初始化的时候,图表的页面是放在选项卡<tabs>里面的 在选项卡切换的时候,页面在渲染,图表页面拿不到父视图的大小所以给默认了一个100px的宽高。

解决这个问题的方案就是 延迟选项卡切换时的页面渲染

在选项卡上添加 layz

如下:


这样就解决了 页面初始化 图表很小的问题


还有一种方法就是 可以借用v-if在切换的时候使echart图重新渲染


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容