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

最新推荐文章于 2024-08-07 11:26:48 发布
最新推荐文章于 2024-08-07 11:26:48 发布
阅读量1.2w 收藏 13
点赞数 1
分类专栏： echart





CPU page 



<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 : '{value} %'  
                },  
                splitArea : {  
                    show : true  
                }  
            } ],  

            grid : {  
                    width : '90%' , //直角坐标轴占整页的百分比  
                    height : '43%'  
                    },  

            series : [  
                    {  
                        name : '空闲率',  
                        type : 'gauge',  
                        center : [ '15%', cpu_y ],//圆心坐标，支持绝对值（px）和百分比  
                        radius : cpu_r,  //仪表盘的半径  
                        splitNumber : 10, // 分割段数，默认为5  
                        axisLine : { // 坐标轴线  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : [ [ 0.2, '#ff4500' ],  
                                        [ 0.8, '#48b' ], [ 1, '#228b22' ] ],  
                                width : 8  
                            }  
                        },  
                        axisTick : { // 坐标轴小标记  
                            splitNumber : 10, // 每份split细分多少段  
                            length : 12, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        axisLabel : { // 坐标轴文本标签，详见axis.axisLabel  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto'  
                            }  
                        },  
                        splitLine : { // 分隔线  
                            show : true, // 默认显示，属性show控制显示与否  
                            length : 30, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        pointer : {  
                            width : 5  
                        },  
                        title : {  
                            show : true,  
                            offsetCenter : [ 0, cpu_title ], // x, y，单位px  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                fontWeight : 'bolder',  
                                fontSize : 10  
                            }  
                        },  
                        detail : {  
                            formatter : '{value}%',  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto',  
                                fontWeight : 'bolder',  
                                fontSize : cpu_detail  
                            }  
                        },  
                        data : [ {  
                            value : 10,  
                            name : '空闲率'  
                        } ]  
                    },  
                    {  
                        name : '系统使用率',  
                        type : 'gauge',  
                        center : [ '39%', cpu_y ],//圆心坐标，支持绝对值（px）和百分比  
                        radius : cpu_r,  //仪表盘的半径  
                        splitNumber : 10, // 分割段数，默认为5  
                        axisLine : { // 坐标轴线  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : [ [ 0.2, '#228b22' ],  
                                        [ 0.8, '#48b' ], [ 1, '#ff4500' ] ],  
                                width : 8  
                            }  
                        },  
                        axisTick : { // 坐标轴小标记  
                            splitNumber : 10, // 每份split细分多少段  
                            length : 12, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        axisLabel : { // 坐标轴文本标签，详见axis.axisLabel  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto'  
                            }  
                        },  
                        splitLine : { // 分隔线  
                            show : true, // 默认显示，属性show控制显示与否  
                            length : 30, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        pointer : {  
                            width : 5  
                        },  
                        title : {  
                            show : true,  
                            offsetCenter : [ 0, cpu_title ], // x, y，单位px  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                fontWeight : 'bolder',  
                                fontSize : 10  
                            }  
                        },  
                        detail : {  
                            formatter : '{value}%',  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto',  
                                fontWeight : 'bolder',  
                                fontSize : cpu_detail  
                            }  
                        },  
                        data : [ {  
                            value : 20,  
                            name : '系统使用率'  
                        } ]  
                    },  
                    {  
                        name : '用户使用率',  
                        type : 'gauge',  
                        center : [ '62%', cpu_y ],//圆心坐标，支持绝对值（px）和百分比  
                        radius : cpu_r,  //仪表盘的半径  
                        splitNumber : 10, // 分割段数，默认为5  
                        axisLine : { // 坐标轴线  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : [ [ 0.2, '#228b22' ],  
                                        [ 0.8, '#48b' ], [ 1, '#ff4500' ] ],  
                                width : 8  
                            }  
                        },  
                        axisTick : { // 坐标轴小标记  
                            splitNumber : 10, // 每份split细分多少段  
                            length : 12, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        axisLabel : { // 坐标轴文本标签，详见axis.axisLabel  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto'  
                            }  
                        },  
                        splitLine : { // 分隔线  
                            show : true, // 默认显示，属性show控制显示与否  
                            length : 30, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        pointer : {  
                            width : 5  
                        },  
                        title : {  
                            show : true,  
                            offsetCenter : [ 0, cpu_title ], // x, y，单位px  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                fontWeight : 'bolder',  
                                fontSize : 10  
                            }  
                        },  
                        detail : {  
                            formatter : '{value}%',  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto',  
                                fontWeight : 'bolder',  
                                fontSize : cpu_detail  
                            }  
                        },  
                        data : [ {  
                            value : 40,  
                            name : '用户使用率'  
                        } ]  
                    },  
                    {  
                        name : 'IO等待率',  
                        type : 'gauge',  
                        center : [ '85%', cpu_y ],//圆心坐标，支持绝对值（px）和百分比  
                        radius : cpu_r,  //仪表盘的半径  
                        splitNumber : 10, // 分割段数，默认为5  
                        axisLine : { // 坐标轴线  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : [ [ 0.2, '#228b22' ],  
                                        [ 0.8, '#48b' ], [ 1, '#ff4500' ] ],  
                                width : 8  
                            }  
                        },  
                        axisTick : { // 坐标轴小标记  
                            splitNumber : 10, // 每份split细分多少段  
                            length : 12, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        axisLabel : { // 坐标轴文本标签，详见axis.axisLabel  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto',  
                                //fontSize : 12  
                            }  
                        },  
                        splitLine : { // 分隔线  
                            show : true, // 默认显示，属性show控制显示与否  
                            length : 30, // 属性length控制线长  
                            lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式  
                                color : 'auto'  
                            }  
                        },  
                        pointer : {  
                            width : 5  
                        },  
                        title : {  
                            show : true,  
                            offsetCenter : [ 0, cpu_title ], // x, y，单位px  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                fontWeight : 'bolder',  
                                fontSize : 10  
                            }  
                        },  
                        detail : {  
                            formatter : '{value}%',  
                            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE  
                                color : 'auto',  
                                fontWeight : 'bolder',  
                                fontSize : cpu_detail  
                            }  
                        },  
                        data : [ {  
                            value : 70,  
                            name : 'I/O等待率'  
                        } ]  
                    },  


