echarts切换tab时，第一个图表显示，第二个图表不显示的解决办法 |
您所在的位置：网站首页 › echarts切换 › 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显示后的
$( '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(); });
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |