一：簡(jiǎn)介

之前做項(xiàng)目的時(shí)候要實(shí)現(xiàn)echarts圖表隨瀏覽器窗口大小變化而改變，echarts本身提供了一個(gè)resize()方法，然后我們需要用一個(gè)函數(shù)實(shí)現(xiàn)瀏覽器窗口監(jiān)聽(tīng)，最初我選用的是window.onresize方法，當(dāng)頁(yè)面只有一個(gè)圖表時(shí)可以實(shí)現(xiàn)，但當(dāng)頁(yè)面多個(gè)圖表時(shí)window.onresize會(huì)被覆蓋從而導(dǎo)致失效，最后我選用了window.addEventListener（）方法解決了這個(gè)問(wèn)題

二：window.onresize存在的問(wèn)題

這是因?yàn)閛nresize本身就是一個(gè)回調(diào)，當(dāng)發(fā)生改變時(shí)，前一個(gè)方法就會(huì)被覆蓋

三：window.addEventListener（）的運(yùn)用

EventTarget.addEventListener() 方法將指定的監(jiān)聽(tīng)器注冊(cè)到 EventTarget 上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行。事件目標(biāo)可以是一個(gè)文檔上的元素 Element、Document 和 Window，也可以是任何支持事件的對(duì)象（比如 XMLHttpRequest）

語(yǔ)法：

addEventListener(event, function, useCapture)

• 參數(shù)event必填，表示監(jiān)聽(tīng)的事件，例如 click, resize等，不加前綴on的事件。
• 參數(shù) function必填，表示事件觸發(fā)后調(diào)用的函數(shù)，可以是外部定義函數(shù)，也可以是匿名函數(shù)。不帶參數(shù)。
• 參數(shù) useCapture選填，填true或者false，用于描述事件是冒泡還是捕獲觸發(fā)，true表示捕獲，默認(rèn)false表示冒泡。
  ?

代碼實(shí)現(xiàn)：

window.addEventListener('resize', this.screenAdapter)screenAdapter(){this.chartInstance.resize()
}

其中，screenAdapter即為resize事件觸發(fā)后調(diào)用的函數(shù)。同時(shí)不要忘記使用window.removeEventListener來(lái)移除監(jiān)聽(tīng)