前言

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

最后實現的效果如圖：

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

如圖：

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

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

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

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

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

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

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

再仔細查看官方文檔：

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

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

附：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();         });

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。