总的而言，分三部分：

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. 移动端UC /QQ 浏览器的部分私有Meta 属性

    <meta name="format-detection" content ="telephone=no"/>   格式检测 禁止识别我们页面中的数 ...

  2. jQuery切换网页皮肤保存到Cookie实例

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  3. #8.31课堂总结#JS基础

    一.Javascript能做些什么? 表单数据合法性验证 网页特效:使用DOM和CSS可以实现网页特效 交互式菜单:创作具有动态效果的交互式菜单,完全能够与flash制作的导航菜单相媲美 动态页面:使 ...

  4. SharePoint 2013 图文开发系列之Visual Studio 创建母版页

    一直以来,对于SharePoint母版页的创建,都是使用SharePoint Designer来创建和修改的,而后接触了SharePoint 2013,发现可以使用Html文件,通过设计管理器导入,然 ...

  5. Top 10 Methods for Java Arrays

    作者:X Wang 出处:http://www.programcreek.com/2013/09/top-10-methods-for-java-arrays/ 转载文章,转载请注明作者和出处 The ...

  6. 使用用户自定义类型 CLR UDT

            一些复合类型进行范式分解是没有必要的,尤其是一些统一模型的情况下       SET NOCOUNT ON DECLARE @i TimeBalance SET @i = CAST(' ...

  7. MySQL的数据库与表格创建

    打开MySQL: 1.进入终端输入:cd /usr/local/mysql/bin/ 2.回车后 登录管理员权限 sudo su 3.回车后输入以下命令来禁止mysql验证功能 ./mysqld_sa ...

  8. React Native 红屏之Could not connect to development server.

    React Native 是目前最火的开发框架,其他不说了,上Bug. 按照  React Native iOS环境搭建 高级版 在mac上  搭建 React Native  环境,运行 项目 若出 ...

  9. JVM之CMS收集器

    CMS(Concurrent Mark Sweep) 最短回收停顿,适合维持响应时间上的要求. 初始标记 Initial mark:标记GC Roots能够关联到的对象.stop-mark. 并发标记 ...

  10. MongoDB学习笔记~使用原生语句实现三层集合关系的更新

    回到目录 MongoDB的文档型数据结构使得它在存储数据上很像JSON,在可读性方面很强,然而这种复杂的结构在update时相对麻烦一些,而对于官方给出的文档说的也不够细致,有些东西也是模棱两可的态度 ...