Vue中echarts的图表自适应屏幕宽度及resize错误

最新推荐文章于 2023-10-27 16:32:56 发布

Low-key~

最新推荐文章于 2023-10-27 16:32:56 发布

阅读量2.1k

点赞数 1

文章标签： echarts vue.js elementui

本文链接：https://blog.csdn.net/qq_55693424/article/details/123557602

版权

Echarts 自适应 resize事件 ref属性错误排查

关键词由CSDN通过智能技术生成

#实现自适应

Echarts 图表并不会随着窗口的变化而变化，需要你主动的去绑定resize()事件来达到自适应的效果。解决方法：

1.window.onresize = this.$refs.myChart.resize;//自己设置ref属性绑定元素

2.window.addEventListener("resize", () => {
      if (this.$refs.myChart) this.$refs.myChart.resize();//自己设置ref属性绑定元素
      if (this.$refs.myChart2) this.$refs.myChart2.resize();
      if (this.$refs.myChart3) this.$refs.myChart3.resize();
    });
  },

一个页面有多个表格的话，需要用第二种方法。

#resize报错

在使用resize()后，当屏幕变化的时候报：Uncaught TypeError: Cannot read property of undefined (reading ‘resize’ )

解决前代码：

  window.addEventListener("resize", () => {
      this.$refs.myChart.resize();
      this.$refs.myChart2.resize();
      this.$refs.myChart3.resize();
    });

解决后代码：

window.addEventListener("resize", () => {
      // 先判断，再调用resize方法
      if (this.$refs.myChart) this.$refs.myChart.resize();
      if (this.$refs.myChart2) this.$refs.myChart2.resize();
      if (this.$refs.myChart3) this.$refs.myChart3.resize();
    });