Flask + echarts 轻松搞定 nginx 日志可视化(下)

数据展示

从头利用 Flask 和 echarts 做数据展示是可以的,不过需要处理更多的细节

如果利用一些框架,快速做展示,然后再做局部的个性化调整

这里用到的框架是 TurboWay 的 bigdata_practice,虽然功能比较单一,结构不太灵活,不过用来搭建一个可用的数据展示系统还是没问题的,重要的是可以通过源码学习构建思路的方法

bigdata_practice git 地址为:https://github.com/TurboWay/bigdata_practice.git

将其 clone 到本地

git clone https://github.com/TurboWay/bigdata_practice.git

然后按照依赖模块,在 bigdata_practice 文件夹中,有个 requirements.txt,里面列了项目所依赖的库和组件

关于如何构建 requirements.txt 文件,可参考 《部署 Flask 应用

进入 bigdata_practice 文件夹,用 pip 安装依赖:

pip install -r requirements.txt

注意:最好使用虚拟环境安装,如何创建虚拟环境,可参考这篇文章

安装依赖之后,就可以启动 Flask 服务了

python app.py
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 137-055-644
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

如果一切正常,可以访问 localhost:5000,查看数据展示效果

这里对项目中的需要定制的部分做下说明

在 ironman 目录下,app.py 为 Flask 服务主代码,其中定义了系统的访问路径,比如首页、线图、饼图等,这里可以根据自己的需求添加或删改

每个访问路径对应一个页面模板,模板文件存放在,templates 文件夹下,如果需要调整菜单,需要对每个模板页面中的菜单部分进行修改,以调整菜单项目以及被激活的菜单

data.py 定义了展示数据的读取接口,相当于一个数据层,依赖于 nginx_log_data.py,将数据设置为,方便展示的结构,如果需要展示更多的图形,需要根据展示效果,修改或添加新的数据接口

nginx_log_data.py 从 Excel 文件中读取需要展示的数据,Excel 中的数据,就是 数据分析 部分得到的结果,这里利用 pandas 读取 Excel 的功能,如果需要展示更多的分析数据,可以在这里添加数据读取结果,另外通过调整 data.py 以及相应的页面模板文件,将数据得以展示

这里,我们就 24小时访问趋势、客户端占比以及用户分布做了展示,效果如下:


Flask + echarts 轻松搞定 nginx 日志可视化(下)

24小时访问趋势


Flask + echarts 轻松搞定 nginx 日志可视化(下)

客户端占比

Flask + echarts 轻松搞定 nginx 日志可视化(下)

用户分布

实践

下载源码后,先安装项目依赖

pip install -r requirements.txt

示例用的 nginx 访问日志,在 nginx_access.zip 压缩包里,先解压到当前目录

然后申请百度API,获取到 ak,修改到 analyse\baidu_api.py 的 13 行

将命令行切换到代码目录下,否则可能出现文件找不到的错误

执行数据分析脚本:

python .\analyse\main.py

最后启动 Flask 服务:

python .\ironman\app.py

总结

今天利用 pandas、Flask、echarts 对 nginx 服务器的访问日志做了简单分析和展示,完成任务的同时,学习和实践了如何通过一些简单的工具和方法构造一个数据展示平台的过程

文章主要说明了构建思路和需要注意的部分,具体细节,请下载示例代码,运行,同时欢迎交流探讨


上一篇:千字掌握“代码块”概念 | 带你学《Java面向对象编程》之十二


下一篇:Painter简单绘制漂亮的火球教程