1、参考连接:IT虾米网

问题描述:在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。(这里暂时未考虑自适应问题)。

由于使用的格式和参考不一样,所以自己贴一下,方便自己以后使用。

2、在js文件页面最上面定义一个js数组。如var charts = new Array();
因为我的主页是根据$(function(){  ..... })。
然后在里面.....位置写了如下所示的,使用调用方法进行处理的。

chart5 = ec.init(document.getElementById('chart5')); 
barChart2(data2, chart5, "xxxx");

具体这里不再展示。

3、然后呢,在你调用的方法,最下面加上charts.push(chart);即可。

chart.setOption(memoryOption, true); 
charts.push(chart);

4、然后呢,js文件最后面加上如下所示代码即可。

 1 //解决切换tab,非默认的柱状图表格不显示问题 
 2 $(function(){ 
 3     //console.log(charts);//打印显示是否添加进去 
 4     $(window).resize(function() { 
 5         for(var i = 0; i < charts.length; i++) { 
 6             charts[i].resize(); 
 7         } 
 8     }); 
 9      
10     //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择。我使用的是data-toggle="tab"。 
11     //解决tab切换不显示问题 在加载窗口后重新渲染。 
12     $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { 
13         for(var i = 0; i < charts.length; i++) { 
14             charts[i].resize(); 
15         } 
16     }); 
17      
18 })

然后呢,你点击你的tab切换,就可以看到报表可以正常显示了的。

待续.....


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

echarts的地图点击事件知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。