这几天在写数据统计图，折线图等等，使用的是echarts, 因为我这个统计数据界面是封装在一个组件里面的，然后在选项卡<el-tab-pane> 中调用
因为需求是要统计图跟着屏幕大小自适应，不能写死，所以我宽度给了 100% 根据父视图的大小来。
如下：
给div 定义宽度为100%之后 然后在 mounted() 方法去声明一个页面监听方法 这样页面改变了 就会触发事件
这样设置之后 图表的大小确实会根据页面的大小进行自适应，但这个时候存在一个问题，就是页面刚初始化的时候，图表刚开始默认大小是100px 特别的小，然后再去拉动页面的大小后 立马又正常了。
如下：
因为页面刚初始化的时候，图表的页面是放在选项卡<tabs>里面的 在选项卡切换的时候，页面在渲染，图表页面拿不到父视图的大小所以给默认了一个100px的宽高。
解决这个问题的方案就是 延迟选项卡切换时的页面渲染
在选项卡上添加 layz
如下：
这样就解决了 页面初始化 图表很小的问题
还有一种方法就是 可以借用v-if在切换的时候使echart图重新渲染
网友评论