我們在使用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>