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

因此我們只要監(jiān)聽(tīng)瀏覽器的窗口改變的resize事件，再結(jié)合echarts的圖表，就可以實(shí)現(xiàn)我們想要的功能了。

如果是單個(gè)圖表的情況的話

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

如果是多個(gè)圖表的話

mounted(){

window.onresize = () => {

this.myChart.resize();

this.myChart2.resize();

this.myChart3.resize();

});

}

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

如果在組件里使用的話，可以直接單個(gè)組件添加進(jìn)事件列表

myLogLine.setOption(option);

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

myLine.setOption(option);

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

這里還需要注意，因?yàn)榇翱诟淖兛赡軙?huì)一下子刷新很多次resize，這里，我們可以用個(gè)定時(shí)器，做個(gè)延時(shí)

data(){

return {

timer: ''

}

},

mounted(){

window.onresize = ()=> {

clearTimeout(this.timer)

this.timer = setTimeout(() => {

this.myChart.resize();

}, 300)

};

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。