Echarts 图表放到bootstrap的tabs中只加载第一个tabs内图表

问题：一个页面中使用bootstrap tabs，点击第二个tab，不现实，仍显示第一个tabs中的图表

1.html代码

<div class="panel panel-default">
    <div class="panel-heading">
        <h3>testDemo</h3>
    </div>
    <div class="panel-body">
          <ul class="nav nav-tabs" role="tablist" id="myTab1">
              <li role="presentation" class="active">
                   <a href="#home" aria-controls="home" role="tab" data-toggle="tab">tabs1</a>
              </li>
              <li role="presentation">
                  <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">tabs2</a>
              </li>
          </ul>
          <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="home">
                  <div id="testA" style="height: 450px; background-color: #f1f1f1;">
                          //图表A
                  </div>
              </div>
              <div role="tabpanel" class="tab-pane" id="profile">
                  <div id="testB" style="height: 450px; background-color: #f1f1f1;">
                         //图表B
                  </div>
              </div>
        </div>
    </div>
</div>

2. js代码:使用ajax获取数据，渲染图表

当用bootstrap tabs选项卡时，除了默认显示第一个tab内图表，其他tab内都无图表生成，原因是bootstrap将不显示tab的display设为none，导致图表无法植入。
因此，重置样式，修改如下：

.tab-content > .tab-pane,.pill-content > .pill-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
 }
.tab-content > .active,.pill-content > .active {
        height: auto;
 }

百度后还提供以下解决方案，但测试无效

 // 给tab导航按钮注册事件，让其渲染
$('#myTab1 li a').on('shown.bs.tab', function (e) {
    for (var i = 0; i < arr.length; i++) {
         arr[i].resize();
    }
});
 // 当浏览器窗口大小出现变化时，重新渲染
$(window).resize(function () {
    for (var i = 0; i < arr.length; i++) {
       arr[i].resize();
    }
});

转载于:https://my.oschina.net/u/3578334/blog/1607745