html5 - 使用echarts中的图表 一个页面导入了好几个js图表 实现echarts图表随着浏览器窗口变化而变化时出现了问题

问题描述

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='https://www.haobala.com/wenda/lib/js/jquery.js'></script><script src='https://www.haobala.com/wenda/lib/js/echarts.js'></script><script src='https://www.haobala.com/wenda/script/internetAction.js'></script><script src='https://www.haobala.com/wenda/script/onlineTime.min.js'></script><script src='https://www.haobala.com/wenda/script/systemStyle.min.js'></script><script src='https://www.haobala.com/wenda/script/onlineCount.min.js'></script><script src='https://www.haobala.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 })();