問題描述

1.問題： 主要問題就是 因為頁面有很多個echarts圖表 同時 每個圖表要處理不同的數據 目前沒有采用任何模板和框架 所以 我在整個頁面html引入幾個js文件 每個js文件是一個echarts圖表 每個js文件用來處理不同的數據 我的html頁面要求響應式 所以當瀏覽器窗口大小發生變化的時候 需要每個圖表也自適應變化大小目前 我采取的方式就是 在每個js文件里邊 當畫出圖表的時候 利用監聽窗口大小 來改變 echarts圖表大小 代碼如下：這段代碼在每個js文件中都寫了

onlineTimeChart.setOption(option) window.addEventListener('resize', function () {setTimeout(function () { onlineTimeChart.resize();}, 500) });

以上代碼 當html頁面只有一個echarts圖表的時候 該圖表可以實現自適應 然而 當頁面引入其他js文件 也就是畫出更多的圖表的時候 就會出現 只有最后引入的那個js文件畫出的圖表才會自適應

js引入順序如下：

<script src='http://www.gepszalag.com/wenda/lib/js/jquery.js'></script><script src='http://www.gepszalag.com/wenda/lib/js/echarts.js'></script><script src='http://www.gepszalag.com/wenda/script/internetAction.js'></script><script src='http://www.gepszalag.com/wenda/script/onlineTime.min.js'></script><script src='http://www.gepszalag.com/wenda/script/systemStyle.min.js'></script><script src='http://www.gepszalag.com/wenda/script/onlineCount.min.js'></script><script src='http://www.gepszalag.com/wenda/script/bwaLoad.min.js'></script> //只有這一個才會自適應

2.總結： 綜合以上 我想了很多原因 但是還是解決不了問題 沒有模板和框架 也忽略打包工具 希望有知道的可以給我解決一下 謝謝

問題解答

自己已解決

searchWordChart.setOption(option); window.addEventListener('resize', function () {setTimeout(function () { searchWordChart.resize();}, 500) });回答2：

可能是因為window的事件被覆蓋了、每次都是只保留了最后一個JS中的resize事件、可以考慮把他們的resize事件function內部的代碼塊抽到一起

謝邀。如果你引入兩個代碼會出現下面這個問題。onlineTimeChart這個參數被多次覆蓋，這就是問題。解決方案就是IIFE形成一個閉包，避免變量污染。

onlineTimeChart.setOption(option)window.addEventListener('resize', function () { setTimeout(function () {onlineTimeChart.resize(); }, 500)});onlineTimeChart.setOption(option)window.addEventListener('resize', function () { setTimeout(function () {onlineTimeChart.resize(); }, 500)});;(function(){ //每個頁面的代碼都扔這里面})();//如下 ;(function(){var onlineTimeChart = 1;console.log(onlineTimeChart);})(); ;(function(){console.log(onlineTimeChart);//獲取不到onlineTimeChart })();