echarts自適應(如何解決echarts之圖表自適應問題)

前言

為了直觀查看公司服務器各個進程占用的內存動態情況,我使用echarts進行數據可視化,具體的實現過程按下不表。

最后實現的效果如圖:

然后問題就來了,因UI采用了Bootstrap響應式框架,所以除了圖表之外其他都是響應式。當窗口縮小后,就會發生很尷尬的出界事件。

如圖:

針對這個問題,剛開始的解決思路及方法:把echart容器的寬度設置為100%;

<pclass="col-sm-12row"id="logic1_node"></p>

這樣之后依然存在問題:頁面初始的寬度是多少,canvas寬度就是多少,之后不會再變化。

便嘗試通過jsDOM操作,強行令canvas的寬度為100%,however too young too simple!

調整瀏覽器寬度發現,canvas畫布的寬度是隨之變化的,然而畫布里面的圖表內容卻像被擠壓在一起的餡餅,模糊扭曲了。

到這里細心的同學可以發現,echart圖表一旦繪制成功,內容就不會再變化。所以對于echart圖表,其"響應式"應該是可以隨著窗口調整不斷被重新繪制,不是簡單的調整寬高。

到echart官網看了Example,發現官網的實例都具有響應式功能,確實不是單純的寬度改變,是每次調整后圖表是重新繪制。猜想echart源碼里應該有resize這個API,打開調試器,打開echart源碼,Ctrl+F,果然找到了。

再仔細查看官方文檔:

echart圖表本身是提供了一個resize的函數的。

于是當瀏覽器發生resize事件的時候,讓其觸發echart的resize事件,重繪canvas。(也可以通過其他事件觸發)

附:Echarts 頁面多圖自適應的解決辦法

網上看到有不少人使用Echarts抽象出來的框架,實現自適應的效果代碼:window.onresize = option.chart.resize() , 這個代碼基本是官網上的window.onresize = myCharts.resize();的翻版。

但在實際的應用中一個頁面可能會有好幾個Echarts圖表,而使用window.onresize = option.chart.resize() ,加載頁面圖表后,頁面上只有一個圖表會根據瀏覽器的變化而自適應。如果要是頁面上的圖表都要自適應。則需要將resize事件疊加在不同的圖上面,使用一下代碼可以實現。

window.addEventListener("resize",function(){option.chart.resize();});

看完了這篇文章,相信你對“如何解決echarts之圖表自適應問題”有了一定的了解,如果想了解更多相關知識,歡迎關注本站行業資訊頻道,感謝各位的閱讀!