vue里echarts自适应窗口大小改变

来源:网络 文章列表 2019-08-13 8
echarts的图表提供了一个resize方法可以自适应屏幕窗口改变,而重新渲染图表大小的功能。因此我们只要监听浏览器的窗口改变的resize事件,再结合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)
        
    };
}

 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接