总的而言，分三部分：

1.监控器(monitor.py): 每秒获取系统的四个cpu的使用率，存入数据库。

2.路由器(app.py): 响应页面的ajax，获取最新的一条或多条数据。

3.页面（index.html): 发出ajax请求，更新echarts图表

一、监控器

使用了psutil库，对系统进行监控。

import psutil

import sqlite3

import time

'''

说明：四个cpu使用率，显然是临时数据，所以最好用内存数据库，如Redis等

但是这里强行使用sqlite3，不管了，哪个叫他是内置的呢？！

'''

db_name = 'mydb.db'

def create_db():

    # 连接

    conn = sqlite3.connect(db_name)

    c = conn.cursor()

    # 创建表

    c.execute('''DROP TABLE IF EXISTS cpu''') # 删除旧表，如果存在（因为这是临时数据）

    c.execute('''CREATE TABLE cpu (id INTEGER PRIMARY KEY AUTOINCREMENT, insert_time text,cpu1 float, cpu2 float, cpu3 float, cpu4 float)''')

    # 关闭

    conn.close()

def save_to_db(data):

    '''参数data格式：['00:01',3.5, 5.9, 0.7, 29.6]'''

    # 建立连接

    conn = sqlite3.connect(db_name)

    c = conn.cursor()

    # 插入数据

    c.execute('INSERT INTO cpu(insert_time,cpu1,cpu2,cpu3,cpu4) VALUES (?,?,?,?,?)', data)

    # 提交！！！

    conn.commit()

    # 关闭连接

    conn.close()

# 创建表

create_db()

# 通过循环，对系统进行监控

while True:

    # 获取系统cpu使用率（每隔1秒）

    cpus = psutil.cpu_percent(interval=1, percpu=True)

    # 获取系统时间（只取分:秒）

    t = time.strftime('%M:%S', time.localtime())

    # 保存到数据库

    save_to_db((t, *cpus))

二、路由器

import sqlite3

from flask import Flask, request, render_template, jsonify

app = Flask(__name__)

def get_db():

    db = sqlite3.connect('mydb.db')

    db.row_factory = sqlite3.Row

    return db

def query_db(query, args=(), one=False):

    db = get_db()

    cur = db.execute(query, args)

    db.commit()

    rv = cur.fetchall()

    db.close()

    return (rv[0] if rv else None) if one else rv

@app.route("/", methods=["GET"])

def index():

    return render_template("index.html")

@app.route("/cpu", methods=["POST"])

def cpu():

    if request.method == "POST":

        res = query_db("SELECT * FROM cpu WHERE id>=(?)", args=(int(request.form['id'])+1,)) #返回1+个数据

    return jsonify(insert_time = [x[1] for x in res],

                   cpu1 = [x[2] for x in res],

                   cpu2 = [x[3] for x in res],

                   cpu3 = [x[4] for x in res],

                   cpu4 = [x[5] for x in res]) # 返回json格式

if __name__ == "__main__":

    app.run(debug=True)

三、页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>ECharts3 Ajax</title>

    <script src="{{ url_for('static', filename='jquery-3.1.1.js') }}"></script>

    <script src="{{ url_for('static', filename='echarts.js') }}"></script>

</head>

<body>

    <!--为ECharts准备一个具备大小（宽高）的Dom-->

    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

    <script type="text/javascript">

    //--- 折柱 ---

    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({

        title: {

            text: '服务器系统监控'

        },

        tooltip: {},

        legend: {

            data:['cpu1','cpu2','cpu3','cpu4']

        },

        xAxis: {

            data: []

        },

        yAxis: {},

        series: [{

            name: 'cpu1',

            type: 'line',

            data: []

        },{

            name: 'cpu2',

            type: 'line',

            data: []

        },{

            name: 'cpu3',

            type: 'line',

            data: []

        },{

            name: 'cpu4',

            type: 'line',

            data: []

        }]

    });

    // 六个全局变量：插入时间、cpu1、cpu2、cpu3、cpu4、 哨兵（用于POST）

    var insert_time = ["","","","","","","","","",""],

        cpu1 = [0,0,0,0,0,0,0,0,0,0],

        cpu2 = [0,0,0,0,0,0,0,0,0,0],

        cpu3 = [0,0,0,0,0,0,0,0,0,0],

        cpu4 = [0,0,0,0,0,0,0,0,0,0],

        lastID = 0; // 哨兵，记录上次数据表中的最后id +1（下次查询只要>=lastID）

    //准备好统一的 callback 函数

    var update_mychart = function (data) { //data是json格式的response对象

        myChart.hideLoading(); // 隐藏加载动画

        dataLength = data.insert_time.length; //取回的数据长度

        lastID += dataLength; //哨兵，相应增加。

        // 切片是能统一的关键！！

        insert_time = insert_time.slice(dataLength).concat(data.insert_time); // 数组，先切片、再拼接

        cpu1 = cpu1.slice(dataLength).concat(data.cpu1.map(parseFloat)); //注意map方法

        cpu2 = cpu2.slice(dataLength).concat(data.cpu2.map(parseFloat));

        cpu3 = cpu3.slice(dataLength).concat(data.cpu3.map(parseFloat));

        cpu4 = cpu4.slice(dataLength).concat(data.cpu4.map(parseFloat));

        // 填入数据

        myChart.setOption({

            xAxis: {

                data: insert_time

            },

            series: [{

                name: 'cpu1', // 根据名字对应到相应的系列

                data: cpu1

            },{

                name: 'cpu2',

                data: cpu2

            },{

                name: 'cpu3',

                data: cpu3

            },{

                name: 'cpu4',

                data: cpu4

            }]

        });

        if (dataLength == 0){clearInterval(timeTicket);} //如果取回的数据长度为0,停止ajax

    }

    myChart.showLoading(); // 首次显示加载动画

    // 异步加载数据 （首次，get，显示6个数据）

    $.get('/cpu').done(update_mychart);

    // 异步更新数据 （以后，定时post，取回1个数据）

    var timeTicket = setInterval(function () {

        $.post('/cpu',{id: lastID}).done(update_mychart);

    }, 3000);

    </script>

