echarts的圖表提供了一個resize方法可以自適應屏幕窗口改變，而重新渲染圖表大小的功能。

因此我們只要監聽瀏覽器的窗口改變的resize事件，再結合echarts的圖表，就可以實現我們想要的功能了。

如果是單個圖表的情況的話

用window.onresize = myChart.resize; 可以完成自適應，就是把window的onresize事件賦值為echart的resize事件

如果是多個圖表的話

mounted(){

window.onresize = () => {

this.myChart.resize();

this.myChart2.resize();

this.myChart3.resize();

});

}

注意，在vue里使用，需要把事件防止在mounted里。

如果在組件里使用的話，可以直接單個組件添加進事件列表

myLogLine.setOption(option);

window.addEventListener("resize", () => { myLogLine.resize();});

myLine.setOption(option);

window.addEventListener("resize", () => { myLine.resize();});

這里還需要注意，因為窗口改變可能會一下子刷新很多次resize，這里，我們可以用個定時器，做個延時

data(){

return {

timer: ''

}

},

mounted(){

window.onresize = ()=> {

clearTimeout(this.timer)

this.timer = setTimeout(() => {

this.myChart.resize();

}, 300)

};

}

總結

以上是生活随笔為你收集整理的echart vue 图表大小_vue里echarts自适应窗口大小改变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。