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)
        
    };
}