需要完成的项目效果

官方实例效果

基本思路：

　　首先引入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. snmpd修改端口

    http://blog.csdn.net/cau99/article/details/5077239 http://blog.csdn.net/gua___gua/article/details/48 ...

  2. CODEVS——T 1404 字符串匹配

    http://codevs.cn/problem/1404/ 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Desc ...

  3. 利用gradle加入构建版本

    在java的程序中,貌似都没有这个构建版本的概念.用的诸如eclipse. idea和android studio的IDE也没有直接提供构建版本的选项.只是我却想在android程序的版本其中加入一个 ...

  4. hdu4253 Two Famous Companies --- 二分+MST

    给n个点.m条边的图.每条边要么属于a公司,要么属于b公司.要求一颗最小生成树,条件是当中属于a公司的边数为k. 这题做法非常巧妙. 要求最小生成树,但有一定限制,搜索.贪心显然都不正确. 要是能找到 ...

  5. SpringBoot与Dubbo的整合-zookeeper和监控中心搭建

    对于Dubbo的应用已经是十分普遍,自从阿里巴巴开源以来,国内许多公司就采用了dubbo的架构来开发项目.不过再dubbo十分火的时候,突然就停止更新了, 只有当当网还在其基础进行了拓展(dubbox ...

  6. sql server 怎样用select语句调用自定义表值函数

    --自定义函数的参数是表的字段,这种情况要用cross apply啦Select B.* FROM [master].[dbo].[分列测试] A cross apply dbo.f_split(应用 ...

  7. Python 3 与"Hello World!"

    Python 3 版本 Python的3.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级.为了不带入过多的累赘,Python 3.0在设计的时 ...

  8. 阿里云 Ubuntu14.04 升级 python3.4 到 python 3.5/6

    买的阿里云服务器给的系统是Ubuntu14.04,里面装的Python3版本是Python3.4,本来也没什么,但是这个版本的Python安装flask和django各种报错,所以只好升级Python ...

  9. ST和LCA和无根树连接

    #include <stdio.h> #include <iostream> #include <string.h> #include <algorithm& ...

  10. <memory>（包括了auto_ptr，shared_ptr等各种指针）

    Memory elements This header defines general utilities to manage dynamic memory: Allocators allocator ...