需要完成的项目效果

官方实例效果

基本思路：

　　首先引入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. Yum数据库错误

    使用yum时提示数据库错误: /var/lib/rpm... open... db4 error from db->close:... 解决办法: 1.删除/var/lib/rpm目录下的__d ...

  2. 71.用express框架，出现 express.Router is not a function

    Express版本太久

  3. CSS盒子模型图

    下面这张图,是W3C标准的CSS盒子模型: 由上图可以清楚的看出各个部分的CSS属性.

  4. 深入理解Android（2）——理解Android中的JNI（中）

    阳光小强参加了CSDN博客之星评选,如果你觉得阳光小强的博客对你有所帮助,为小强投上一票吧:http://vote.blog.csdn.net/blogstar2014/details?usernam ...

  5. Windows共享上网的详细设置

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在Windows环境下在A和B在同一个局域网上,A机子可以上网,B机子可以通过A机子可以通过设置的网络共享来上网.其中 ...

  6. 配置Lotus Domino集群视频详解

    IBM Lotus Domino Server 有个最重要的高可用特新就是集群,它对于任何使用 Domino 服务器的组织,让用户能够持续访问它们的数据库,保证业务不间断运行.下面通过两个视频来学习如 ...

  7. javafx checkbox

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  8. deep-in-es6(七)

    Symbols对象 JavaScript的第七种原始类型 以前的数据类型: Undefined 未定义 Null 空值 Boolean 布尔类型 Number 数字类型 String 字符串类型 Ob ...

  9. 【Mysql】将Excel表导入至Mysql的当中一张表

    如果表格有A(整型字段).B(整型字段).C(字符串数据)三列数据,希望导入到Mysql中数据库中表格table.table中须要插入的字段各自是col1,col2,col3 1.在随意一列,如果在D ...

  10. [Java开发之路]（16）学习log4j日志

    1. 新建一个Javaproject.导入Jar包(log4j-1.2.17.jar) Jar包下载地址:点击打开链接 2. 配置文件:创建并设置log4j.properties # 设置 log4j ...