使用echarts做动态数据 图表

$(function() {
addDefaultDate();
switchPanel('showListMemory');
});
var listButtonTitle = '点击显示列表数据';
var myChart;// 图表元素
var intervalTime = 1 * 1000;// 定时函数 多少秒取一次数据
var interval;// 定时函数
var xAxisData = [];// X轴的值
var series = [];// Y轴的值
var legendDate = [];// 每一个值都代表一条线
var seriesData = new Array();// 用于保存Y轴的二维数组
var Graphical = 'line';//图形类型


// 页面隐藏与显示控制
function switchPanel(divId) {
$('.switchPanel').hide();
$('#' + divId).show();
if (divId == 'showListMemory') {
$('#listButton').hide();
$('.timeClass').show();
$('#aPicture').show();
$('#listButton').removeAttr("title");
closeInterval();
searchJvmMemory();
} else if (divId == 'showChartDiv') {
$('#listButton').show();
$('.timeClass').hide();
$('#aPicture').hide();
$('#listButton').attr('title', listButtonTitle);
chartJvmMemory();
}
}


// 查询按键控制器
function queryRunlog() {
var s = $('#listButton').attr('title');
if (typeof s == 'undefined') {
searchJvmMemory();
} else if (s == listButtonTitle) {
chartJvmMemory();
}
}


// 关闭定时函数
function closeInterval() {
if (typeof myChart != 'undefined') {
clearInterval(interval)
}
}


// 获取最新的数据
function newestData() {
var num = 1;//向数据获取多少记录
var params = {};
params.num = num;
$.ajax({
url : path + '/jvm/newestJvmMemory',
type : 'POST',
data : params,
success : function(data) {
for (var int = 0; int < num; int++) {// 按照指定获取数量,消除指定数量原有数据
xAxisData.shift();
for (var ss = 0; ss < legendDate.length; ss++) {
seriesData[ss].shift();
}
}
$.each(data, function(idx, obj) {// 提取返回的值
xAxisData.push(obj.showstartdate);
$.each(legendDate, function(idx1, obj1) {// 迭代X轴的值到Y上
switch (idx1) {
case 0:
seriesData[idx1].push(obj.maxMemory);
break;
case 1:
seriesData[idx1].push(obj.totalMemory);
break;
case 2:
seriesData[idx1].push(obj.freeMemory);
break;
case 3:
seriesData[idx1].push(obj.currentMemory);
break;
}
})
})
$.each(legendDate, function(idx2, obj2) {// 放回更新后的数据到Y轴上
var serie = {};
serie.data = seriesData[idx2];
series[idx2] = serie;
})
myChart.setOption({
xAxis : {
data : xAxisData
},
series : series
})
}
})
}