</body>

</html>

效果图

flask+sqlite3+echarts3 系统监控的更多相关文章

  1. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  2. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  3. flask+socketio+echarts3 服务器监控程序（基于后端数据推送）

    本文地址:http://www.cnblogs.com/hhh5460/p/7397006.html 说明 以前的那个例子的思路是后端监控数据存入数据库:前端ajax定时查询数据库. 这几天在看web ...

  4. flask+sqlite3+echarts2+ajax数据可视化

    前提: 准备Python + Flask+Sqlite3的平台环境(windows系统) 前面一节介绍flask怎么安装了,剩下sqlite3下载后解压,然后环境变量添加解压路径就行了 附加下载地址: ...

  5. flask+sqlite3+echarts2+ajax数据可视化报错：UnicodeDecodeError: 'utf8' codec can't decode byte解决方法

    flask+sqlite3+echarts2+ajax数据可视化报错: UnicodeDecodeError: 'utf8' codec can't decode byte 解决方法: 将 py文件和 ...

  6. [转]linux 系统监控、诊断工具之 IO wait

    1.问题: 最近在做日志的实时同步,上线之前是做过单份线上日志压力测试的,消息队列和客户端.本机都没问题,但是没想到上了第二份日志之后,问题来了: 集群中的某台机器 top 看到负载巨高,集群中的机器 ...

  7. linux基础-第十一单元 系统监控

    第十一单元 系统监控 系统监视和进程控制工具-top和free top命令的功能 TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序 ...

  8. Linux系统监控命令及如何定位到Java线程

    >>PID.TID的区分 uid是user id,即用户id,root用户的uid是0,0为最高权限,gid是group id,用户组id,使用 id 命令可以很简单的通过用户名查看UID ...

  9. Ubuntu系统监控cpu memery 磁盘Io次数 IO速率 网卡 运行时间等信息的采集

    实验室最近在做的项目要做ubuntu系统监控,要获得系统的一些信息并返回给web服务器. web服务器与ubuntu主机的通信我写的程序用的是socket,至于为什么不用java程序ssh到对应的主机 ...

随机推荐

  1. JQ常用代码

    页面加载的时候添加一个定时器,0秒之后执行hideURLbar函数. hideURLbar函数将页面滚动至坐标(0,1) <script type="application/x-jav ...

  2. input标签内容改变的触发事件

    ---恢复内容开始--- 1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychang ...

  3. sharepoint 相关<httpHandlers>

    <add verb="GET,POST,HEAD,(GETSOURCE),(HEADSOURCE),(POSTSOURCE)" path="*.doc,*.docx ...

  4. iOS时间个性化设置设置

    现在在很多项目中,不会直接显示时间,很多时候都是显示“刚刚”,”XX分钟前”,等等字样,那么他们是怎么实现的呢 ? .新建一个NSDate的类目:NSDate+XMGExtension NSDate+ ...

  5. 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)

    在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...

  6. Play Framework 完整实现一个APP（九）

    添加增删改查操作 1.开启CRUD Module 在/conf/application.conf 中添加 # Import the crud module module.crud=${play.pat ...

  7. CentOS 6.6安装Xtrabackup RPM提示缺少libev.so.4()

    在CentOS Release 6.6安装percona-xtrabackup-2.3.4时,遇到下面错误信息 rpm -ivh percona-xtrabackup-2.3.4-1.el6.x86_ ...

  8. JVM之运行时常量池（Runtime Constant Pool）

    基本特性: 方法区的一部分,在方法去中分配,加载泪或者接口后就创建运行时常量区. class文件每一个类或接口的常量池表(constant_pool table)的运行时表现形式, 包括编译期的数值字 ...

  9. 数据库设计范式1——三范式

    一讲到数据库设计,大家很容易想到的就是三范式,但是第四.第五范式又是什么,不是很清楚,三范式到底怎么区分,也不清楚,作为数据库设计的基础概念,我再讲解下数据库范式.   Normal form Bri ...

  10. 《java JDK7 学习笔记》之对象封装

    1.构造函数实现对象初始化流程的封装.方法封装了操作对象的流程.java中还可以使用private封装对象私有数据成员.封装的目的主要就是隐藏对象细节,将对象当做黑箱子进行操作. 2.在java命名规 ...