Echarts实现图表自适应屏幕分辨率

一：简介

之前做项目的时候要实现echarts图表随浏览器窗口大小变化而改变，echarts本身提供了一个resize()方法，然后我们需要用一个函数实现浏览器窗口监听，最初我选用的是window.onresize方法，当页面只有一个图表时可以实现，但当页面多个图表时window.onresize会被覆盖从而导致失效，最后我选用了window.addEventListener（）方法解决了这个问题

二：window.onresize存在的问题

这是因为onresize本身就是一个回调，当发生改变时，前一个方法就会被覆盖

三：window.addEventListener（）的运用

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）

语法：

addEventListener(event, function, useCapture)

• 参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。
• 参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数。
• 参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。
   

代码实现：

window.addEventListener('resize', this.screenAdapter)

screenAdapter(){
    this.chartInstance.resize()
}

其中，screenAdapter即为resize事件触发后调用的函数。同时不要忘记使用window.removeEventListener来移除监听