flexbox結構下echarts圖表如何實現自適應布局?
已知echarts圖表需要放在頁面中心,寬度為屏幕寬度1/2,高度為距頂部80px,距底部60px,怎么放這個echarts圖表比較好。
在擴大、減小屏幕寬度時,echarts圖表可以自動跟着屏幕變化。
問題在於第一次布局成功后,圖表寬度就會固定,會撐起父級容器的寬度,反過來又導致圖表組件本身收不到resize事件。
解決方法有兩個:
1、父級容器設置overflow:hidden,監測到resize后,動態設置圖表新的寬度、高度
2、設置echarts圖表為絕對定位,圖表與容器完全脫離並不會再撐起容器,不會再干擾容器自適應變化。圖表設置寬度:100%,高度:100%,不需要在resize中修改圖表的寬度、高度了。