我只想說每個人遇到的bug真的不能一概而論,解決辦法也會有不同。在vue中使用echarts的時候,會想要實現window.resize窗體變化大小的時候讓圖形大小跟着變化。實現的過程中各種bug,也真的讓人有種想要發狂的感覺。但是還好,最后在不斷的查資料和嘗試當中。實現了想要的效果,僅供參考:
首先我這里實現的效果是切換echart圖形,然后在window.resize過程中想要實現自適應窗口大小的變化。
這里的兩個button分別是控制兩個路由切換,也就是兩個echart圖形(柱狀圖和餅圖)
首先實現這兩個圖形的option設置這里就不進行展示了,在官網上有許多的例子,可供參考。
(1)圖形的container<div id='echart'></div> 我把寬高設置為充滿父容器。所以你需要確保你的圖形容器在切換的時候要有寬高。在我的另外一篇隨筆中有寫到利用js實現echarts切換的時候,會涉及到當echarts的display為none的時候,再次顯示之前,需要去計算並賦值給圖形容器,不然圖形沒有寬度或者高度會導致無法展示。
(2)
在methods方法中寫了一個實現柱狀圖的過程方法:createBar。
在掛載的時候去調用該方法,就實現了基本的圖形。但是這個時候還沒有涉及到當window resize的時候,圖形的大小不會跟隨改變。這個時候就需要監聽window.resize變化:
完整的mounted階段。這里面使用到了jquery,需要引入jquery。具體的可以全局<script>引入,也可以把jquery當做插件進行引入<需要在webpack中配置>,網絡上有許多配置的例子。
到這里就可以完成window.resize的監聽並且圖形可以 變化了。
或許這個方法不太優,但是不失為一種方式。如果大家有更好的實現方法當然也可以進行分享。分享使你快樂。哈哈~~