//============================================================================================================            

                    {  
                        name : '空闲率',  
                        type : 'line',  
                        data : [ 21, 22, 23, 27, 25, 28, 31 ,25, 25, 25],//必须是Integer类型的,String计算平均值会出错  
                        markPoint : {  
                            data : [ {  
                                type : 'max',  
                                name : '最大值'  
                            }, {  
                                type : 'min',  
                                name : '最小值'  
                            } ]  
                        },  
                        //markLine : {  
                            //data : [ {  
                            //  type : 'average',  
                            //  name : '平均值'  
                            //} ]  
                        //}  
                    } ,  
                    {  
                        name : '系统使用率',  
                        type : 'line',  
                        data : [ 13, 12, 13, 11, 14, 18, 21 , 14, 14, 14  ],//必须是Integer类型的,String计算平均值会出错  
                        markPoint : {  
                            data : [ {  
                                type : 'max',  
                                name : '最大值'  
                            }, {  
                                type : 'min',  
                                name : '最小值'  
                            } ]  
                        }  
                    } ,       
                    {  
                        name : '用户使用率',  
                        type : 'line',  
                        data : [ 32, 33, 32, 31, 32, 38, 21 , 32, 32, 32 ],//必须是Integer类型的,String计算平均值会出错  
                        markPoint : {  
                            data : [ {  
                                type : 'max',  
                                name : '最大值'  
                            }, {  
                                type : 'min',  
                                name : '最小值'  
                            } ]  
                        }  
                    } ,  
                    {  
                        name : 'I/O等待率',  
                        type : 'line',  
                        data : [ 22, 21, 23, 24, 25, 22, 11, 22, 22, 22 ],//必须是Integer类型的,String计算平均值会出错  
                        markPoint : {  
                            data : [ {  
                                type : 'max',  
                                name : '最大值'  
                            }, {  
                                type : 'min',  
                                name : '最小值'  
                            } ]  
                        }  
                    } ,  
                    {  
                        name : '告警阀值',  
                        type : 'line',  
                        itemStyle: {  
                            normal: {  
                                color: 'red',  
                                lineStyle: {width: 5}  
                            }  
                    },  
                        data : [ 70, 70, 70, 70,70, 70, 70, 70,70, 70 ]//必须是Integer类型的,String计算平均值会出错  

                    }   
            ]  
        };  


        //clearTimeout(loadingTicket);  
        //loadingTicket = setTimeout(function (){  
            myChart.setOption(options);  
            myChart.hideLoading();  
        //},100);  



        //myChart.setOption(options); //先把可选项注入myChart中  
        //myChart.hideLoading();  
        //getChartData();  
    }  
