為了直觀查看公司服務器各個進程占用的內存動態情況，我使用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---