Flask 框架：运用Echarts绘制图形

半亩花草  论坛元老 | 2022-10-5 18:58:05 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1002|帖子 1002|积分 3006

echarts是百度推出的一款开源的基于JavaScript的可视化图表库，该开发库目前发展非常不错，且支持各类图形的绘制可定制程度高，Echarts绘图库同样可以与Flask结合，前台使用echart绘图库进行图形的生成与展示，后台则是Flask通过render_template方法返回一串JSON数据集，前台收到后将其应用到绘图库上，实现动态展示Web服务日志状态功能。
如下演示案例中，将分别展示运用该绘图库如何前后端交互绘制（饼状图，柱状图，折线图）这三种最基本的图形。
实现绘制饼状图: 用于模拟统计Web容器的日志数据，通过饼状图将访问状态统计出来。
前端部分/templates/index.html代码如下:
  1. <html>
  2.         <head>
  3.                 <meta charset="UTF-8">
  4.                 <title>LyShark</title>
  5.                
  6.                
  7.         </head>
  9.         <body>
  10.                
  11.                
  12.                         <h3 >LyShark 网站访问状态统计</h3>
  13.                
  14.                
  15.                        
  16.                
  17.                
  18.         </body>
  20.        
  21. </html>
复制代码
后端代码如下通过模拟render_template返回一些数据。
  1. from flask import Flask,render_template,request
  2. import json
  4. app = Flask(import_name=__name__,
  5.             static_url_path='/python',   # 配置静态文件的访问url前缀
  6.             static_folder='static',      # 配置静态文件的文件夹
  7.             template_folder='templates') # 配置模板文件的文件夹
  9. def Count_Flag_And_Flow(file):
  10.     list = []
  11.     flag = {}
  12.     with open(file) as f:
  13.         contexts = f.readlines()
  14.     for line in contexts:
  15.         it = line.split()[8]
  16.         list.append(it)
  17.     list_num = set(list)
  18.     for item in list_num:
  19.         num = list.count(item)
  20.         flag[item] = num
  21.     return flag
  23. @app.route('/', methods=["GET"])
  24. def index():
  25.     Address = {'226': 4, '404': 12, '200': 159, '400': 25, '102': 117, '302': 1625}
  26.     # Address = Count_Flag_And_Flow("d://access_log")
  27.     return render_template("index.html",data = json.dumps(Address))
  29. if __name__ == '__main__':
  30.     app.run(host="127.0.0.1", port=80, debug=False)
复制代码
运行后访问自定义域名，输出如下效果的饼状图:

实现绘制柱状图: 统计访问了本站的所有ID地址并将地址数大于2的全部显示出来.
前端index.html代码如下
  1. <html>
  2.         <head>
  3.                 <meta charset="UTF-8">
  4.                 <title>LyShark</title>
  5.                
  6.                
  7.         </head>
  9.         <body>
  10.                
  11.                        
  12.                                 <h3 >LyShark 网站设备类型统计</h3>
  13.                        
  14.                        
  15.                                
  16.                        
  17.                
  18.         </body>
  20.        
  21. </html>
复制代码
后端代码如下,路由曾则只保留一个index映射
  1. from flask import Flask,render_template,request
  2. import json
  4. app = Flask(import_name=__name__,
  5.             static_url_path='/python',   # 配置静态文件的访问url前缀
  6.             static_folder='static',      # 配置静态文件的文件夹
  7.             template_folder='templates') # 配置模板文件的文件夹
  9. def Count_Flag_And_Type(file):
  10.     list = []
  11.     flag = {}
  12.     with open(file) as f:
  13.         contexts = f.readlines()
  14.     for line in contexts:
  15.         addr = line.split()[0].replace("(","").replace(")","")
  16.         if addr != "::1":
  17.             list.append(addr)
  19.     # 去重并将其转为字典
  20.     list_num = set(list)
  21.     for item in list_num:
  22.         num = list.count(item)
  23.         # 如果地址只有一次则忽略
  24.         if num > 1:
  25.             flag[item] = num
  26.     return flag
  28. @app.route('/', methods=["GET"])
  29. def index():
  30.     Types = {'Linux': 23, 'studies': 57, 'Windows': 87, 'compatible': 44, 'web': 32, 'X11': 78}
  31.     # Types = Count_Flag_And_Type("d://access_log")
  32.     return render_template("index.html",data = json.dumps(Types))
  34. if __name__ == '__main__':
  35.     app.run(host="127.0.0.1", port=80, debug=False)
复制代码
柱状图绘制效果如下：

