問題描述

1.問題： 主要問題就是 因?yàn)轫撁嬗泻芏鄠€(gè)echarts圖表 同時(shí) 每個(gè)圖表要處理不同的數(shù)據(jù) 目前沒有采用任何模板和框架 所以 我在整個(gè)頁面html引入幾個(gè)js文件 每個(gè)js文件是一個(gè)echarts圖表 每個(gè)js文件用來處理不同的數(shù)據(jù) 我的html頁面要求響應(yīng)式 所以當(dāng)瀏覽器窗口大小發(fā)生變化的時(shí)候 需要每個(gè)圖表也自適應(yīng)變化大小目前 我采取的方式就是 在每個(gè)js文件里邊 當(dāng)畫出圖表的時(shí)候 利用監(jiān)聽窗口大小 來改變 echarts圖表大小 代碼如下：這段代碼在每個(gè)js文件中都寫了

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

以上代碼 當(dāng)html頁面只有一個(gè)echarts圖表的時(shí)候 該圖表可以實(shí)現(xiàn)自適應(yīng) 然而 當(dāng)頁面引入其他js文件 也就是畫出更多的圖表的時(shí)候 就會(huì)出現(xiàn) 只有最后引入的那個(gè)js文件畫出的圖表才會(huì)自適應(yīng)

js引入順序如下：

<script src='http://www.cgvv.com.cn/wenda/lib/js/jquery.js'></script><script src='http://www.cgvv.com.cn/wenda/lib/js/echarts.js'></script><script src='http://www.cgvv.com.cn/wenda/script/internetAction.js'></script><script src='http://www.cgvv.com.cn/wenda/script/onlineTime.min.js'></script><script src='http://www.cgvv.com.cn/wenda/script/systemStyle.min.js'></script><script src='http://www.cgvv.com.cn/wenda/script/onlineCount.min.js'></script><script src='http://www.cgvv.com.cn/wenda/script/bwaLoad.min.js'></script> //只有這一個(gè)才會(huì)自適應(yīng)

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

問題解答

自己已解決

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

可能是因?yàn)閣indow的事件被覆蓋了、每次都是只保留了最后一個(gè)JS中的resize事件、可以考慮把他們的resize事件function內(nèi)部的代碼塊抽到一起

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

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(){ //每個(gè)頁面的代碼都扔這里面})();//如下 ;(function(){var onlineTimeChart = 1;console.log(onlineTimeChart);})(); ;(function(){console.log(onlineTimeChart);//獲取不到onlineTimeChart })();