首页 前端知识 一个页面上多个echart图表的自适应问题,亲测有效!!!(作者是Vue2项目)

一个页面上多个echart图表的自适应问题,亲测有效!!!(作者是Vue2项目)

2024-05-30 10:05:27 前端知识 前端哥 562 632 我要收藏

根据echars官网,单个echar图自适应用法如下

window.onresize = () => {
    this.myChart.resize();
};

以上方法有个问题,就是在一个页面存在多个echart图,自适应的时候只会适应最后进行渲染的一个echart图。

由此引出下面这种写法,将简写的onresize更换为addEventListener。

添加事件监听器记得在离开时移除事件监听器,避免内存泄漏!

要移除事件监听器,事件的函数就需要使用具名函数!

data() {
    return {
        myChart:''
    }
}
mounted() {
    this.loadChart();
}
beforeDestroy() {
    // 离开页面必须进行移除,否则会造成内存泄漏,导致卡顿
    window.removeEventListener('resize', this.resizeFn);
}
methods: {
    // 渲染echart图
    loadChart() {
        // 获取绘图的节点,并初始化
        this.myChart = this.$echarts.init(document.getElementById('chart'));
        // 自己项目echart图的配置
        const chartOption = {...} 
        this.myChart.setOption(chartOption);
        setTimeout(() => {
            window.addEventListener('resize', this.resizeFn);
        }, 100)
    }
    // 使用具名自适应函数,用于离开页面时可以卸载监听事件使用
    resizeFn() {
        return this.myChart.resize();
    }
}

我们可以在控制台打开Element -> EventListeners ->点击下图的刷新图标。

查看我们现在的事件监听器,每个resize对应的是不同的echart图我们给绑的事件监听器。

当我们需要验证离开页面是否移除事件监听时就可以在跳转页面后,点击下图标注的刷新图标,看看事件是否移除,保证内存不泄露。

希望能帮助到需要的人,存在错误之处请指正。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10120.html
标签
评论
发布的文章

用点jquery实现的登录页面

2024-06-06 00:06:07

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!