解决Echarts封装成组件时只有最后一个才会缩放的问题

转载于 2018-03-02 09:17:00 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/blueroses/p/8491473.html

文章标签：

#javascript #ViewUI

本文介绍了一种在多个图表组件中实现窗口缩放监听的方法，通过使用addEventListener而非直接赋值给window.onresize属性来确保所有组件都能响应尺寸变化。此外，还引入了一个小的延迟以提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考了此文，并且强烈建议去看http://blog.youkuaiyun.com/crper/article/details/76091755

一般网上的方法都是

 mounted() {
        this.drawChart();
        window.onresize=()=>{
            console.log(this.id)
            this.chart.resize();
        }
      }

这么做，在多个组件的情况下，只有最后一个组件会进行缩放。

其实只需要这么做就可以了：

mounted() {
        this.drawChart();
        window.addEventListener('resize', ()=>{
            setTimeout(() => {this.chart.resize();},100)
        });
      }

添加了延迟函数是为了增强一下性能

转载于:https://www.cnblogs.com/blueroses/p/8491473.html