在vue某個數據展示頁面，使用了多個echarts圖表，使用onresize方法只能夠讓最後一個圖表隨着窗口大小自適應
在解決問題的過程中發現的一些問題
一、第一種
開始我在每個圖表組件的方法裏面定義myChart，如下
methods:{
setchart(){
const option{
}
let myChart = this.$echarts.init(document.getElementById('r-biao1'));
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
};
}
}
上面的代碼只有最後一個圖表會刷新，將window.onresize改爲下面的代碼
window.addEventListener("resize",function(){
myChart.resize();
})
正確代碼
methods:{
setchart(){
const option{
}
let myChart = this.$echarts.init(document.getElementById('r-biao1'));
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
})
}
}
二、第二種
我把mychart在data裏定義，用this調用
data() {
return {
myChart: null,
}
},
methods:{
setchart(){
const option{
}
this.myChart = this.$echarts.init(document.getElementById('r-biao3'));
this.myChart.setOption(option);
window.addEventListener("resize",function(){
this.myChart.resize();
})
}
}
這個也是最後一個可自適應，最後發現是this的問題
正確代碼
data() {
return {
myChart: null,
}
},
methods:{
setchart(){
const option{
}
const that=this
this.myChart = this.$echarts.init(document.getElementById('r-biao3'));
this.myChart.setOption(option);
window.addEventListener("resize",function(){
that.myChart.resize();
})
}
}
以上是我嘗試出來可行的方法以及問題