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来移除监听

猜你喜欢

转载自blog.csdn.net/qq_42691298/article/details/129690567