<div id="serverStatus"></div>
<script type="text/javascript">
var worldMapContainer = document.getElementById('serverStatus');
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
};
resizeWorldMapContainer();
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(worldMapContainer);
// 指定圖表的配置項和數據
setInterval(function () {
$.ajax({
url:'/data',
type:'get',
dataType:'json',
success:function (data) {
var option = {
backgroundColor: "#404A59",
color: ['#ffd285', '#ff733f', '#ec4863'],
title: [
{
text: '服務器狀態',
left: '1%',
top: '6%',
textStyle: {color: '#fff'}
},
{
text: '內存和CPU使用率',
left: '83%',
top: '6%',
textAlign: 'center',
textStyle: {color: '#fff'}
}
],
tooltip: {trigger: 'axis'},
legend: {
x: 300,
//top: '7%',
top: '2%',
textStyle: {color: '#ffd285',},
//data: ['溫度', '溼度', '壓力']
data: data.legend
},
grid: {
left: '1%',
right: '35%',
top: '16%',
bottom: '6%',
containLabel: true
},
toolbox: {
"show": false,
feature: {
saveAsImage: {}
}
},
// X軸
xAxis: {
//type: 'category',
"axisLine": {
lineStyle: {
color: '#FF4500'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
boundaryGap: false,
// 可以從數據庫中獲取當前時間段
//data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00','15:00','16:00','17:00', '18:00', '19:00','20:00','21:00', '23:00','00:00','01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00']
data: data.categories
},
// Y軸
yAxis: {
"axisLine": {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
type: 'value'
},
series: [
// 四條曲線
{
name: '溫度',
smooth: true,
type: 'line',
symbolSize: 8,
symbol: 'circle',
//data: [90,90, 50, 39, 50, 20, 82, 80,90,10, 20, 39, 50, 120, 82, 80,90, 300, 39, 80, 120, 82, 80,90],
data: data['temperature']
},
{
name: '溼度',
smooth: true,
type: 'line',
symbolSize: 8,
symbol: 'circle',
//data: [90,90, 50, 39, 50, 120, 82, 80,90,100, 50, 99, 200, 120, 82, 80,90, 50, 39, 50, 120, 82, 80,90],
data: data['humidity']
},
{
name: '壓力',
smooth: true,
type: 'line',
symbolSize: 8,
symbol: 'circle',
//data: [290, 200,20, 132, 15, 200, 90,200,150, 200,20, 132, 15, 200, 90,200,150, 200,20, 132, 15, 200, 90,200],
data: data['pressure']
},
// 兩個餅圖
{
type: 'pie',
center: ['83%', '33%'],
radius: ['25%', '30%'],
label: {
normal: {
position: 'center'
}
},
data: [{
//value: 50,
value: data['cpuUsage'],
name: 'cup使用',
itemStyle: {
normal: {
color: '#ffd285'
}
},
label: {
normal: {
formatter: '{d} %',
textStyle: {
color: '#ffd285',
fontSize: 20
}
}
}
}, {
value: data['cpuNotUsage'],
name: 'cpu未使用',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#87CEFA'
}
},
label: {
normal: {
textStyle: {
color: '#ffd285',
},
formatter: '\n CPU Usage'
}
}
}]
},
{
type: 'pie',
center: ['83%', '72%'],
radius: ['25%', '30%'],
label: {
normal: {position: 'center'}
},
data: [
{
//value: 50,
value: data['memUsage'],
name: '使用',
itemStyle: {
normal: {color: '#ff733f'}
},
label: {
normal: {
formatter: '{d} %',
textStyle: {
color: '#ff733f',
fontSize: 20
}
}
}
},
{
//value: 510,
value: data['memNotUsage'],
name: '未使用',
tooltip: {show: false},
itemStyle: {
normal: {color: '#87CEFA'}
},
label: {
normal: {
textStyle: {color: '#FF4500',},
formatter: '\n Memory Usage'
}
}
}
]
}
]
};
myChart.setOption(option)
}
});
},1000)
window.onresize = function () {
resizeWorldMapContainer();
myChart.resize();
};