解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

一、参考链接：https://blog.csdn.net/qq_24313955/article/details/78363981

问题描述：在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡能够正常加载echarts图表，可是切换其余选项的时候不能渲染出其余选项卡echarts图表。（这里暂时未考虑自适应问题）。

因为使用的格式和参考不同，因此本身贴一下，方便本身之后使用。

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

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

具体这里再也不展现。

三、而后呢，在你调用的方法，最下面加上charts.push(chart);便可。

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

四、而后呢，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切换，就能够看到报表能够正常显示了的。

 

待续.....