折线图:
function chart_mem(ds){
chart_div_mem = echarts.init(document.getElementById('div-mem'));
option = {
title : {
text: '内存',
subtext:''
},
tooltip : {
trigger: 'axis'
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value',
max:100
}
],
series : [
{
type:'line',
smooth:true,
showSymbol: false,
itemStyle: {normal: {
lineStyle:{color:'#2085BF',width:1,type:'solid'},
areaStyle: {type: 'default',color:'#F1F6FA'}}},
data:ds
}
]
};
// 为echarts对象加载数据
chart_div_mem.setOption(option);
}
定时数据:
setInterval(function(){
$.post('/adminindex/GetSvrInfo',function(data){
var obj_cpu = eval('(' + data.cpu + ')');
if(ds_cpu.length>60){
ds_cpu.shift();
}
ds_cpu.push(obj_cpu.percent);
chart_div_cpu.setOption({
series: [{
data: ds_cpu
}],
title:{
subtext:'{0}%利用率'.format(obj_cpu.percent)
}
});
var obj_mem=eval('(' + data.mem + ')');
if(ds_mem.length>60){
ds_mem.shift();
}
ds_mem.push(obj_mem.percent);
chart_div_mem.setOption({
series: [{
data: ds_mem
}],
title:{
text:'内存 {0}MB/{1}MB'.format(obj_mem.used,obj_mem.total),
subtext:'{0}%利用率'.format(obj_mem.percent)
}
});
var obj_net = eval('('+data.net+')');
if(ds_net.length>60){
ds_net.shift();
}
ds_net.push(obj_net.total);
chart_div_net.setOption({
series:[{
data:ds_net
}],
title:{
subtext:'活动连接数:{0}'.format(obj_net.total)
}
});
if(!createDisk){
var obj_disk=eval('(' + data.disk + ')');
var alltotal=0;
var alluse=0;
var allfree=0;
for(i=0;i<obj_disk.length;i++){
var total=obj_disk[i].total;
var used = obj_disk[i].used;
var freed = obj_disk[i].free;
used=parseFloat(used.replace('G',''));
freed=parseFloat(freed.replace('G',''));
total=parseFloat(total.replace('G',''));
ds_disk.push(obj_disk[i].name);
ds_use.push(used);
ds_free.push(freed);
alltotal+=total;
alluse+=used;
allfree+=freed;
}
var subtitle ='总计:{0}G 已用:{1}G 空闲:{2}G'.format(alltotal.toFixed(2),alluse.toFixed(2),allfree.toFixed(2));
chart_disk(ds_disk,ds_use,ds_free,subtitle);
createDisk = true;
}
})
},1000);
柱状图堆积百分比:
function chart_disk(disks,dsuse,dsfree,subtitle){
chart_div_disk = echarts.init(document.getElementById('div-disk'));
option = {
title : {
text: '硬盘',
subtext:subtitle
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter: function (params){
return params[0].name + '<br/>'
+ params[0].seriesName + ' : ' + params[0].value + '<br/>'
+ params[1].seriesName + ' : ' + params[1].value;
}
},
calculable : true,
legend: {
selectedMode:false,
data:['已用', '空闲']
},
xAxis : [
{
type : 'category',
data : disks
}
],
yAxis : [
{
type : 'value',
boundaryGap: [0, 0.1]
}
],
series : [
{
name:'已用',
type:'bar',
stack: 'sum',
barCategoryGap: '60%',
itemStyle: {normal: {
color: '#2085BF',
barBorderColor: '#2085BF',
barBorderWidth: 2,
barBorderRadius:0,
label : {
show: true, position: 'insideTop'
}
}},
data:dsuse
},{
name:'空闲',
type:'bar',
stack: 'sum',
itemStyle: {
normal: {
color: '#F1F6FA',
barBorderColor: '#2085BF',
barBorderWidth: 2,
barBorderRadius:0,
label : {
show: true,
position: 'top',
formatter: function (params) {
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == params.name) {
return (option.series[0].data[i] + params.value).toFixed(2);
}
}
},
textStyle: {
color: '#2085BF'
}
}
}
},
data:dsfree
}
]
};
// 为echarts对象加载数据
chart_div_disk.setOption(option);
}
图例: