如何解決echarts之圖表自適應(yīng)問(wèn)題

小編給大家分享一下如何解決echarts之圖表自適應(yīng)問(wèn)題，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

前言

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

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

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

如圖：

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

<div class="col-sm-12 row" id="logic1_node" ></div>

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

便嘗試通過(guò)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ì)再變化。所以對(duì)于echart圖表，其"響應(yīng)式"應(yīng)該是可以隨著窗口調(diào)整不斷被重新繪制，不是簡(jiǎn)單的調(diào)整寬高。

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

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

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

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

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

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

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

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

           option.chart.resize();

         });

看完了這篇文章，相信你對(duì)“如何解決echarts之圖表自適應(yīng)問(wèn)題”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！