bootstrap+echarts选项卡切换图表

迷南。 2021-06-11 15:12 565阅读 0赞

1、效果

![70][]

![70 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>

[70]: /images/20210606/89efd63ce9ce44999f6d1ed46749a489.png
[70 1]: /images/20210606/662b262030be44739d986df4ff4db9eb.png