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();
});
echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法的更多相关文章
- 关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题
在开发过程中遇到这样个问题: 利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示. 其html代码为: < ...
- Sqlserver2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法
Sqlserver2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法 最近几天从网上找了几个asp.net的登录案例想要研究研究代码,结果在用 Sql Server2005附 ...
- SQLServer2005+附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法
SQLServer2005+ 附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法 我们在用Sql SQLServer2005+附加数据库文件时弹出错误信息如下图的处理办法: 方案一: ...
- [经使用有效]Sqlserver2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法
sqlserver2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法 最近几天从网上找了几个asp.net的登录案例想要研究研究代码,结果在用 Sql Server2005附 ...
- 运行WampServer时,提示Exception Exception in module wampmanager.exe at 000F15A0.解决办法
出现问题:运行WampServer时,提示Exception Exception in module wampmanager.exe at 000F15A0.解决办法 出现问题原因: ①:缺少Visu ...
- Web端的Tab控件在切换Tab时Load数据出错的处理
我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错 ...
- Nested Loops join时显示no join predicate原因分析以及解决办法
本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...
- 2015.2.16 关于delphi web控件打开新网页时弹出关闭页面(js代码)出错的解决办法研究
参考网址1:http://www.csharpwin.com/csharpspace/2360.shtml...参考网址2:http://www.oschina.net/question/234345 ...
- 执行mount命令时找不到介质或者mount:no medium found的解决办法
使用vmware时,在虚拟机设置里,设置CD/DVD为系统镜像,挂载时,有时会有找不到介质或者no medium found之类的提示. 根本原因是iso镜像并没有加载到虚拟机系统内. 解决办法: 首 ...
随机推荐
- 关于Linux虚拟化技术KVM的科普 科普四(From humjb_1983)
另一组关于KVM的分析文档,虚拟化相关概念.KVM基本原理和架构一-概念和术语.KVM基本原理和架构二-基本原理.KVM基本原理及架构三-CPU虚拟化.KVM基本原理及架构四-内存虚拟化.KVM基本原 ...
- win7 telnet命令无法开启的解决方案(不是内部命令或外部命令)
如果你想在win 7上直接使用 telnet命令,却不能开启那怎么办呢?记得在Wingdows XP上telnet都是已经安装好的,直接就可用,但是Win7是没有这个功能的,都需要后来自己安装的,下面 ...
- 理解主从设备模式(Master-Slave)
前言 在给定上下文的软件体系结构中,为了解决某些经常出现的问题而形成的通用且可重用的解决方案称之为架构模式,而常见的体系架构模式主要有以下十种 分层模式 客户端-服务器模式 主从设备模式 管道-过滤器 ...
- Python读取文件时输入文件绝对路径报错
问题描述 读取本地文件,输入绝对路径时出错,显示数据被截断. 最开始以为是转译错误,因为eclipse会自动把\变成\\, pycharm这里没有,就手动改一下.结果还是不行. 根本原因 文件名出错了 ...
- 关于Random(47)与randon.nextInt(100)的区别
参考https://blog.csdn.net/md_shmily92/article/details/44059313 相关文章random.nextInt()与Math.random()基础用法 ...
- 解锁 vmware esxi 6.7 并安装 mac os 10.13
1.安装 esxi 6.7 2.下载 unlocker 2.1.1.zip 3.上传 unlocker 2.1.1.zip esxi的磁盘中 4.开启esxi的ssh登录 5.使用 ssh 登录 es ...
- 配置(迁移)Laravel的注意事项
1.如果Laravel是在Linux下运行,如果权限不足,会报错 2.如果是从git上clone下来的项目,需要安装composer,切到项目根目录下 composer install compose ...
- 什么?云数据库也能C位出道?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 是的,你没有看错.腾讯智造,新一代云数据库CynosDB,"C"位出道了! CynosDB是腾讯云自研的新一代高性能高可 ...
- 这么用Mac才叫爽!
用了近一年的 Macbook Pro,已经离不开它了.真是生活工作学习必备之良品啊. 如果你将要买苹果电脑或者刚买,那么不妨看看此文.推荐一些个人觉得好用的软件,而Mac本身的使用技巧----触控板. ...
- css中常见margin塌陷问题之解决办法
塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <d ...