vue3 echarts自适应

监听窗体变化

当浏览器窗体发生变化的时候会触发。

主要用在布局计算，比如说分辨率不一样，高度宽度需要重新计算渲染。

 例如echarts报表，当我们的浏览器缩放发生变化或者是电脑分辨率发生变化之后，已渲染的echarts报表大小位置是不会发生变化的，所以可以使用这个方法监听浏览器窗体变化，来重新渲染echarts报表，解决错版。

窗体变化echarts报表重新渲染

addEventListener()添加事件监听

addEventListener(event, function, useCapture)

（1）参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。

（2）参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数。

（3）参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。

//方式一

 

window.onresize = function(){}

window.onresize只能在一个组件中使用，如果多个组件调用则会出现覆盖情况

//方式二

  

上两种方法自然是有用的，但有些场景不适用。

例如有个可以收缩的侧边栏，当收缩侧边栏时浏览器窗口大小是没有发生改变的，但由于页面是响应式的，内容区域容器宽高是变化的，这时候我们要监控容器的变化来实现echarts图表的重新渲染

Web API提供了一个方法ResizeObserver来实现

//方式三