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

问题：一个页面中使用bootstrap tabs，默认只显示第一个tabs的图表，其余tabs内图表不显示

1.html代码

<div class="panel panel-default">
<div class="panel-heading">
<h3>testDemo</h3>
</div>
<div class="panel-body">
<div>
<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;">
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="testB" style="height: 450px; background-color: #f1f1f1;">
</div>
</div>
</div>
</div>
</div>
</div>

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();
}
});