码迷,mamicode.com
首页 > 其他好文 > 详细

Echarts图表自适应布局

时间:2020-04-12 18:41:23      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:size   容器   就会   自适应   nbsp   echarts   实现   lex   char   

flexbox结构下echarts图表如何实现自适应布局?

已知echarts图表需要放在页面中心,宽度为屏幕宽度1/2,高度为距顶部80px,距底部60px,怎么放这个echarts图表比较好。

在扩大、减小屏幕宽度时,echarts图表可以自动跟着屏幕变化。

问题在于第一次布局成功后,图表宽度就会固定,会撑起父级容器的宽度,反过来又导致图表组件本身收不到resize事件。

解决方法有两个:

1、父级容器设置overflow:hidden,监测到resize后,动态设置图表新的宽度、高度

2、设置echarts图表为绝对定位,图表与容器完全脱离并不会再撑起容器,不会再干扰容器自适应变化。图表设置宽度:100%,高度:100%,不需要在resize中修改图表的宽度、高度了。

 

Echarts图表自适应布局

标签:size   容器   就会   自适应   nbsp   echarts   实现   lex   char   

原文地址:https://www.cnblogs.com/xiaofish/p/12686412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!