169Echarts - 仪表盘(Gauge)

效果图

169Echarts - 仪表盘(Gauge)

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
		<div id="main" style="width: 1024px;height:768px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom,初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;
			option = {
				tooltip: {
					formatter: "{a} <br/>{b} : {c}%"
				},
				toolbox: {
					feature: {
						restore: {},
						saveAsImage: {}
					}
				},
				series: [{
					name: '业务指标',
					type: 'gauge',
					detail: {
						formatter: '{value}%'
					},
					data: [{
						value: 50,
						name: '完成率'
					}]
				}]
			};

			setInterval(function() {
				option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
				myChart.setOption(option, true);
			}, 2000);

			myChart.setOption(option);
		</script>
	</body>

</html>