echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法

首先这种情况,我在网上看到了好多人问,确实也有正解,但是只是说出了其错误出现的原因,并没有给出解决方法。

我也是深受其害,所以呢,在这里记录一下,分享给还在困扰着的你们,迅速找出解决办法。

首先,我先简单介绍一下,我这里出现错误的情境。

原来刚刚遇到这个问题的时候,是在点击多个tab选项之后,出现了地图不显示的情况,然后呢,我就一直在根据打开多个tab之后,地图不显示这个思路进行寻找bug的原因,后来问了问同事,发现原来这个错误的原因,不是因为打开多个tab页面导致的,而是因为打开的多个tab选项其中有一个tab页面中有地图的显示。

当分析到这里的时候,其实已经对于bug,已经分析了一半了,说到这里,想当然的会想到是不是因为两个地图之间有冲突,有共用的东西或者依赖的jar/js文件版本太低等问题,我首先是替换了echarts.js的文件版本问题,发现,并没有什么变化,仍旧是第二个页面没有地图显示,然后我就一直在两个文件冲突的海洋里面遨游,查找了是否有共用的数据源或者变量,后来我在测试的时候,发现打开第一个不能打开第二个,但是先打开第一个可以打开第二个,所以我就把方向转到了两者之间的对比上,最后发现第一个里面设置了时间超时,但是第二个里面没有,测试结果发现:成功,bug解决,但是为什么呢?因为爱情!

我先列举网上说的几种情况,我嘛,遇到的问题只是其中的一种原因所导致的。

①:因为var option={}没有放入ajax请求当中去
②:因为没有设置高度(如果不理解可以继续看③)  
③:因为图表已经加载完毕,但是还没有高度,虽然我已经在两个地图的div中分别设置了高度,但是还是不行(我就是根据这种方法解决的)
解决方案:
上面的加载的时间顺序解释:因为我们写的调用方法是在script中,加载比div中优先,所以出现了加载时间差
我们给script中的调用地图的函数加一个延时调用,这样就会让div先加载,script后加载

setTimeout(
funtion(){
util.buildMap(‘参数一‘,‘参数二‘);
},
100)

下面我就说下我在搜索的时候,遇到很多人都看到的正解,如果你们也遇到这种情况建议参考一下
我是这么做的,供大家参考。
关键就是在tab转换的时候div是没有height的,所有要在标签页显示后有了width和height之后再加载图表。
tab有show.bs.tab和shown.bs.tab两种,要选择shown显示后的

Javascript code

$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {
       // 获取已激活的标签页的名称
       var activeTab = $(e.target)[0].hash;
       if(activeTab=="#day-div") loadDay();//加载图表
       if(activeTab=="#week-div") loadWeek();
       if(activeTab=="#month-div") loadMonth();
       });

原文地址:https://www.cnblogs.com/lguow/p/10019478.html

时间: 2024-10-20 11:02:11

echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法的相关文章

[经使用有效]Sqlserver2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法

sqlserver2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法 最近几天从网上找了几个asp.net的登录案例想要研究研究代码,结果在用 Sql Server2005附加数据库文件时弹出错误信息:如下图: ,一时无解,遂求助于百度谷歌,经过各种试验,特将解决办法整理于此,希望能帮到大家,同时如果有好的意见大家多多交流啊! 方案一:切换登录方式 出现这种情况是由于用“混合验证方式”(SQL Server身份验证)登录数据库造成的,只要将登录方式改为“windows身

SQLServer2005+附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法

SQLServer2005+ 附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法 我们在用Sql SQLServer2005+附加数据库文件时弹出错误信息如下图的处理办法: 方案一:切换登录方式 出现这种情况是由于用"混合验证方式"(SQL Server身份验证)登录数据库造成的,只要将登录方式改为"windows身份验证方式"登录即可解决该问题,附加成功后再换用"混合验证模式"登陆就没问题了. 方案二:修改服务 选择 所有程序

vs2012打开低版本项目时 出现vs2012警告未能加载包“visual c++ package 解决办法

vs2012 打开 vs2010 项目时 提示的 错误信息. 解决办法 是下载一个 vs2012的 一个补丁包 http://www.microsoft.com/en-us/download/details.aspx?id=36020 初次安装成功后,调试 无法启用,关闭,重新打开项目 即可解决! ======ok. [在此谢谢网上提供解决方案的朋友们,谢谢你们!] vs2012打开低版本项目时 出现vs2012警告未能加载包"visual c++ package 解决办法

VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of undefined 主要原因是: 在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定.可以看下 Stackoverflow 的解释: 解决办法: 1.用ES6箭头函数,箭头方法可以和父方法共享变量 2.在请求axios外面定义一下 var that=this 问题

VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

created() { var that=this axios.get('http://jsonplaceholder.typicode.com/todos') .then(function (res) { // handle success // console.log(res); that.todos = res.data }) .catch(function (error) { // handle error console.log(error); }) .finally(function

IOS 切换 Tab 时 百度地图出现会闪动一下

- (void)viewWillAppear:(BOOL)animated {     [super viewWillAppear:animated];     [MobClick beginLogPageView:@"WrapperMainViewController"];      //    [_mapView viewWillAppear]; //注释后消除切换 tab 地图闪现问题     _mapView.delegate = self; // 此处记得不用的时候需要置ni

vs调试时底部输出调试信息“无法查找或打开 PDB 文件”解决办法

用VS调试程序时,有时会在VS底部的“输出”框中提示“无法查找或打开 PDB 文件”.这该怎么解决呢? 下面,我们以VS2013为例,来教大家解决办法. 工具/原料 VS 方法/步骤 打开VS2013,点击菜单“工具”-“选项”.   在选项窗口中,展开“调试”-“常规”,然后在右边的窗格中勾选“启用源服务器支持”.   然后展开“调试”-“符号”,勾选“Windows符号服务器”.   这时,会弹出一个警告对话框,无视点击“确定”即可.   最后,点击“确定”关闭选项窗口.   下面,我们再来

wpf的treeview显示item时候不能stretch的一个解决办法

最近在帮朋友用wpf实现一个功能的时候遇到了treeviewitem总是默认最短的问题(对于我这次的功能是个问题),而且发现在网上很难找到解决办法(挺难的,网上找样式的时候还得要试一试,尤其是刚开始的时候,我真的看不懂wpf的样式代码……,真的跟摸着石头过河的赶脚,这个地方建议还是懵逼状态的朋友用一下blend,会有帮助,就是blend有时候安装的时候可能直接不能用,自己这边好像是把blend的一个开发包删了之后莫名其妙的能用了).但是写代码有时候就是灵光一闪的事情,就在我踏破铁鞋google还

Eclipse部署Maven web项目到tomcat服务器时,没有将lib下的jar复制过去的解决办法

我们在做web开发是,经常都要在eclipse中搭建web服务器,并将开发中的web项目部署到web服务器进行调试,在此,我选择的是tomcat服务器.之前部署web项目到tomcat进行启动调试都很正常,今天突然出现无法启动情况,启动过程报如下错误: java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener at org.apache.catalina.loader.Webap