总的而言，分三部分：

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中的一些核心知识点以及需要注意的地方

    前言 近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来 比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不 ...

  2. 关于ArcGIS API for JavaScript中basemap的总结介绍（一）

    实际上basemap这个概念并不只在arcgis中才有,在Python中有一个matplotlib basemap toolkit(https://pypi.python.org/pypi/basem ...

  3. js 调试

    $(":select[name='start_Month'").each(function(item,i){ console.log(item.name + "" ...

  4. 史上最全的ASP.NET MVC路由配置

    MVC将一个Web应用分解为:Model.View和Controller.ASP.NET MVC框架提供了一个可以代替ASP.NETWebForm的基于MVC设计模式的应用. AD:51CTO 网+ ...

  5. git review & devops过程

    自己搭建的devops环境是gitlab/gerrit/jenkins 1. 首先自己checkout一个自己的代码分支,一般不要在master上做直接修改 2. 修改后git add file,   ...

  6. 使用multi-paxos实现日志同步应用

    paxos 说multi-paxos之前先简要说一下paxos paxos是在多个成员之间对某个值(提议)达成一致的一致性协议.这个值可以是任何东西.比如多个成员之间进行选主,那么这个值就是主的身份. ...

  7. mysql权限与安全

    一.MySQL权限系统通过两个阶段进行认证: (A) 对用户进行身份认证,IP地址和用户名联合, (B) 对合法用户赋予相应权限,权限表在数据库启动的时候载入内存中. 二.在权限的存取过程中,会用到& ...

  8. W3School-CSS 伪类 (Pseudo-classes) 实例

    CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  9. hibernate 注解 唯一键约束 uniqueConstraints

    @Table 注解包含一个schema和一个catelog 属性,使用@UniqueConstraints 可以定义表的唯一约束. 如果是联合约束就用下面这种 @Table(name="tb ...

  10. linux环境变量的设置

    linux中环境变量分为系统环境变量和用户环境变量(和window中一样),系统环境变量对所有系统用户都有效,用户环境变量只对当前用户有效,我们以ubuntu为例说明 用户环境变量 用户环境变量通常存 ...