<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: ' 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: ' Memory Usage' } } } ] } ] }; myChart.setOption(option) } }); },1000) window.onresize = function () { resizeWorldMapContainer(); myChart.resize(); };