Echarts CPU监控（折线仪表盘，图例混搭）

最新推荐文章于 2024-07-24 16:49:00 发布

高山宿舍

最新推荐文章于 2024-07-24 16:49:00 发布

阅读量1.8w

点赞数 4

分类专栏： Js

本文链接：https://blog.csdn.net/gaogaoshan/article/details/38038743

版权

本文介绍了如何使用Echarts库创建一个CPU监控图表，结合折线图和仪表盘展示系统资源使用情况。通过实例代码详细讲解了图例混搭的配置方法，帮助读者理解并实现自己的监控界面。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <meta name="description" content="ECharts">

<title>CPU page</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/echarts2/esl.js"></script>
<script type="text/javascript" src="js/echarts2/echarts-original.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height:450px ; width: 95%;"></div>

	<script type="text/javascript" >
		var myChart;
		var eCharts;
		var cpu_r = 100;
		var cpu_y= '85%';
		var cpu_title = '-25%';
		var cpu_detail =21;

		require([ 'echarts', 'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
		], DrawEChart //异步加载的回调函数绘制图表
		);

		//创建ECharts图表方法
		function DrawEChart(ec) {
			eCharts = ec;
			myChart = eCharts.init(document.getElementById('main'));
			myChart.showLoading({
				text : "图表数据正在努力加载...",
				effect :'whirling',//'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
				textStyle : {
					fontSize : 20
				}
			});
			
			
			//定义图表options
			var options = {
				backgroundColor: 'white',
				title : {
					text : "最近10次CPU采样结果",
					itemGap	:270,
					subtext : "当前CPU采样",
					subtextStyle :{
						fontSize: 15, fontWeight: 'bolder', color: '#333'
					},
					sublink : "http://www.baidu.com"
				},
				
				tooltip : {
					trigger : 'axis'
				},
				legend : {
					data : [ "空闲率","系统使用率","用户使用率","I/O等待率","告警阀值" ]
				},
				toolbox : {
					show : true,
					feature : {
						//mark : {show : true},
						//dataView : {show : true,readOnly : false},
						magicType : {
							show : true,type : [ 'line', 'bar' ]
						},
						//restore : {show : true},
						saveAsImage : {
							show : true
						}
					}
				},
				
				calculable : true,
				xAxis : [ {
					type : 'category',
					boundaryGap : false,
					data : [ '第1次采样', '第2次采样', '第3次采样', '第4次采样', '第5次采样', '第6次采样', '第7次采样', '第8次采样', '第9次采样', '第10次采样' ]
				} ],
				
				yAxis : [ {
					type : 'value',
					axisLabel : {
						formatter :