214 lines
6.8 KiB
JavaScript
214 lines
6.8 KiB
JavaScript
$(function() {
|
||
// <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
|
||
// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
|
||
// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
|
||
//onloadurl();
|
||
var locat = (window.location+'').split('/');
|
||
if('tool'== locat[3]){locat = locat[0]+'//'+locat[2];}else{locat = locat[0]+'//'+locat[2]+'/'+locat[3];};
|
||
|
||
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
var now = new Date();
|
||
var res = [];
|
||
var len = 20;
|
||
while (len--) {
|
||
var time = now.toLocaleTimeString().replace(/^\D*/, '');
|
||
time = time.substr(time.indexOf(":") + 1);
|
||
res.unshift(time);
|
||
now = new Date(now - 1000);
|
||
}
|
||
option = {
|
||
legend : {
|
||
data : [ 'jvm内存使用率', '物理内存使用率', 'cpu使用率' ]
|
||
},
|
||
grid : {
|
||
x : 40,
|
||
y : 30,
|
||
x2 : 10,
|
||
y2 : 35,
|
||
borderWidth : 0,
|
||
borderColor : "#FFFFFF"
|
||
},
|
||
xAxis : [ {
|
||
axisLabel : {
|
||
rotate : 40,
|
||
},
|
||
type : 'category',// 坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
|
||
data : res
|
||
} ],
|
||
yAxis : [ {
|
||
min : 0,
|
||
max : 100,
|
||
axisLabel : {
|
||
formatter : '{value}%'
|
||
}
|
||
} ],
|
||
series : [
|
||
{
|
||
name : 'jvm内存使用率',
|
||
type : 'line',
|
||
data : [ 12, 25, 31, 11, 45, 50, 11, 09, 28, 35, 40, 24,
|
||
28, 39, 23, 31, 14, 18, 08, 36 ]
|
||
},
|
||
{
|
||
name : '物理内存使用率',
|
||
type : 'line',
|
||
data : [ 55, 41, 10, 23, 15, 44, 29, 41, 27, 05, 12, 25,
|
||
31, 11, 45, 50, 11, 09, 28, 35 ]
|
||
},
|
||
{
|
||
name : 'cpu使用率',
|
||
type : 'line',
|
||
data : [ 40, 24, 28, 39, 23, 31, 14, 18, 08, 36, 55, 41,
|
||
10, 23, 15, 44, 29, 41, 27, 05 ]
|
||
} ]
|
||
};
|
||
myChart.setOption(option);
|
||
var main_one = echarts.init(document.getElementById('main_one'));
|
||
var main_two = echarts.init(document.getElementById('main_two'));
|
||
var main_three = echarts.init(document.getElementById('main_three'));
|
||
one_option = {
|
||
tooltip : {
|
||
formatter: "{a} <br/>{b} : {c}%"
|
||
},
|
||
series : [
|
||
{
|
||
title:{
|
||
show : true,
|
||
offsetCenter: [0, "95%"],
|
||
},
|
||
pointer: {
|
||
color: '#FF0000'
|
||
},
|
||
name:'监控指标',
|
||
radius:[0, '95%'],
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
width: 20
|
||
}
|
||
},
|
||
detail : {formatter:'{value}%'},
|
||
type:'gauge',
|
||
data:[{value: 50, name: 'JVM使用率'}]
|
||
}
|
||
]
|
||
};
|
||
two_option = {
|
||
tooltip : {
|
||
formatter: "{a} <br/>{b} : {c}%"
|
||
},
|
||
series : [
|
||
{
|
||
name:'监控指标',
|
||
type:'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
center : ['50%', '90%'], // 默认全局居中
|
||
radius : 180,
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
width: 140
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
splitNumber: 10, // 每份split细分多少段
|
||
length :12, // 属性length控制线长
|
||
},
|
||
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
||
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
color: '#fff',
|
||
fontSize: 15,
|
||
fontWeight: 'bolder'
|
||
}
|
||
},
|
||
|
||
pointer: {
|
||
width:10,
|
||
length: '80%',
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
},
|
||
title : {
|
||
show : true,
|
||
offsetCenter: [0, 15], // x, y，单位px
|
||
/* textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
color: '#fff',
|
||
fontSize: 25
|
||
}*/
|
||
},
|
||
detail : {
|
||
show : true,
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
borderWidth: 0,
|
||
borderColor: '#ccc',
|
||
offsetCenter: [0, -40], // x, y，单位px
|
||
formatter:'{value}%',
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontSize : 20
|
||
}
|
||
},
|
||
data:[{value: 50, name: 'cpu使用率'}]
|
||
}
|
||
]
|
||
};
|
||
|
||
main_one.setOption(one_option);
|
||
main_two.setOption(two_option);
|
||
one_option.series[0].data[0].name ='内存使用率';
|
||
one_option.series[0].pointer.color='#428bca'
|
||
main_three.setOption(one_option);
|
||
var axisData;
|
||
clearInterval(timeTicket);
|
||
var timeTicket = setInterval(function() {
|
||
axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
|
||
axisData = axisData.substr(axisData.indexOf(":") + 1);
|
||
var jvm = [];
|
||
var ram = [];
|
||
var cpu = [];
|
||
$.ajax({
|
||
type : "POST",
|
||
url : locat + '/a/monitor/usage',
|
||
async : false,
|
||
dataType : 'json',
|
||
success : function(json) {
|
||
$("#td_jvmUsage").html(json.jvmUsage);
|
||
$("#td_serverUsage").html(json.ramUsage);
|
||
$("#td_cpuUsage").html(json.cpuUsage);
|
||
|
||
|
||
jvm.push(json.jvmUsage);
|
||
ram.push(json.ramUsage);
|
||
cpu.push(json.cpuUsage);
|
||
// 动态数据接口 addData
|
||
myChart.addData([ [ 0, // 系列索引
|
||
jvm, // 新增数据
|
||
false, // 新增数据是否从队列头部插入
|
||
false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
|
||
], [ 1, // 系列索引
|
||
ram, // 新增数据
|
||
false, // 新增数据是否从队列头部插入
|
||
false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
|
||
], [ 2, // 系列索引
|
||
cpu, // 新增数据
|
||
false, // 新增数据是否从队列头部插入
|
||
false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
|
||
axisData // 坐标轴标签
|
||
] ]);
|
||
|
||
one_option.series[0].data[0].value =json.jvmUsage;
|
||
one_option.series[0].data[0].name ='JVM使用率';
|
||
one_option.series[0].pointer.color='#FF0000'
|
||
main_one.setOption(one_option, true);
|
||
|
||
two_option.series[0].data[0].value =json.cpuUsage;
|
||
main_two.setOption(two_option, true);
|
||
|
||
one_option.series[0].data[0].value =json.ramUsage;
|
||
one_option.series[0].data[0].name ='内存使用率';
|
||
one_option.series[0].pointer.color='#428bca'
|
||
main_three.setOption(one_option, true);
|
||
}
|
||
});
|
||
}, 3000);
|
||
|
||
}); |