前言

為了直觀查看公司服務(wù)器各個(gè)進(jìn)程占用的內(nèi)存動(dòng)態(tài)情況，我使用echarts進(jìn)行數(shù)據(jù)可視化，具體的實(shí)現(xiàn)過程按下不表。

最后實(shí)現(xiàn)的效果如圖：

然后問題就來了，因UI采用了Bootstrap響應(yīng)式框架，所以除了圖表之外其他都是響應(yīng)式。當(dāng)窗口縮小后，就會(huì)發(fā)生很尷尬的出界事件。

如圖：

針對這個(gè)問題，剛開始的解決思路及方法：把echart容器的寬度設(shè)置為100%；

<div class="col-sm-12 row" id="logic1_node" style="width:100%;height:700px"></div>

這樣之后依然存在問題：頁面初始的寬度是多少，canvas寬度就是多少，之后不會(huì)再變化。

便嘗試通過jsDOM操作，強(qiáng)行令canvas的寬度為100%，however too young too simple！

調(diào)整瀏覽器寬度發(fā)現(xiàn)，canvas畫布的寬度是隨之變化的，然而畫布里面的圖表內(nèi)容卻像被擠壓在一起的餡餅，模糊扭曲了。

到這里細(xì)心的同學(xué)可以發(fā)現(xiàn)，echart圖表一旦繪制成功，內(nèi)容就不會(huì)再變化。所以對于echart圖表，其"響應(yīng)式"應(yīng)該是可以隨著窗口調(diào)整不斷被重新繪制，不是簡單的調(diào)整寬高。

到echart官網(wǎng)看了Example，發(fā)現(xiàn)官網(wǎng)的實(shí)例都具有響應(yīng)式功能，確實(shí)不是單純的寬度改變，是每次調(diào)整后圖表是重新繪制。猜想echart源碼里應(yīng)該有resize這個(gè)API，打開調(diào)試器，打開echart源碼，Ctrl+F，果然找到了。

再仔細(xì)查看官方文檔：

echart圖表本身是提供了一個(gè)resize的函數(shù)的。

于是當(dāng)瀏覽器發(fā)生resize事件的時(shí)候，讓其觸發(fā)echart的resize事件，重繪canvas。（也可以通過其他事件觸發(fā)）

附：Echarts 頁面多圖自適應(yīng)的解決辦法

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

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

 window.addEventListener("resize", function () {

           option.chart.resize();

         });

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論