需要完成的项目效果

官方实例效果

基本思路：

　　首先引入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>

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

echarts3.0 仪表盘实例更改完成占用率实例的更多相关文章

  1. asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送

    先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...

  2. 一次线上redis实例cpu占用率过高问题优化（转）

    前情提要: 最近接了大数据项目的postgresql运维,刚接过来他们的报表系统就出现高峰期访问不了的问题,报表涉及实时数据和离线数据,离线读pg,实时读redis.然后自然而然就把redis也挪到我 ...

  3. redis实例cpu占用率过高问题优化

    目录 一.简介 一.简介 前情提要: 最近接了大数据项目的postgresql运维,刚接过来他们的报表系统就出现高峰期访问不了的问题,报表涉及实时数据和离线数据,离线读pg,实时读redis.然后自然 ...

  4. Linux下如何查看高CPU占用率线程

    转于:http://www.cnblogs.com/lidabo/p/4738113.html 目录(?)[-] proc文件系统 proccpuinfo文件 procstat文件 procpidst ...

  5. 解决服务器上 w3wp.exe 和 sqlservr.exe 的内存占用率居高不下的方案

    SQL Server是如何使用内存 最大的开销一般是用于数据缓存,如果内存足够,它会把用过的数据和觉得你会用到的数据统统扔到内存中,直到内存不足的时候,才把命中率低的数据给清掉.所以一般我们在看sta ...

  6. Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算

    目录(?)[-] proc文件系统 proccpuinfo文件 procstat文件 procpidstat文件 procpidtasktidstat文件 系统中有关进程cpu使用率的常用命令 ps ...

  7. IIS解决CPU和内存占用率过高的问题

    发现进程中的w3wp占用率过高. 经过查询,发现如下: w3wp.exe是在IIS(因特网信息服务器)与应用程序池相关联的一个进程,如果你有多个应用程序池,就会有对应的多个w3wp.exe的进程实例运 ...

  8. 解决 oracle IO占用率很高的问题

    突然user io占用率很很高,看了一个AWR报告,发现direct path read temp,direct path write temp的的数率很高,后来怀疑是临时表空间不够了,就试着设了一下 ...

  9. 如何检查oracle的归档日志及空间占用率,清除归档日志

    如何解决“归档日志已满问题” 问题描述: 所用数据库为 Oracle 10g ,模式为归档模式,oracle 系统默认的归档空间为2G,由于日志过多,空间写满,数据库的redo文件不能归档,而出现or ...

随机推荐

  1. 2018上半年GitHub上最热门的开源项目

    关注GitHub的人都知道,这个平台上面有太多优秀的值得学习的开源项目了,这里总结了2018上半年GitHub上最热门的开源项目. 1: tensorflow https://github.com/t ...

  2. jQuery11 data() : 数据缓存

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. vim 基础学习之可视模式

    1. 选择模式这个模式必须通过可视模式进入.在可视模式下,我们通过 <C-g>来把我们的可视选中块作为选择模式下的操作块. 这时候我们输入可见字符,就会把这个块给覆盖掉.例如aaa bbb ...

  4. 57.NodeJS入门--环境搭建 IntelliJ IDEA

    转自:https://blog.csdn.net/wang19891106/article/details/51127133 NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习N ...

  5. mvc表单Form提交 --实体

    1.方式1:字段加验证 @model MvcWeb.Models.UserInfo @{ ViewBag.Title = "Add"; } <h2>Add</h2 ...

  6. 计算加班类型以及小时数(js)

    function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 startTime ...

  7. HDU 6182 A Math

    A Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  8. flask使用第三方云通讯平台时，出现{'172001':'网络错误'}解决方法

    问题描述:flask使用第三方云通讯平台时,出现{'172001':'网络错误'} 解决方法: 在sms.py文件中添加如下代码 import ssl # 取消证书验证ssl._create_defa ...

  9. [REASONML] Using Javascript npm package from REASON

    For example, we want to use moment.js inside our ReasonML code. What we can do is create a module fi ...

  10. OpenStack_Swift源代码分析——ObjectReplicator源代码分析(1)

    1.ObjectorReplicator的启动 首先执行启动脚本 swift-init object-replicator start 此执行脚本的执行过程和ring执行脚本执行过程差点儿相同.找到s ...