echart vue 图表大小_vue里echarts自适应窗口大小改变

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)

};

}