总的而言，分三部分：

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. SQL SERVER 2008 R2数据库出现“远程过程调用失败”（0x800706be）错误，怎么办！！

    以前SQL Server 2008 不能登陆的时候,总是通过“计算机管理”→“SQL Server服务”更改一下,"SQL Server(MSSQLSERVER)". 可是现在出现 ...

  2. Mac下如何查看Tomcat的版本？

    Tomcat提供了一个查询自身版本号的方法,要查询Tomcat的版本号,必须知道Tomcat所在的准确目录. 例如: 所用的Tomcat所在的目录下的bin文件夹的完整路径为:/Library/Tom ...

  3. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  4. 轻松掌握：JavaScript组合模式

    组合模式 组合模式:将一组对象组合成树形结构,并统一对待组合对象和叶对象,忽略它们之间的不同(因为叶对象也可以也可以包含叶对象而成为组合对象),组合模式中的对象只能是一对多的关系,不能出现多对一. 基 ...

  5. 使用React制作一个可配置的页面生成器[0]

    背景 上班两年多,终于来到一家互联网公司,告别之前的朝九晚六的腐败生活,开始了11116的码农之旅. 因为公司做的是直播相关的业务,所以伴随着直播,不定期的就会有运营活动-.- 但是这类活动留给码农的 ...

  6. 未能加载包“Microsoft SQL Server Data Tools”

    直接在vs2013里的App_Data目录创建数据库,在服务器资源管理器中查看时报错: 未能加载包“Microsoft SQL Server Data Tools” 英文: The 'Microsof ...

  7. AD RMS 配置指南 附结合SharePoint使用

    本文的 RMS配置 是独立安装的配置手册,如果要和SharePoint结合使用可以作为参考指南. SharePoint安装可参考 点击链接 同样可提供给Office使用,当然Exchange也可以使用 ...

  8. Google C++单元测试框架---Gtest框架简介（译文）

    一.设置一个新的测试项目 在用google test写测试项目之前,需要先编译gtest到library库并将测试与其链接.我们为一些流行的构建系统提供了构建文件: msvc/ for Visual ...

  9. Android 图片压缩、照片选择、裁剪，上传、一整套图片解决方案

    1.Android一整套图片解决方案 http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650820998&idx=1& ...

  10. IOS 页面间跳转

    常用的就两种 一种通过导航,一种直接跳 第一种 直接跳转 思路大致就是new一个目的页面,然后设置下页面跳转动画 中间还可以做点目的页面的数据初始化: ValueInputView *valueVie ...