echart 在vue中,首次加载之后,resize事件未生效

Posted on 2021-08-24 18:54  凡凡0410  阅读(977)  评论(0编辑  收藏  举报

异常描述:chart 使用了一个组件,然后监听了resize事件,具体是 窗口发生变化的时候,resize事件执行了,页面一直在打印resize,但是图表的尺寸并没有发生变化,但是当我在代码中随便写一点,然后保存,页面上自动重绘的时候,就可以resize了,

原因是:首次加载的时候,创建了this.chart,但是在执行resize事件的时候,这个resize的主体this.chart可以找到,但是找到的并不是页面上的那一个(具体原因不知道是啥)

原始代码1

window.addEventListener('resize', () => {
      console.log('resize');
      this_.resizeChart();
});

resizeChart() {
      this.chart && this.chart.resize();
 }

  

解决方式就是看代码2 h

      console.log('resize');
      this_.resizeChart();
});

resizeChart() {
  重新对chart进行定义
this.chart = this.$refs.chart;
this.chart && this.chart.resize(); }

 

Copyright © 2024 凡凡0410
Powered by .NET 9.0 on Kubernetes