echart之实现服务器资源监控

最新推荐文章于 2022-09-27 13:52:33 发布

时间燧片

最新推荐文章于 2022-09-27 13:52:33 发布

阅读量7.5k

点赞数 1

分类专栏：图表文章标签： Echarts jsp java

本文链接：https://blog.csdn.net/qiuurl/article/details/42127115

版权

本文介绍了如何利用Echarts库来展示服务器的CPU进程占用、内存使用率和磁盘使用率。通过引入Echarts相关JS文件，创建并配置图表，以可视化方式呈现服务器资源监控数据。

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

前一段时间接触了echarts，不过没怎么深入研究过，不过现在又有跟他打交道的机会了，应项目需求需要用它来表示出服务器资源的

使用情况，如：cpu进程占用，内存使用率和磁盘使用率，趁此机会小结下。

首先、引入相关的js文件就不说了。

其次、绘制图形：

如以下js文件：

        var labelTop = {
	    normal : {
	        label : {
	            show : true,
	            position : 'center',
	            formatter : '{b}',
	            textStyle: {
	                baseline : 'bottom',
	                fontSize : '12',
	                fontWeight : 'bold'
	            }
	        },
	        labelLine : {
	            show : false
	        }
	    }
	};
	var labelFromatter = {
	    normal : {
	        label : {
	            formatter : function (a,b,c,d){return (100 - d).toFixed(2) + '%'},
	            textStyle: {
	                baseline : 'top',
	                fontSize : '12',
	                fontWeight : 'bold'
	            }
	        }
	    },
	}
	var labelBottom = {
	    normal : {
	       
	        label : {
	            show : true,
	            position : 'center'
	        },
	        labelLine : {
	            show : false
	        }
	    },
	    emphasis: {
	        
	    }
	};
	var diskChart = echarts.init(document.getElementById('disk'));
        var option1={
               color: ['#99d2dd','#1c7099'],
               tooltip : {
                   trigger: 'item',