总的而言，分三部分：

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. javascript函数调用的各种方法！！

    在JavaScript中一共有下面4种调用方式: (1) 基本函数调用 (2)方法调用 (3)构造器调用 (4)通过call()和apply()进行调用 1. 基本函数调用 普通函数调用模式,如: J ...

  2. arcgis for flex展示GIS基本功能

    1.地图框选搜索: 这是空间查询,在地图上框选一定的范围,然后搜索出在这个范围之内的所有信息,搜索到的详细信息在列表框显示出来 2.属性查询: 3.数据库展示: 4.绘制图形: 地图上绘制各种不同形状 ...

  3. Linux vi/vim（转载）

    Linux vi/vim 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主 ...

  4. JAVA 设计模式 桥接模式

    用途 桥接模式 (Bridge) 将抽象部分与实现部分分离,使它们都可以独立的变化. 桥接模式是一种结构式模式. 结构

  5. RSA算法及其在iOS中的使用

    因为项目中需要传输用户密码,为了安全需要用RSA加密,所以就学习了下RSA加密在iOS中的应用. 关于RSA的历史及原理,下面的两篇文章讲的很清楚了:  http://www.ruanyifeng.c ...

  6. iOS中，在类的源文件(.m)中，@interface部分的作用？

      此@interface部分为类扩展(extension). 其被设计出来就是为了解决两个问题的 其一,定义类私有方法的地方. 其二,实现public readonly,private readwr ...

  7. UITableview中怎么找到每个cell

    一个朋友问我:我在每个cell中都添加了两个按钮(记为btnA和btnB),点击btnA时,对应的cell中添加一个子控件,再点击btnB时,对应的cell中的子控件就移除,怎么做到? 百度了一下,发 ...

  8. Android 窗体设置

    requestWindowFeature(Window.FEATURE_NO_TITLE);  getWindow().setFlags(WindowManager.LayoutParams.FLAG ...

  9. Android 最全Activity生命周期

    新进入Activity:onCreate > onStart > onResume 退出Activity:onPause > onStop > onDestroy 目前处于该A ...

  10. angularjs结合d3js实现资源展示

    转载请注明出处: 转载自Bin's Blog:  angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ ) angularjs结合d3js实 ...