html5 - 使用echarts中的图表 一个页面导入了好几个js图表 实现echarts图表随着浏览器窗口变化而变化时出现了问题
天蓬老师
天蓬老师 2017-04-17 14:59:34
[HTML讨论组]

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

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(3)
PHP中文网

自己已解决

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

可能是因为window的事件被覆盖了、每次都是只保留了最后一个JS中的resize事件、可以考虑把他们的resize事件function内部的代码块抽到一起

PHP中文网

谢邀。如果你引入两个代码会出现下面这个问题。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 
})();
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号