实现绘制折线图: 统计指定的时间段内的访问流量数据.
前端index.html代码如下
  1. <html>
  2.         <head>
  3.                 <meta charset="UTF-8">
  4.                 <title>LyShark</title>
  5.                
  6.                
  7.         </head>
  9.         <body>
  10.                
  11.                        
  12.                                 <h3 >LyShark 网站流量统计</h3>
  13.                        
  14.                        
  15.                                
  16.                        
  17.                
  18.         </body>
  20.        
  21. </html>
复制代码
后端代码如下,路由曾则只保留一个index映射
  1. from flask import Flask,render_template,request
  2. import json
  4. app = Flask(import_name=__name__,
  5.             static_url_path='/python',   # 配置静态文件的访问url前缀
  6.             static_folder='static',      # 配置静态文件的文件夹
  7.             template_folder='templates') # 配置模板文件的文件夹
  9. def Count_Time_And_Flow(file):
  10.     times = {}  # key 保存当前时间信息
  11.     flow = {}   # value 当前时间流量总和
  12.     Count= 0    # 针对IP地址的计数器
  13.     with open(file) as f:
  14.         contexts = f.readlines()
  15.     for line in contexts:
  16.         if line.split()[9] != "-" and line.split()[9] != '"-"':
  17.             size = line.split()[9]
  18.         temp = line.split()[3]
  19.         ip_attr = temp.split(":")[1] + ":" + temp.split(":")[2]
  20.         Count = int(size) + Count
  21.         if ip_attr in times.keys():
  22.             flow[ip_attr] = flow[ip_attr] + int(size)
  23.         else:
  24.             times[ip_attr] = 1
  25.             flow[ip_attr] = int(size)
  26.     return flow
  28. @app.route('/', methods=["GET"])
  29. def index():
  30.     OutFlow = {'03:30': 12, '03:48': 25, '04:15': 47, '04:28': 89, '04:42': 66, '04:51': 54}
  31.     # OutFlow = Count_Time_And_Flow("d://access_log")
  32.     return render_template("index.html",data = json.dumps(OutFlow))
  34. if __name__ == '__main__':
  35.     app.run(host="127.0.0.1", port=80, debug=False)
复制代码
折现图绘制效果如下：

如上是三种常用图形的绘制方式，其他图形同理可以参考如上方代码中的写法，我们可以将这三个图形合并在一起，主要是前端对其进行排版即可。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="https://cdn.lyshark.com/javascript/bootstrap/3.3.7/css/bootstrap.min.css">
  6.    
  7.    
  8. </head>
  9. <body>
  11.    
  12.    
  13.         
  14.             <h3 >饼状图绘制</h3>
  15.         
  16.         
  17.             
  18.         
  19.    
  21.    
  22.    
  23.         
  24.             <h3 >柱状图绘制</h3>
  25.         
  26.         
  27.             
  28.         
  29.    
  31.    
  32.    
  33.         
  34.             <h3 >折线图绘制</h3>
  35.         
  36.         
  37.             
  38.         
  39.    
  41.    
  42.    
  44.    
  45.    
  47.    
  48.    
  49. </body>
复制代码
后端代码如下，其中的参数可以从数据库内提取也可以从文件中读入。
  1. from flask import Flask,render_template,request
  2. import json
  4. app = Flask(import_name=__name__,
  5.             static_url_path='/python',   # 配置静态文件的访问url前缀
  6.             static_folder='static',      # 配置静态文件的文件夹
  7.             template_folder='templates') # 配置模板文件的文件夹
  9. @app.route('/', methods=["GET"])
  10. def index():
  11.     Address = {'226': 4, '404': 12, '200': 159, '400': 25, '102': 117, '302': 1625}
  12.     Types = {'Linux': 23, 'studies': 57, 'Windows': 87, 'compatible': 44, 'web': 32, 'X11': 78}
  13.     x = {'03:30': 12, '03:48': 25, '04:15': 47, '04:28': 89, '04:42': 66, '04:51': 54}
  14.     y = {'05:22': 55, '07:48': 29, '07:15': 98, '08:54': 11, '08:41': 61, '06:51': 5}
  15.     z = {'07:30': 1, '09:48': 5, '06:15': 24, '08:28': 59, '2:42': 11, '08:51': 22}
  16.    
  17.     return render_template("index.html",Address = json.dumps(Address), Types= json.dumps(Types), x = json.dumps(x), y = json.dumps(y), z = json.dumps(z))
  19. if __name__ == '__main__':
  20.     app.run(host="127.0.0.1", port=80, debug=False)
复制代码
输出效果如下：


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

半亩花草

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表