1、效果
2、代碼(自定義依賴包路徑)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>圖表選項卡</title>
<link rel="stylesheet" href="bootstrap.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
</head>
<style type="text/css">
.myTable-container {
width: 800px;
height: 430px;
}
</style>
<body>
<div class="container" style="padding-top: 5%; padding-left: 10%">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab3</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active" id="tab1">
<div id="tab1-container" class="myTable-container"></div>
</div>
<div class="tab-pane " id="tab2">
<div id="tab2-container" class="myTable-container"></div>
</div>
<div class="tab-pane " id="tab3">
<div id="tab3-container" class="myTable-container"></div>
</div>
</div>
</div>
<script>
var $tab1 = document.getElementById('tab1-container');
var $tab2 = document.getElementById('tab2-container');
var $tab3 = document.getElementById('tab3-container');
/* 折線圖 */
var tab1Option = {
xAxis : {
type : 'category',
data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
},
yAxis : {
type : 'value'
},
series : [ {
data : [ 820, 932, 901, 934, 1290, 1330, 1320 ],
type : 'line'
} ]
};
/* 餅圖 */
var tab2Option = {
title : {
text : '某站點用戶訪問來源',
subtext : '純屬虛構',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
left : 'left',
data : [ '直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎' ]
},
series : [ {
name : '訪問來源',
type : 'pie',
radius : '55%',
center : [ '50%', '60%' ],
data : [ {
value : 335,
name : '直接訪問'
}, {
value : 310,
name : '郵件營銷'
}, {
value : 234,
name : '聯盟廣告'
}, {
value : 135,
name : '視頻廣告'
}, {
value : 1548,
name : '搜索引擎'
} ],
itemStyle : {
emphasis : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
} ]
};
/* 柱圖 */
var tab3Option = {
xAxis : {
type : 'category',
data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
},
yAxis : {
type : 'value'
},
series : [ {
data : [ 120, 200, 150, 80, 70, 110, 130 ],
type : 'bar'
} ]
};
/* 初始化tab1的 */
var tab1Table = echarts.init($tab1);
tab1Table.setOption(tab1Option);
/* shown.bs.tab爲tab選項卡高亮 */
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
/* 獲取已激活的標籤頁的名稱 */
/* hash 屬性是一個可讀可寫的字符串，該字符串是 URL 從 # 號開始的部分 */
var activeTab = $(e.target)[0].hash;
/* 當相應的標籤被點擊時，進行對應的圖表渲染 */
if (activeTab == "#tab2") {
/* 釋放圖表實例，使實例不可用,不加上這個，會報錯： */
/* there is a chart instance already initialized on the dom */
echarts.dispose($tab2);
var tab2Table = echarts.init($tab2);
tab2Table.setOption(tab2Option);
} else if (activeTab == "#tab3") {
echarts.dispose($tab3);
var tab3Table = echarts.init($tab3);
tab3Table.setOption(tab3Option);
}
});
</script>
</body>
</html>