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