vue 中使用 echarts 自適應問題

echarts 自帶的自適應方法  resize()

具體用法：

let xxEcharts = this.$echarts.init(document.getElementById('xxx'))

xxEcharts.setOption(xxxx)  // 參數是 echarts 的option對象

window.onresize = xxEcharts.resize

 

可是，問題來了，同一個頁面使用多個echarts 的時候，window.onresize = xxEcharts.resize  只對最後一個echarts有效果

這時候換種寫法

window.onresize = function(){

　　xxBarChart.resize()

　　xxxBarChart.resize()

　　xxChart.resize()

　　xxxChart.resize()

}

好了，如今全部的 echarts均可以自適應了，

然而，還沒完，仍是會出現各類問題，致使自適應出問題，如今咱們想一想，如何手動觸發 resize

首先，確定要把 echarts變量全局化。

我如今 vue的data中設置 xxEcharts : this.$echarts.init(document.getElementById('xxx'))

然而報錯，沒辦法，

再試試在計算函數中聲明   

computed:{

　　xxBarChart(){

　　　　return this.$echarts.init(document.getElementById('myChart_ln'))

　　}

}

再試試，居然能夠了，雖然不知道原理，可是如今咱們能夠手動調起  this.xxBarChart.resize()了

/////////////////////////////////////////////////////////////////////  我是華麗麗的分割線  ////////////////////////////////////////////////////////////////////////////////////////////////////

第二天新加內容：

不知道昨天爲啥能夠了，今天在使用的時候，華麗麗的報錯了，錯誤很簡單，  

在使用 window.onresize = function(){ this.xxcharts.resize() }

的時候，this指向了event對象或者window對象，而不是咱們的 vue對象

 

此時，要改變當前方法的做用域，我第一想到的是call和bind，未試

 

我使用了另一種方法，我在 data 中定義一個屬性，叫windowSize，在 methods 中定義了一個方法 windowSizeChange,在windowSizeChange中 ,設置 windowSize 的值，而後在 watch 中 監測 windowSize 並 執行 this.xxcharts.resize()的操做。通過測試，能夠解決問題，

 

然而以上仍然沒法解決，echarts在子組件中且在同一個頁面被調用屢次的時候，沒法自適應的問題

解決辦法大概是，使用 全局狀態監測，好比 使用 vuex，，在 app.vue中 使用 window.resize ，整個項目只使用一次，作監測，大體是這個思路。