</script>  


<script type="text/javascript">  
    function getChartData() {  
        //获得图表的options对象  
        var options = myChart.getOption();  
        //通过Ajax获取数据  
        $.ajax({  
            type : "post",  
            async : false, //同步执行  
            url : "${pageContext.request.contextPath}/echarts/line_data",  
            data : {},  
            dataType : "json", //返回数据形式为json  
            success : function(result) {  
                if (result) {  
                    options.legend.data = result.legend;  
                    options.xAxis[0].data = result.category;  
                    options.series[0].data = result.series[0].data;  

                    myChart.hideLoading();  
                    myChart.setOption(options);  
                }  
            },  
            error : function(errorMsg) {  
                alert("不好意思，大爷，图表请求数据失败啦!");  
                myChart.hideLoading();  
            }  
        });  
    }  
</script>


这里写图片描述

kuifeng.dong
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
基于Djano的sysinfo项目搭建----CPU信息监控并使用Echart绘制cpu饼状图和折线图
ninimino的博客
03-19 728
Echarts绘制CPU折线图 Echarts绘制CPU扇形图 Django使用echarts进行可视化展示 Celery定时任务和异步任务 Celery 是一个简单、灵活且可靠的，处理大量消息的分布式系统。大白话理解处理异步任务和定时任务的工具。 工作原理如下图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lTgWbq37-1616080244795)(项目搭建.assets/image-20210313165237504.png)] Windows..
Flask入门：sqlite3 + psutil + echarts 监测CPU使用率
mega16的专栏
03-06 5269
最终展示图：平台：win32 , pycharm, python2.7本文主要使用分为三个部分： 1.监视器（monitor.py）: 使用python三方模块psutil，每秒获取当前系统cpu的使用情况，并存入sqlite3数据库中。2.路由器（echart.py）:响应index.html页面的ajax，从sqlite3获取最新的一条或多条数据。3.展示页面（index.html）：发出a
vue中使用echarts实现动态图表多数据展示，带源码（x轴动态时间刷新，实时更新展示数据）
热门推荐
weixin_45745641的博客
03-12 1万+
前言 之前写项目，需要写一个图表动态展示出当前服务器的信息，在网上找了很多相关的文章，但是关于vue中使用echarts动态图表的内容比较少，自己写过之后就在这里记录一下，希望能够对大家有所帮助 实现效果 先来看下效果： 动态展现当前服务器 内存占用率，cpu占用率，磁盘写入量和磁盘读取量（因为服务器没上东西，所以数据相对比较平缓），下面教大家怎么写出这种动态图表 option的内容 首先对于这样一个动态图表，看起来很复杂，因为我这里有四条数据，大家可以先写一条数据，把他跑起来，其余再加数据是很容易的：
echarts 炫酷的仪表盘组件
最新发布
cjy_fly的博客
08-07 319
echarts 炫酷的仪表盘组件
Echarts CPU监控 （折线仪表盘，图例混搭）--转载
weixin_45728946的博客
10-09 730
【本文为转载文章】 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/gaogaoshan/article/details/38038743 CPU page <script type="text/javascript" > var myChart...
数据图表3D化显示内存、CPU和磁盘运行状况
05-28
易语言3D化显示硬件运行状态源码例程程序结合易语言应用接口支持库，分别用柱形、圆饼和线性图显示内存、CPU和硬盘的使用状态。本易语言例程源码是易语言论坛用户编写的教程，属于易语言图形图像教程。本易语言例程还使用到易语言数据图表支持库,扩展界面支持库。点评：易语言3D化显示硬件运行状态源码结合易语言应用接口支持库，分别用柱形、圆饼和线性图显示内存、CPU和硬盘的使用状态。@易语言代码详解。
Echart+signalR实现实时检测服务器CPU状态
qq_42335551的博客
11-06 2730
1.前端代码 &lt;h2&gt;CPU使用率&lt;/h2&gt; &lt;div id="mychart" style="width:600px;height:300px;"&gt;&lt;/div&gt; @section scripts{ &lt;script src="~/Scripts/Echart/echarts.js"&gt;&lt
Echarts简单折线/柱状图混合实例
Mentina的小屋
04-18 7528
    前段时间面试+学校项目占用了小生很大一部分时间，博客也没有在记录了。在这样下去上个月获得的“持之以恒”勋章就要被收回去了(ಥ﹏ಥ)    为了勋章，今日小生特地爬上来整理、记录最近做项目新学的可视化库——Echarts//=======================================================================一、Echarts简介Ech...
ECharts JavaScript图表库-其他
06-11
底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时...
Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图
L1542334210的博客
10-24 3466
Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图1、前言2、案列（基于电影推荐系统）2.1 观众年龄分配占比`在这里插入代码片`2.2 不同职位观影情况2.3 电影类型分配占比2.4 观影性别占比3、文末彩蛋 1、前言        ECharts 提供了常规的折线图、柱状图、散点图、...
CPU性能图表
12-26
内存性能，CPU性能图表，windows系统性能，我的机器显卡内存性能。
使用Echart 自定义复杂型图表监控
weixin_40245339的博客
01-11 371
直接上图： 代码： let dom = document.getElementById("GChartBox"); let myChart = echarts.init(dom); let option; option =
ECharts仪表盘的实现（vue3 +Ts +Echarts)
m0_59680972的博客
02-27 921
Vue3+Ts+ECharts仪表盘的实现
echart之实现服务器资源监控
貌似高手
12-24 7554
前一段时间接触了echarts，不过没怎么深入研究过，不过现在又有跟他打交道的机会了，应项目需求
Python使用pyecharts绘制cpu使用量折线图
llllyr的博客
09-20 1902
文章目录1.基本步骤：1.1获取主机时间与cpu使用量情况1.2 获取到的信存入到新的文件中，方便绘图调用1.3 创建两个列表分别代表横纵坐标轴的数据1.4 利用pyechart工具生成折线图2.pyecharts自主学习 1.基本步骤： 1.1获取主机时间与cpu使用量情况 import psutil #导入系统库，在后面获取cpu使用量需要用到 import time #导入时间库，获...
通过echarts.js画24小时流量监控图
qq_37172890的博客
07-05 9331
通过echart.js画24小时流量监控图echarts.js官网链接效果图片代码示例努力的生活着 echarts.js官网链接 https://echarts.baidu.com/index.html 效果图片 代码示例 $.post("/network_manage/get_speed",function(data){ var myChart = echarts.init(docume...
非官网echarts两监控cpu和内存组图加水波图
qq_36357608的博客
10-22 1200
var myChart = echarts.init(document.getElementById('serverListenGaugeDiv1')); var labelTop = { normal : { label : { show : true, position : 'center...
绘制cpu使用率图
asufeiya的博客
09-24 1929
cpu信息获取 1.获取系统cpu占有率的信息 import psutil import time # 隔1s绘制cpu的占有率 -->持久化的保存 # 如何将时间和对应的cpu占有率去匹配 while True: # 获取当前时间和cpu占有率 t = time.localtime() cur_time = '%d:%d:%d' %(t.tm_hour,t.t...
echarts柱状折线图分别设置图例形状
08-16
在Echarts中，可以通过legend属性配置来设置图例形状。通过设置legend.type属性，可以指定图例的显示类型。对于柱状折线图，可以将type设置为'line'来显示折线图形状，将type设置为'rect'来显示柱状图形状。 例如，要将图例形状设置为折线图形状，可以使用以下配置： ``` legend: { type: 'line' <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程](https://blog.csdn.net/m0_67403076/article/details/126099474)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值