vue echarts 浏览器窗口变化如何自适应

最新推荐文章于 2025-09-09 17:58:06 发布

原创最新推荐文章于 2025-09-09 17:58:06 发布 · 479 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #vue.js #前端

收录于

本文介绍了如何在Echarts中实现窗口大小变化时图表自动重置尺寸，以及在Vue组件销毁时正确移除resize事件监听器以避免内存泄漏。通过添加和移除事件监听器，确保了Echarts图表在不同屏幕尺寸下的良好显示，并优化了应用性能。

1、在加载echart的函数里面加入

window.addEventListener('resize', () => {
        myChart.resize()
      })

2、组件销毁时需移除

beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
    window.removeEventListener('resize', () => {
      this.myChart.resize()
    })
  },