// 获取jvm内存数据图表---数据与 制图
function chartJvmMemory() {
resizeshowCharMemory();
var params = {};
params.num = 20;
$.ajax({
url : path + '/jvm/newestJvmMemory',
type : 'POST',
data : params,
success : function(data) {
// 初始化echarts实例
myChart = echarts.init(document.getElementById('showCharMemory'));
var option;
legendDate = [ '最大内存', '已用内存总数', '空闲内存', '当前可用内存' ];// 一个值代表一条线



for (var i = 0; i < legendDate.length; i++) {
seriesData[i] = new Array();
}
$.each(data, function(idx, obj) {
xAxisData[idx] = obj.showstartdate;
$.each(legendDate, function(idx1, obj1) {// 迭代X轴的值到Y上
switch (idx1) {
case 0:
seriesData[idx1][idx] = obj.maxMemory;
break;
case 1:
seriesData[idx1][idx] = obj.totalMemory;
break;
case 2:
seriesData[idx1][idx] = obj.freeMemory;
break;
case 3:
seriesData[idx1][idx] = obj.currentMemory;
break;
}
})
})
$.each(legendDate, function(idx2, obj2) {
var serie = {};
serie.name = obj2;
serie.type = Graphical;
serie.data = seriesData[idx2];
series[idx2] = serie;
})
option = {
title : {
text : 'JVM内存数据图'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : legendDate
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
xAxis : {
type : 'category',
boundaryGap : false,
data : xAxisData
},
yAxis : {
type : 'value',
min : -2
},
series : series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 定时函数
interval = setInterval(function() {
if ($('#showCharMemory').width() < 1) {
closeInterval();
}
if (typeof myChart != 'undefined') {
console.log('定时函数还在运行着');
newestData();
}
}, intervalTime)
}
});
}


// 搜索运行日志
function searchJvmMemory() {
var searchFrom = $("#searchFrom").serializeObject();
$('#listMemoryDiv').datagrid({
url : path + '/jvm/searchJvmMemory',
method : 'POST',
queryParams : searchFrom,
fitColumns : true,
rownumbers : true,
pagination : true,
singleSelect : true,
loadMsg : "数据加载中.....",
striped : true,
nowrap : false,
columns : [ [ {
field : 'showstartdate',
title : '记录时间',
align : 'left',
headalign : 'center',
width : '19%'
}, {
field : 'maxMemory',
title : '最大可用内存',
align : 'left',
headalign : 'center',
width : '20%'
}, {
field : 'totalMemory',
title : '已用内存总数',
align : 'left',
headalign : 'center',
width : '20%'
}, {
field : 'freeMemory',
title : '空闲内存',
align : 'left',
headalign : 'center',
width : '20%'
}, {
field : 'currentMemory',
title : '当前可用内存',
align : 'left',
headalign : 'center',
width : '20%'
} ] ]


});
// 设置分页控件
var p = $('#listMemoryDiv').datagrid('getPager');
$(p).pagination({
pageSize : 10,// 每页显示的记录条数，默认为10
pageList : [ 10, 20, 30, 50, 100 ],// 可以设置每页记录条数的列表
beforePageText : '第',// 页数文本框前显示的汉字
afterPageText : '页    共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录',
});
$('#listMemoryDiv').datagrid('resize', {
width : $("#mainContent").width(),
height : esayUIHeight()
})
}


window.onresize = function() {
if (typeof myChart != 'undefined') {
resizeshowCharMemory();
myChart.resize();
}
$('#listMemoryDiv').datagrid('resize', {
width : $("#mainContent").width(),
height : esayUIHeight()
})
}


// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeshowCharMemory = function() {
$('#showCharMemory').css('width', $("#mainContent").width());
$('#showCharMemory').css('height', esayUIHeight());
};


// 为日期控件添加默认时间
function addDefaultDate() {
$('#d233').val(returnNowDate());// 添加当前时间
$('#d234').val(returnNowDate(getLastMonth()));// 添加上个月时间
}


// 返回当然时间 格式为'yyy-mm-dd'
function returnNowDate(date) {
var mydate = date;
if (typeof mydate == 'undefined') {
mydate = new Date();
}
var str = mydate.getFullYear() + "-";
str += (mydate.getMonth() + 1) + "-";
str += mydate.getDate();
return str;
}
// 根据当前时间返回上个月的时间
function getLastMonth() {
var dt = new Date();
var y = (dt.getMonth() == 0) ? (dt.getFullYear() - 1) : dt.getFullYear();
var m = (dt.getMonth() == 0) ? 11 : dt.getMonth() - 1;
var preM = Date.getDayOfMonth(y, m);
var d = (preM < dt.getDate()) ? preM : dt.getDate();
return new Date(y, m, d);
}
Date.getDayOfMonth = function(y, Mm) {
if (typeof y == 'undefined') {
y = (new Date()).getFullYear();
}
if (typeof Mm == 'undefined') {
Mm = (new Date()).getMonth();
}
var Feb = (y % 4 == 0) ? 29 : 28;
var aM = new Array(31, Feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
return aM[Mm];
};