echarts3.0 仪表盘实例更改完成占用率实例

需要完成的项目效果

官方实例效果

 

 基本思路：

　　首先引入jquery和echarts3.0库。

　　需要两个仪表盘，一个仪表盘是纯色灰色，在底部。startAngle 和endAngle永远是最大值，默认为225到-45。

　　另外一个仪表盘渐变色，在上面，此仪表盘不需要指针，value值永远是100。startAngle 是起点位置，默认为225。因此只需要控制endAngle的位置，就可以了。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>银联行业代付平台数据监控</title>
	<script src="./jquery.js"></script>
</head>
<body>
	<div id="wrap">
		<div id="main" style="width: 240px;height:240px;"></div>
		<div><img id="linear-pic" style="display: none;" src="./jb.png" alt=""></div>
		<div id="main2" style="width: 240px;height:240px;"></div>
		<div><img id="linear-pic2" style="display: none;" src="./jb.jpg" alt=""></div>
	</div>
	<style>
		#wrap{
			width: 240px;height: 240px;
			position: relative;
		}
		#wrap div{width: 100%;height: 100%;}
		#wrap #main,#wrap #main2{position: absolute;top: 0;left: 0;;}
		#wrap #main{z-index:2}
		#wrap #main2{z-index:1}
	</style>
</body>
<script src="./echarts.min.js"></script>
<script>
	M(90);
	function M(val){
		var startAngle = 225;
		var endAngle = -45;
		var end = 0;
		var L = (startAngle - endAngle)/100;
		end = startAngle - val*L;
		
		function option(obj){
			var series = { 
				name: '业务指标',
				type: 'gauge',
				splitNumber: 1,
				startAngle: obj.startAngle,
				endAngle: obj.endAngle,
				title:{
					show:obj.titleShow
				},
				axisLine: {
					lineStyle: {
						width: 20,
						// 透明度设置为0
						opacity: 0
					}
				},
				splitLine: {
					show: false
				},
				axisTick: {
					length: 20,
					splitNumber: 300,
					lineStyle: {
						color: {
							image: obj.image,
							repeat: 'no-repeat'
						},
						width: 5
					}
					
				},
				axisLabel:{show:obj.axisLabelShow},
				// 指针样式
				itemStyle: {},
				detail: {show:obj.deTailShow,formatter:'{value}%'},
				data: [{value: obj.value, name: '完成率'}]
			};
			if(obj.pointer===false){
				series.pointer = false;
			}
			return  {
				tooltip : {
					formatter: "{a} <br/>{b} : {c}%"
				},
				toolbox: {
					feature: {
						restore: {},
						saveAsImage: {}
					}
				},
				series:  [series]
			}
		};
		echarts.init(document.getElementById('main'))
		.setOption(option({
			startAngle:startAngle,
			endAngle:end,
			deTailShow:false,
			axisLabelShow:false,
			titleShow:true,
			value:100,
			image:document.getElementById('linear-pic')
		}), true);

		echarts.init(document.getElementById('main2'))
		.setOption(option({
			startAngle:startAngle,
			endAngle:endAngle,
			deTailShow:true,
			axisLabelShow:false,
			titleShow:false,
			value:val,
			pointer:false,
			image:document.getElementById('linear-pic2')
		}), true);
	}
</script>
</html>

　　注意：根据画布大小，需要给两个仪表盘准备背景图。

 

posted @ 2019-01-07 11:49  芙蓉0504  阅读(2725)  评论(0)    收藏  举报