多个echarts图表下 resize()方法失效问题

最近在学习和使用echarts时遇到了自适应问题,通过度娘顺利的找到了resize的解决方案,但是当一个页面中出现多个图表时就会导致resize失效问题。MMP被这个问题困扰了好几天,好在最后终于找到答案特此记录一下。
错误示例:

 window.onresize = () => {
          console.log('chart5重绘')
          this.chart5.target.resize()
        }

当存在多个echarts图表时导致失效
在这里插入图片描述
当缩小浏览器窗口时明显看到图表1未能成功重绘
正确示例:

 window.addEventListener('resize', () => {
          this.chart4.target.resize()
        })

在使用window.onresize监听窗口变化时,要使用DOM二级绑定方式:addEventListener方式。

发布了29 篇原创文章 · 获赞 11 · 访问量 1856

猜你喜欢

转载自blog.csdn.net/chihaihai/article/details/104215561
今日推荐