Echarts实现系统监控

最新推荐文章于 2024-11-11 19:55:52 发布

原创最新推荐文章于 2024-11-11 19:55:52 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个实时监控系统，使用Echarts展示内存使用率（MB）和CPU使用率的实时变化。通过每秒更新的数据，系统能够提供详细的内存占用情况分析，并以仪表盘形式直观显示CPU使用百分比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

页面代码

<!DOCTYPE html>
<html style="height: 100%">

<head>
<meta charset="utf-8">
<title>Echarts</title>
<script type="text/javascript"
	src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
	<div id="ybp" style="height: 400px; width: 400PX;"></div>
			<div id="zxt" style="height: 400px; width: 400PX;"></div>
</body>
<script type="text/javascript">
//	内存使用情况代码
	var zxtDom = document.getElementById("zxt");
	var zxtChart = echarts.init(zxtDom);
	zxtoption = {
		
		    visualMap: [{
		        show: false,
		        type: 'continuous',
		        seriesIndex: 0,
		        min: 0,
		        max: 400
		    }],
		    axisPointer: {
                label: {
                    formatter: function (params) {
                    	var msg = "";
                    	if(params.seriesData.length>0){
                    		msg = params.value+': '+ params.seriesData[0].data +"M内存"
                    	}
                        return msg;
                    }
                }
            },
		
		    title: [{
		        left: 'center',
		        text: '内存占使用率（MB）实时分析图'
		    }],
		    tooltip: {
		        trigger: 'axis'
		    },
		    xAxis: {
		        data: ['60秒前','59秒前','58秒前','57秒前','56秒前','55秒前','54秒前','53秒前','52秒前','51秒前','50秒前','49秒前','48秒前','47秒前','46秒前','45秒前','44秒前','43秒前','42秒前','41秒前','40秒前','39秒前','38秒前','37秒前','36秒前','35秒前','34秒前','33秒前','32秒前','31秒前','30秒前','29秒前','28秒前','27秒前','26秒前','25秒前','24秒前','23秒前','22秒前','21秒前','20秒前','19秒前','18秒前','17秒前','16秒前','15秒前','14秒前','13秒前','12秒前','11秒前','10秒前','9秒前','8秒前','7秒前','6秒前','5秒前','4秒前','3秒前','2秒前','实时']
		    },
		    yAxis: {
		        splitLine: {show: false},
		    	max:8191
		    },
		    series: {
		        type: 'line',
		        showSymbol: false,
		        data: ['0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0']
		    }
		};


	if (zxtoption && typeof zxtoption === "object") {
		zxtChart.setOption(zxtoption, true);
	}
	
	 
	setInterval(function() {
		var address = "/sys/info/memoryUsedPerc";
		$.get(address, "", function(data) {
			zxtoption.series.data = data;
			zxtChart.setOption(zxtoption, true);
		})
	}, 1000);
	 
</script>



<script type="text/javascript">
// 	cpu仪表盘相关代码
	var ybpDom = document.getElementById("ybp");
	var ybpChart = echarts.init(ybpDom);
	ybpOption = {
			title: {
		        text: 'CPU仪表盘'
		    },
		tooltip : {
			formatter : "{a} <br/>{b} : {c}%"
		},
		toolbox : {
			feature : {
				restore : {},
				saveAsImage : {}
			}
		},
		series : [ {
			name : 'CPU使用率',
			type : 'gauge',
			detail : {
				formatter : '{value}%'
			},
			data : [ {
				value : 0,
				name : 'CPU仪表盘'
			} ]
		} ]
	};
	if (ybpOption && typeof ybpOption === "object") {
		ybpChart.setOption(ybpOption, true);
	}
	setInterval(function() {
		var address = "/sys/info/cpuUsedPerc";
		$.get(address, "", function(data) {
			ybpOption.series[0].data[0].value = data;
			ybpChart.setOption(ybpOption, true);
		})
	}, 1000);
</script>
</html>

内存使用情况接口JSON

["6202", "6209", "6211", "6210", "6210", "6208", "6207", "6206", "6206", "6206", "6206", "6206", "6206", "6206", "6206", "6208", "6207", "6207", "6206", "6203", "6204", "6212", "6213", "6212", "6211", "6211", "6211", "6211", "6211", "6211", "6212", "6217", "6217", "6218", "6213", "6221", "6244", "6244", "6244", "6240", "6237", "6236", "6237", "6234", "6238", "6241", "6260", "6257", "6256", "6260", "6243", "6233", "6233", "6232", "6232", "6231", "6231", "6229", "6227", "6226"]

CPU百分率接口，直接响应百分率数值