开发成功-cpu-mem监控动态折线图--dom esayui js java
jsp
-------------------------------------------------------------------------------------------
-------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style type="text/css">
hr{margin: 20px 20px;}
#main_monitor{
background-color: #F7F7F7;
}
#head_monitor{
margin:10px auto;
width: 90%;
height: 20%;
background-color: #F9F9D4;
text-align: center;
font-size: 16px;
}
#body_monitor{
margin:5px auto;
width:100%;
height: 80%;
text-align: center;
background-color: #F7F7F7;
}
.unit_monitor{
text-align: center;
margin:10px auto;
padding:10px;
width: 85%;
height:300px;
border: 1px solid #3897C5;
}
</style>
<div id="main_monitor">
<div id="head_monitor" >
<span>服务器类型</span>
<input>
<span>IP地址</span>
<input id="ip">
<span></span>
<input>
</div>
<hr>
<div id="body_monitor">
<div id="cpu_monitor" class="unit_monitor">
</div>
<div id="mem_monitor" class="unit_monitor">
</div>
<div id="disk_monitor" class="unit_monitor">
</div>
<div id="net_monitor" class="unit_monitor">
</div>
</div> <script type="text/javascript" src="<%=request.getContextPath() %>/ptsjs/monitor.js"></script>
</div>
------------------------------------------------------------------------------------
js
-------------------------------------------------------------------------------------------
$(function(){
require.config({
paths: {
echarts: 'js/chart'
}
});
var interval = 10;
var switch_monitor = true;
var first = 1;
var times = 1;
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart_cpu = ec.init(document.getElementById('cpu_monitor'));
var myChart_mem = ec.init(document.getElementById('mem_monitor'));
series_cpu = new Array();
series_mem = new Array();
var series_cpu_data={};
var series_mem_data={};
var series_m={};//额外为mem创建一个对象，用来初始化接受ajax请求返回的data中的series
/*series_cpu_data_0 = new Array();
series_mem_data_0 = new Array();
series_cpu_data_1 = new Array();
series_mem_data_1 = new Array();*/
xAxis_data = new Array();
console.log("------------------------------------------------------1---");
ips = {"ip":["10.118.218.50","10.118.218.51","10.118.218.52"]};
console.log("-------------------------------------------------------2--");
/* ips = JSON.parse(ips);
ips = eval("("+ips+")");*/
console.log("-------------------------------------------------------3--");
/*for(var i=0;i<ips.ip.length;i++){
console.log("-------------------------------------------------------4--");
series_cpu_data[i]=new Array();
console.log("-------------------------------------------------------4.1--");
series_mem_data[i]=new Array();
console.log("-------------------------------------------------------4.2--");
}*/
for(var i in ips.ip){
var s = ips.ip[i];
console.log("-------------------------------------------------------4--");
series_cpu_data[s]=new Array();
console.log("-------------------------------------------------------4.1--");
series_mem_data[s]=new Array();
console.log("-------------------------------------------------------4.2--");
series_m[s]={};//用于存储mem_option中的的series结构，避免出现冲突。
}
console.log("-------------------------------------------------------5--"+JSON.stringify(series_cpu_data)+" "+JSON.stringify(series_mem_data));
ips = JSON.stringify(ips);
console.log("-------------------------------------------------------6--");
var cpu_mem_monitor = function(){
console.log("\n---ips: "+ips);
legend_data = new Array();
var req_time=getDate();
$.ajax({
url : "getCpuMemData/"+interval+"/"+times+"/"+req_time,
type : "POST",
contentType : 'application/json;charset=UTF-8',
data : ips,
dataType : 'json',
success:function(resData, status){
if(resData != ""){
console.log("---------------------------------------------------------");
console.log("start...option....."+JSON.stringify(cpu_option));
console.log("\n resData : "+JSON.stringify(resData));
xAxis_data.push(resData.xAxis_data);
//j用来控制多个ip时，分别用来取该ip对应的series.data数据
var j=0;
for(var s in resData.ip){
console.log("s : "+s);
legend_data.push(s);
console.log("series....."+JSON.stringify(resData.ip[s].series)+" times :"+times);
console.log("series_data....."+JSON.stringify(resData.ip[s].series_data));
//分别获取cpu和mem数据
series_cpu_data[s].push(resData.ip[s].series_data.cpu_total);
series_mem_data[s].push(resData.ip[s].series_data.mem_util);
console.log("series_cpu_data["+s+"]....."+series_cpu_data[s]);
console.log("series_mem_data["+s+"]....."+series_mem_data[s]);
//为series_mem赋值
//获取cpu和mem的series结构以及填充该结构的data值
if(times == 1){
console.log("resData.ip[s].series....."+JSON.stringify(resData.ip[s].series));
for(var ss in resData.ip[s].series ){
console.log("resData.ip[s].series+"+ss+" "+resData.ip[s].series[ss]);
}
//mem图标中分别为不同ip，添加对应的series
for(var str in resData.ip[s].series){
series_m[s][str]=resData.ip[s].series[str];
console.log("++++++series_m["+s+"]....."+JSON.stringify(series_m[s]));
}
console.log("series_m....."+JSON.stringify(series_m));
series_cpu.push(resData.ip[s].series);
series_mem.push(series_m[s]);
}
console.log("series_cpu....."+JSON.stringify(series_cpu));
console.log("series_mem....."+JSON.stringify(series_mem));
series_cpu[j].data=series_cpu_data[s];
console.log("series_cpu_data["+j+"]....."+series_cpu_data[s]);
console.log("series_cpu["+j+"]. ....0."+series_cpu[j].data);
console.log("series_cpu....0."+JSON.stringify(series_cpu));
console.log("series_mem....0."+JSON.stringify(series_mem));
series_mem[j].data=series_mem_data[s];
console.log("series_mem_data["+j+"]....."+series_mem_data[s]);
console.log("series_mem["+j+"].data....."+series_mem[j].data);
console.log("series_cpu["+j+"]......1."+series_cpu[j].data);
console.log("series_cpu....1."+JSON.stringify(series_cpu));
console.log("series_mem....1."+JSON.stringify(series_mem));
console.log("****xAxis_data : "+xAxis_data);
console.log("0 legend_data "+legend_data);
console.log("0 xAxis_cpu_data "+xAxis_data);
console.log("0 series_cpu_data "+series_cpu_data[s]);
console.log("0 series_mem_data "+series_mem_data[s]);
console.log("0 series_cpu.data "+series_cpu[j].data);
console.log("0 series_mem.data "+series_mem[j].data);
console.log("series_cpu....."+JSON.stringify(series_cpu));
console.log("series_mem....."+JSON.stringify(series_mem));
j++;
//成功获取数据后，请求次数累加
}
}else{
clearInterval(timer_1);
clearInterval(timer_2);
}
console.log("************************************************************");
console.log("1 legend_data "+legend_data);
console.log("1 series_cpu :"+series_cpu+"\n series_mem "+series_mem);
},
statusCode:{
404:function(){
console.log("laile ");
clearInterval(timer_1);
clearInterval(timer_2);
},
500:function(){
console.log("laile ");
clearInterval(timer_1);
clearInterval(timer_2);
},
405:function(){
console.log("laile ");
clearInterval(timer_1);
clearInterval(timer_2);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("----XMLHttpRequest.status------"+XMLHttpRequest.status);
console.log("----XMLHttpRequest.readyState------"+XMLHttpRequest.readyState);
console.log("----textStatus------"+textStatus);
//通常情况下textStatus和errorThrown只有其中一个包含信息
console.log(this); //调用本次ajax请求时传递的options参数
clearInterval(timer_1);
clearInterval(timer_2);
$.messager.alert('警告','获取监控数据失败，请检查网络或者查看该ip是否存于后台数据库');
}
});
//cpu统计
cpu_option = {
title : {
text: 'CPU资源使用监控',
subtext: '性能环境'
},
tooltip: {
show: true
},
legend: {
data:[] //"10.118.218.50"
},
dataZoom: {
show: true
},
xAxis : [
{
name : '时间',
nameLocation : 'end' ,
nameGap : 10,
type : 'category',//category time
data :[]//["10","15","20","25","30","35",'40','45','50','55','60','65','70']
}
],
yAxis : [
{
name : 'CPU 利用率(单位：%)',//
nameLocation : 'end' ,
nameGap :20,
//splitNumber :5,
type : 'value'
}
],
series : [] //[{"name":"10.118.218.50","data":["5","10","5","10","5","10","5","10"],"type":"line"}]
/*series : [
{
"name":"10.118.218.50",
"type":"line",
"data":['5', '20', '40', '10', '10', '20']
},
{
"name":"10.118.218.51",
"type":"line",
"data":['15', '30', '50', '20', '18', '28']
},
{
"name":"10.118.218.52",
"type":"line",
"data":['25', '20', '40', '27', '65', '36']
}
]*/
};
//mem统计
mem_option = {
title : {
text: 'MEM资源使用监控',
subtext: '性能环境'
},
tooltip: {
show: true
},
legend: {
data:[] //"10.118.218.50"
},
dataZoom: {
show: true
},
xAxis : [
{
name : '时间',
nameLocation : 'end' ,
nameGap : 10,
type : 'category',//category time
data :[]//["10","15","20","25","30","35",'40','45','50','55','60','65','70']
}
],
yAxis : [
{
name : 'MEM 利用率(单位：%)',//
nameLocation : 'end' ,
nameGap :20,
//splitNumber :5,
type : 'value'
}
],
series : [] //[{"name":"10.118.218.50","data":["5","10","5","10","5","10","5","10"],"type":"line"}]
};
//检查数据是否获取
timer_2=setInterval(checkData,5000);
function checkData(){
//档xAxis_data不为空时则此时可以朝图标灌入数据
if(xAxis_data.length >0){
console.log("来了："+legend_data+" "+xAxis_data);
//设置处理后的值到option中
cpu_option.legend.data = legend_data;
cpu_option.xAxis[0].data =xAxis_data;
cpu_option.series=series_cpu;
mem_option.legend.data = legend_data;
mem_option.xAxis[0].data =xAxis_data;
mem_option.series=series_mem;
// for(var i=0;i<series_cpu.size;i++){
// option.series[i]=series_cpu[i];
// }
console.log("4"+JSON.stringify(cpu_option.legend));
console.log("4 "+JSON.stringify(cpu_option.series));
console.log("************* "+JSON.stringify(cpu_option.series));
console.log("++++\n"+JSON.stringify(cpu_option));
console.log("----\n"+JSON.stringify(mem_option));
// 为echarts对象加载数据
myChart_cpu.setOption(cpu_option);
myChart_mem.setOption(mem_option);
clearInterval(timer_2);
//页面开关，当停止监控时，不再发起监控请求。
if(!switch_monitor){
clearInterval(timer_1);
}
times++;
}
};
console.log("5 legend_data "+legend_data);
console.log("5 series_cpu_data "+JSON.stringify(series_cpu_data));
};
if(switch_monitor){
if(first == 1){
cpu_mem_monitor();
first=0;
}
timer_1=setInterval(cpu_mem_monitor,interval*1000);
}
/*--2--*/
// 基于准备好的dom，初始化echarts图表
var myChart_disk = ec.init(document.getElementById('disk_monitor'));
var disk_option = {
tooltip: {
show: true
},
legend: {
data:['统计']
},
xAxis : [
{
type : 'category',
data : ["顺手付","理财","银企直连","小贷","顺丰卡"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"系统",
"type":"bar",
"data":[5, 20, 40, 10, 10]
}
]
};
// 为echarts对象加载数据
myChart_disk.setOption(disk_option);
}
);
//获取当前监控时间点，实际监控数据与时间点存在0-5秒的延迟
var getDate = function(){
var d = new Date();
var con = '';
var year = d.getFullYear();
var month = d.getMonth()+1+con;
var date = d.getDate()+con;
var hour = d.getHours()+con;
var minute = d.getMinutes()+con;
var second = d.getSeconds()+con;
console.log("----month.length "+month.length)
if( month.length < 2 ) month = "0"+month;
if( date.length < 2 ) date = "0"+date;
if( hour.length < 2 ) hour = "0"+hour;
if( minute.length < 2 ) minute = "0"+minute;
if( second.length < 2 ) second = "0"+second;
console.log("request time :"+ year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second);
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
};
});
-------------------------------------------------------------------------------------------
java
-------------------------------------------------------------------------------------------
package com.sfpay.pts.controller; import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map; import javax.servlet.http.HttpServletRequest; import net.sf.json.JSONArray;
import net.sf.json.JSONObject; import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; import com.sfpay.pts.model.MachineInfoModel;
import com.sfpay.pts.util.ContextParaInitializeUtil;
import com.sfpay.pts.util.MonitorUtil; @Controller
@RequestMapping("/")
public class PerformanceMonitorController {
private Logger log = LoggerFactory
.getLogger(PerformanceMonitorController.class);
private static JSONObject monitor_data;
private ContextParaInitializeUtil cpiUtil = new ContextParaInitializeUtil();
@RequestMapping("nowMonitor.action")
public String toNowMonitorPage() {
log.info("跳转进入监控页面");
return "/resource/nowMonitor";
} @RequestMapping("historyMonitor.action")
public String toHistoryMonitorPage() {
log.info("跳转进入监控页面");
return "/resource/historyMonitor";
} public static void main(String[] args) {
PerformanceMonitorController p = new PerformanceMonitorController();
HttpServletRequest request = null;
JSONObject json = new JSONObject();
String[] ip = {"10.118.218.50","10.118.218.51"};
json.put("ip", ip);
p.getCpuMemMonitorData(request, 1, 20 , "2015-07-21 10:10:10",json);
} @RequestMapping(value = "getCpuMemData/{interval}/{times}/{req_time}")//
@ResponseBody
public JSONObject getCpuMemMonitorData(HttpServletRequest request,@PathVariable("interval") int interval,
@PathVariable("times") int times,
@PathVariable("req_time") String req_time,
@RequestBody JSONObject ip) {
log.info("CPU 监控频率为 " + interval + "秒;监控次数：" + times + " ,监控请求时间 "
+ req_time+" ;所监控IP: "+ip.toString());//
// 最终返回的对象
JSONObject json = new JSONObject();
// json的value,可以包含多个ip的数据
JSONObject ip_data = new JSONObject();
// 一个ip_data包含多个option，一个option包含1个ip对应的所有监控数据
JSONObject option ;
// option包含监控数据结构
JSONObject series = null;
// 定义xAxis和series的动态列表以及数组，然后动态列表转成数组
String xAxis_data = req_time.split(" ")[1]; // "xAxis_data":[],
// 用于初始化series对象中的data属性
String[] series_datas = new String[0];
//额外封装一个series_data对象，用于封装监控的数据
JSONObject series_data ; //存储被监控机器信息
MachineInfoModel miModel;
//存储cpu监控信息
Map<String,String> cpu_mem_map ;
//监控工具对象
MonitorUtil m = new MonitorUtil();
String ip_exist = "no";
for(Object s :ip.getJSONArray("ip")){
//存放监控数据
series_data = new JSONObject();
//存放前端echarts需要的数据
series = new JSONObject();
//存放多个series
option = new JSONObject();
//存放监控结果
cpu_mem_map = new HashMap<String,String>();
//创建存放一个ip对应的机器信息对象
miModel = new MachineInfoModel();
//获取ip的详细信息
miModel = cpiUtil.getIpinfo(s.toString());
//如果获取ip后该对象ip信息为空，说明该ip在后台数据库中不存在
if(!miModel.getIp().equals("")){
cpu_mem_map=m.getCpuMemMonitor(miModel);
ip_exist = "yes";
}
//把获取的监控信息cpu_mem_map从map对象转化成json对象
series_data = JSONObject.fromObject(cpu_mem_map);
series.put("name", s.toString());
series.put("type", "line");
series.put("smooth", true);
series.put("data", series_datas);
// "series":{"name":"10.118.218.50","data":[],"type":"line"},
log.debug("获取 "+s.toString()+"返回到页面的series信息："+series.toString()+" "+series.get("data")+" "+series_datas.toString());
// series 和 series_data放入到option中
// 一个ip对应一个option
option.put("ip_exist",ip_exist );
option.put("series", series);
option.put("series_data", series_data);
ip_data.put(s.toString(), option);
log.debug("获取 "+s.toString()+"返回到页面的option信息："+ip_data.toString());
} // 一个ip对应一个data，最终一个json包含多个ip
json.put("ip", ip_data);
json.put("xAxis_data", xAxis_data);
/*json对象格式如下*/
/*
{
"xAxis_data":"17:27:52",
"ip":
{
"10.118.218.50":
{
"series":{"name":"10.118.218.50","type":"line"},
"ip_exist":"yes",
"series_data":"1"
},
"10.118.218.51":
{
"series":{"name":"10.118.218.51","type":"line"},
"ip_exist":"yes",
"series_data":"1"
}
}
}
*/
System.out.println(monitor_data);
monitor_data = ip_data;
log.info("monitor_data : " + monitor_data.toString());
log.info("*******最终返回页面数据*******"+json.toString());
return json;
} }
-------------------------------------------------------------------------------------------
开发成功-cpu-mem监控动态折线图--dom esayui js java的更多相关文章
- 模拟Windows任务管理器CPU使用率的动态折线图-农夫山泉
Delphi的TCanvas类可以实现各种复杂的图形输出功能,基于近期项目的需求,利用它实现了一个很炫的动态折线图(模拟了资源管理器中CPU使用率的折线图),可以直观地展现出数值的实时变化情况. 这段 ...
- achartengine画出动态折线图
achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...
- 原生JS实现动态折线图
原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- WPF动态折线图
此项目源码下载地址:https://github.com/lizhiqiang0204/WpfDynamicChart 效果图如下: 此项目把折线图制作成了一个控件,在主界面设置好参数直接调用即可,下 ...
- Echarts 动态折线图
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>< ...
- 最牛逼android上的图表库MpChart（二） 折线图
最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...
- JFreeChart 之折线图
JFreeChart 之折线图 一.JFreeChart 简介 JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets ...
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
- ECharts动态获取后台传过来的json数据进行多个折线图的显示，折线的数据由后台传过来
ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...
随机推荐
- malloc,vmalloc与kmalloc，kfree与vfree的区别和联系
kmalloc和vmalloc是分配的是内核的内存,malloc分配的是用户的内存kmalloc保证分配的内存在物理上是连续的,vmalloc保证的是在虚拟地址空间上的连续kmalloc能分配的大小有 ...
- bind，call，apply区别
js中bind.call.apply函数的用法 2015-02-27 21:16:39 标签:javascript js bind call apply 原创作品,允许转载,转载时请务必以超链接形式 ...
- VS2013失去智能提示如何恢复
一般智能提示包括,输入智能提示,鼠标移到类,方法,接口,变量上面自动提示相关信息,VS2013常常会失去这种提示功能,遇到这种情况可以这样解决: 1.在开发环境中随便打开一个xxx.aspx页面,也就 ...
- 待研究之iOS硬件调研
1.磁力计 完成指南针 参考类:CLLocationManager,CLHeading 2.照相机 完成一个按钮点击拍照,拍照完使用照片,一个按钮打开系统相册 选择图片 参考类: UIImagePic ...
- 建置 POSTFIX 服务器
建置 POSTFIX 服务器 postfix 是除了 sendmail 以外 ,最被广泛采用的 Linux 邮件服务器,一般使用的观感不外乎两点: 一.安全:垃圾信过滤机制较聪明,就算什么都没设定,也 ...
- HDU 5828（线段树）
Problem Rikka with Sequence 题目大意 维护一个序列,支持三种操作. 操作1:区间加. 操作二:区间开根号(向下取整). 操作3:区间求和. 解题分析 可以发现经过若干次操作 ...
- 解决CSS小于12px的文字在谷歌浏览器显示问题
做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题, ...
- 六、CCLayer
一个游戏中可以有很多个场景,每个场景里面又可能包含有多个图层,这里的图层一般就是CCLayer对象.CCLayer本身几乎没什么功能,对比CCNode,CCLayer可用于接收触摸和加速计输入.其实, ...
- php中将url中的参数含有%20进行转换或解码
我的url: .......index.php?action=search&start=12&search=star wave&orderby=categories&s ...
- 使用dropbox 同步任意文件夹（MAC）
使用dropbox自动同步自己mac上的文件夹: -My_Programs /Users/foreverycc/Dropbox/My_Program # . must be full absolute ...