echartsjs 饼图、柱状图、折线图实例

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>图表选项卡</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	</head>
	<style type="text/css">
	.myTable-container {
	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">月度数据</a></li>
	<li><a href="#tab2" data-toggle="tab">车间数据</a></li>
	<li><a href="#tab3" data-toggle="tab">员工数据</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 = {
	title : {
	text : '2019年月度数据图表',
	subtext : '2019/12/29',
	x : 'center'
	},
	xAxis : {
	type : 'category',
	data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	},
	yAxis : {
	type : 'value'
	},
	series : [ {
	data : [ 820, 932, 901, 934, 1290, 1330, 1320 ],
	type : 'line'
	} ]
	};

	/* 饼图 */
	var tab2Option = {
	title : {
	text : '四个车间数据图表',
	subtext : '2019/12/29',
	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 : 896,
	name : '第五车间'
	}, {
	value : 771,
	name : '第六车间'
	} ],
	itemStyle : {
	emphasis : {
	shadowBlur : 10,
	shadowOffsetX : 0,
	shadowColor : 'rgba(0, 0, 0, 0.5)'
	}
	}
	} ]
	};

	/* 柱图 */
	var tab3Option = {
	tooltip : {
	trigger : 'item',
	formatter : "{a} <br/>{b} : ￥{c} "
	},
	xAxis : {
	type : 'category',
	data : [ '孙健', '付丽丽', '李科', '吴明轩', '孙楠', '邢安媛', '莫西宇', '孙楠', '邢安媛', '莫西宇' ]
	},
	yAxis : {
	type : 'value'
	},
	series : [ {
	name : '员工数据',
	data : [ 120, 200, 150, 80, 70, 110, 230.15,400.11,236.56,303.25 ],
	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>

https://www.echartsjs.com/examples/zh/index.html