Echarts圖表自適應布局


flexbox結構下echarts圖表如何實現自適應布局?

已知echarts圖表需要放在頁面中心,寬度為屏幕寬度1/2,高度為距頂部80px,距底部60px,怎么放這個echarts圖表比較好。

在擴大、減小屏幕寬度時,echarts圖表可以自動跟着屏幕變化。

問題在於第一次布局成功后,圖表寬度就會固定,會撐起父級容器的寬度,反過來又導致圖表組件本身收不到resize事件。

解決方法有兩個:

1、父級容器設置overflow:hidden,監測到resize后,動態設置圖表新的寬度、高度

2、設置echarts圖表為絕對定位,圖表與容器完全脫離並不會再撐起容器,不會再干擾容器自適應變化。圖表設置寬度:100%,高度:100%,不需要在resize中修改圖表的寬度、高度了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM