echarts图表根据窗口缩小自适应

在vue项目中用到了echarts组件，需要根据窗口大小重新渲染。

刚开始使用了onresize的方式监听浏览器大小的变化，然后通过 myChart.resize() 方法重新渲染，发现只有最后一个图表执行了resize

   // 绘制图表
   myChart.setOption(option);
   //这里添加以下代码
   window.onresize = function(){
       myChart.resize();
   }

最后用 addEventListener 方式绑定的 resize 方式是正常的

window.addEventListener('resize', () => myChart.resize(), false)

on和addEventListener 的区别

一般情况下，on和addEventListener绑定的功能是一样的，如果一个标签上绑定两个相同事件，on方式的绑定最后一个事件会覆盖掉上面的事件，addEventListener 则不会，原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中，会依次执行，不会覆盖以前的事件

原文链接：https://blog.csdn.net/weixin_43989338/article/details/99545933