一塊兒來玩echarts系列（二）------echarts圖表自適應問題

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

最後實現的效果如圖：

而後問題就來了，因UI採用了Bootstrap響應式框架，因此除了圖表以外其餘都是響應式。當窗口縮小後，就會發生很尷尬的出界事件。

如圖：

針對這個問題，剛開始的解決思路及方法：把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！

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

到這裏細心的同窗能夠發現，echart圖表一旦繪製成功，內容就不會再變化。因此對於echart圖表，其"響應式"應該是能夠隨着窗口調整不斷被從新繪製，不是簡單的調整寬高。

到echart官網看了Example，發現官網的實例都具備響應式功能，確實不是單純的寬度改變，是每次調整後圖表是從新繪製。猜測echart源碼裏應該有resize這個API，打開調試器，打開echart源碼，Ctrl+F，果真找到了。

再仔細查看官方文檔：

echart圖表自己是提供了一個resize的函數的。

因而當瀏覽器發生resize事件的時候，讓其觸發echart的resize事件，重繪canvas。（也能夠經過其餘事件觸發）

---over---