Echarts图表自适应布局

Posted 2020-11-27 xiaofish

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

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

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

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

解决方法有两个：

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

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