bootstrap tab页点击时echarts图表不显示解决

我们在使用tab页面时点击任一存在echarts绘制的图表的tab，tab页面显示为空白，此时我们需要将该tab页面的图表手动的resize()一下，此时图表就会重新绘制一次，进而解决了图表不显示的问题

---

js代码：

var barChart = null;
var pieChart = null;
var charts = [];
$(function(){
	
	initCharts();
	//解决tab标签点击时图表不显示问题
	$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
		 for(var i = 0; i < charts.length; i++) {
			 charts[i].resize();
		 }
	});
});
//初始化图表
function initCharts(){
    barChart = echarts.init(document.getElementById('bar')); 
    pieChart = echarts.init(document.getElementById('pie')); 
    initBar(barData);
    initPie(pieData);
    charts.push(barChart);
    charts.push(pieChart);

}
//初始化柱状图
function initBar(data){
    //TODO
}
//初始化饼图
function initPie(data){
    //TODO
}

HTML代码：

   <div class="row">
       <div class="col-sm-12">
       		<div class="block-flat">
	       		<ul id="statisticalAnalysisTab" class="nav nav-tabs">
					<li class="active">
						<a href="#tablesTab" data-toggle="tab">
							 统计表格
						</a>
					</li>
					<li><a href="#chartsTab" data-toggle="tab">统计图</a></li>
				</ul>
				<div id="statisticalAnalysisTabContent" class="tab-content">
					<div class="tab-pane fade in active" id="tablesTab">
						<div style="margin-top: 20px;padding-left: 10px; padding-right: 10px;">
							<table id="autoTable" style="text-align: center;" class="table table-bordered table-striped table-hover table-condensed">
								
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="chartsTab">
						<div class="page-content">
							<div class="row">
					            <div class="col-sm-12">
					                <div class="block-flat">
						                <div class="content">
						                  	<div id="bar" style="height:400px"></div>
						                </div>
					                </div>
					            </div>
					        </div>
					        <div class="row" style="margin-bottom: 40px;">
					            <div class="col-sm-12">
					                <div class="block-flat">
						                <div class="content">
						                	<div id="pie" style="height:400px"></div>
						                </div>
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>
	</div>