需要完成的项目效果

官方实例效果

基本思路：

　　首先引入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. Swift学习笔记(1)--基本语法

    1.分号; 1>Swift不要求每个语句后面跟一个分号作为语句结束的标识,如果加上也可以,看个人喜好 2>在一行中写了两句执行语句,需要用分号隔开,比如 let x = 0; printl ...

  2. 【Uva 1601】The Morning after Halloween

    [Link]: [Description] 给你一张平面图; 最多可能有3只鬼; 给出这几只鬼的初始位置; 然后,这几只鬼有各自的终点; 每秒钟,这几只鬼能同时移动到相邻的4个格子中的一个 任意两只鬼 ...

  3. POJ 1014 Dividing 背包

    二进制优化,事实上是物体的分解问题. 就是比方一个物体有数量限制,比方是13,那么就须要把这个物体分解为1. 2, 4, 6 假设这个物体有数量为25,那么就分解为1, 2, 4. 8. 10 看出规 ...

  4. POJ 3592 Instantaneous Transference（强连通+DP）

    POJ 3592 Instantaneous Transference 题目链接 题意:一个图.能往右和下走,然后有*能够传送到一个位置.'#'不能走.走过一个点能够获得该点上面的数字值,问最大能获得 ...

  5. Redis命令学习-Transaction（事务）

    DISCARD ​DISCARD :取消事务,放弃运行事务块内的全部代码.假设在使用WATCH命令监视某个key.则取消监视,等同于UNWATCH. ​返回值:总是返回ok.    ​     ​ ...

  6. Docs-->.NET-->API reference-->System.​Web.​UI.​Web​Controls-->Repeater

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.repeater?view=netframework-4.7 ...

  7. html的学习思维导图

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

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

  9. 【LeetCode-面试算法经典-Java实现】【144-Binary Tree Preorder Traversal（二叉树非递归前序遍历）】

    [144-Binary Tree Preorder Traversal(二叉树非递归前序遍历)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a bina ...

  10. golang 方法内部定义子方法及调用

    package main import ( "fmt" "reflect" ) func out(ch chan int) { <-ch fmt.Prin ...