您好,欢迎来到刀刀网。
搜索
您的当前位置:首页Echarts图表自适应布局

Echarts图表自适应布局

来源:刀刀网
Echarts图表⾃适应布局

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

已知echarts图表需要放在页⾯中⼼,宽度为屏幕宽度1/2,⾼度为距顶部80px,距底部60px,怎么放这个echarts图表⽐较好。在扩⼤、减⼩屏幕宽度时,echarts图表可以⾃动跟着屏幕变化。

问题在于第⼀次布局成功后,图表宽度就会固定,会撑起⽗级容器的宽度,反过来⼜导致图表组件本⾝收不到resize事件。解决⽅法有两个:

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

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- gamedaodao.com 版权所有 湘ICP备2022005869号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务