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="lib/js/jquery.js"></script>
<script src="lib/js/echarts.js"></script>
<script src="script/internetAction.js"></script>
<script src="script/onlineTime.min.js"></script>
<script src="script/systemStyle.min.js"></script>
<script src="script/onlineCount.min.js"></script>
<script src="script/bwaLoad.min.js"></script> //只有这一个才会自适应

2.总结：
综合以上 我想了很多原因 但是还是解决不了问题 没有模板和框架 也忽略打包工具 希望有知道的可以给我解决一下 谢谢

解决方案

自己已解决

    searchWordChart.setOption(option);
    window.addEventListener("resize", function () {
        setTimeout(function () {
            searchWordChart.resize();
        }, 500)
    });

这篇关于html5 - 使用echarts中的图表 一个页面导入了好几个js图表 实现echarts图表随着浏览器窗口变化而变化时出现了问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！