echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
来源:互联网 发布:p正装照软件 编辑:程序博客网 时间:2024/05/16 01:39
首先这种情况,我在网上看到了好多人问,确实也有正解,但是只是说出了其错误出现的原因,并没有给出解决方法。
我也是深受其害,所以呢,在这里记录一下,分享给还在困扰着的你们,迅速找出解决办法。
首先,我先简单介绍一下,我这里出现错误的情境。
原来刚刚遇到这个问题的时候,是在点击多个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显示后的
1
2
3
4
5
6
7
$(
'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();
});
0 0
- echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
- 解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
- 使用Bootstrap tab切换引入echarts图表。第一个tab显示正常,
- 解决Echarts图表在div动态切换时不显示的问题
- 2017_12_05 echarts动态赋值问题,tab切换时,图表显示错乱
- 5分钟上手写ECharts的第一个图表
- echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
- echarts图表显示问题
- 使用echarts显示图表
- echarts显示图表
- echarts图表数据为空的时候不显示气泡
- bootstrap的tab中,echarts 图表宽度设为100%之后,会出现图表宽带变为100px的情况。只有第一个正常
- tab切换重新渲染Echarts图表
- echarts初次使用 显示图表
- Echarts 图表放到bootstrap的tab-panel中不加载
- Echarts 图表放到bootstrap的tab-panel中不加载
- react-native-echarts 安卓版打包后,图表不显示
- easyui的tab切换问题,第一个总显示最后一个
- Sqlserver命令备份恢复数据库
- 对一些 关键词、语句、函数、专业名词 等的解释和理解(一)
- SpringMVC+Html+jquery_easyui做上传文件,带进度条
- grunt压缩js和css文件(1)
- qt之图形视图框架(上)
- echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
- 【ProgrammingMicrosoftAzureServiceFabric】第三章: 有状态服务
- phpstorm webstorm
- 工作中常用的gson解析
- parameter和argument的区别
- android USB gadget框架分析
- request、response 中文乱码问题与解决方式
- JavaScript 以及javaquery 函数自动加载运行
- Android EventBus3.0实例使用详解及封装调用