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. 		<script src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
  6. 		<script src="https://cdn.lyshark.com/javascript/echarts/5.0.0/echarts.min.js"></script>
  7. 	</head>
  9. 	<body>
  10. 		<div class="panel panel-primary" style="width: 40%;height: 30%; float: left">
  11. 		<div class="panel-heading">
  12. 			<h3 class="panel-title">LyShark 网站访问状态统计</h3>
  13. 		</div>
  14. 		<div class="panel-body">
  15. 			<div id="main" style="width:100%; height: 300px"></div>
  16. 		</div>
  17. 		</div>
  18. 	</body>
  20. 	<script type="text/javascript" charset="UTF-8">
  21. 		var kv = new Array();
  22. 		kv = {{ data | safe }}
  23. 		var test = new Array();
  24. 		for(var logkey in kv){
  25. 			test.push( {value:kv[logkey], name:logkey} )
  26. 		}
  27. 		var display = function(){
  28. 			var main = echarts.init(document.getElementById("main"));
  29. 			var option = {
  30. 				legend: {
  31. 					orient: 'vertical',
  32. 					left: 'left',
  33. 				},
  34. 				series: [
  35. 					{
  36. 						type: 'pie',
  37. 						radius: '70%',
  38. 						center: ['50%', '50%'],
  39. 						detail: {formatter:'{value}'},
  40. 						data: test
  41. 					}
  42. 				]
  43. 			};
  44. 			main.setOption(option,true);
  45. 		};
  46. 		display();
  47. 	</script>
  48. </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. 		<script src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
  6. 		<script src="https://cdn.lyshark.com/javascript/echarts/5.0.0/echarts.min.js"></script>
  7. 	</head>
  9. 	<body>
  10. 		<div class="panel panel-primary" style="width: 58%;height: 30%; float: left">
  11. 			<div class="panel-heading">
  12. 				<h3 class="panel-title">LyShark 网站设备类型统计</h3>
  13. 			</div>
  14. 			<div class="panel-body">
  15. 				<div id="main1" style="width:100%; height: 300px"></div>
  16. 			</div>
  17. 		</div>
  18. 	</body>
  20. 	<script type="text/javascript" charset="UTF-8">
  21. 			var kv = new Array();
  22. 			var keys = new Array();
  23. 			var values = new Array();
  24. 			kv = {{ data | safe }}
  26. 			for(var logkey in kv){
  27. 				keys.push(logkey);
  28. 				values.push(kv[logkey]);
  29. 			}
  30. 			var display = function() {
  31. 				var main1 = echarts.init(document.getElementById("main1"));
  32. 				var option = {
  33. 					xAxis: {
  34. 						type: 'category',
  35. 						data: keys
  36. 					},
  37. 					yAxis: {
  38. 						type: 'value'
  39. 					},
  40. 					series: [{
  41. 						data: values,
  42. 						type: 'bar'
  43. 					}]
  44. 				};
  45. 				main1.setOption(option,true);
  46. 			};
  47. 		display();
  48. 	</script>
  49. </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. 		<script src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
  6. 		<script src="https://cdn.lyshark.com/javascript/echarts/5.0.0/echarts.min.js"></script>
  7. 	</head>
  9. 	<body>
  10. 		<div class="panel panel-primary" style="width: 100%;height: 30%; float: left">
  11. 			<div class="panel-heading">
  12. 				<h3 class="panel-title">LyShark 网站流量统计</h3>
  13. 			</div>
  14. 			<div class="panel-body">
  15. 				<div id="main" style="width:100%; height: 400px"></div>
  16. 			</div>
  17. 		</div>
  18. 	</body>
  20. 	<script type="text/javascript" charset="UTF-8">
  21. 			var kv = new Array();
  22. 			var keys = new Array();
  23. 			var values = new Array();
  24. 			kv = {{ data | safe }};
  25. 			for(var logkey in kv){
  26. 				keys.push(logkey);
  27. 				values.push(kv[logkey]);
  28. 			}
  30. 			var display = function() {
  31. 				var main = echarts.init(document.getElementById("main"));
  32. 				var option = {
  33. 					xAxis: {
  34. 						type: 'category',
  35. 						boundaryGap: false,
  36. 						data: keys
  37. 					},
  38. 					yAxis: {
  39. 						type: 'value'
  40. 					},
  41. 					series: [{
  42. 						data: values,
  43. 						type: 'line',
  44. 						areaStyle: {},
  45. 					}]
  46. 				};
  47. 				main.setOption(option,true);
  48. 			};
  49. 		display();
  50. 	</script>
  51. </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.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
  7.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.0.0/echarts.min.js"></script>
  8. </head>
  9. <body>
  11.     <!--饼状图绘制方法-->
  12.     <div class="panel panel-primary" style="width: 40%;height: 30%;float: left">
  13.         <div class="panel-heading">
  14.             <h3 class="panel-title">饼状图绘制</h3>
  15.         </div>
  16.         <div class="panel-body">
  17.             <div id="PieChart" style="width:100%; height: 300px"></div>
  18.         </div>
  19.     </div>
  21.     <!--柱状图绘制方法-->
  22.     <div class="panel panel-primary" style="width: 58%;height: 30%; float: right">
  23.         <div class="panel-heading">
  24.             <h3 class="panel-title">柱状图绘制</h3>
  25.         </div>
  26.         <div class="panel-body">
  27.             <div id="HistogramChart" style="width:100%; height: 300px"></div>
  28.         </div>
  29.     </div>
  31.     <!--折线图绘制方法-->
  32.     <div class="panel panel-primary" style="width: 100%;height: 40%; float: left">
  33.         <div class="panel-heading">
  34.             <h3 class="panel-title">折线图绘制</h3>
  35.         </div>
  36.         <div class="panel-body">
  37.             <div id="Linechart" style="width:100%; height: 460px"></div>
  38.         </div>
  39.     </div>
  41.     <!--饼状图绘制方法-->
  42.     <script type="text/javascript" charset="UTF-8">
  43.         var kv = new Array();
  44.         kv = {{ Address | safe }}
  45.         var test = new Array();
  46.         for(var logkey in kv){
  47.             test.push( {value:kv[logkey], name:logkey} )
  48.         }
  49.         var display = function(){
  50.             var echo = echarts.init(document.getElementById("PieChart"));
  51.             var option = {
  52.                 legend: {
  53.                     orient: 'vertical',
  54.                     left: 'left',
  55.                 },
  56.                 series: [
  57.                     {
  58.                         type: 'pie',
  59.                         radius: '70%',
  60.                         center: ['50%', '50%'],
  61.                         detail: {formatter:'{value}'},
  62.                         data: test
  63.                     }
  64.                 ]
  65.             };
  66.             echo.setOption(option,true);
  67.         };
  68.         display();
  69.     </script>
  71.     <!--柱状图绘制方法-->
  72.     <script type="text/javascript" charset="UTF-8">
  73.         var kv = new Array();
  74.         var keys = new Array();
  75.         var values = new Array();
  76.         kv = {{ Types | safe }}
  78.         for(var logkey in kv){
  79.             keys.push(logkey);
  80.             values.push(kv[logkey]);
  81.         }
  82.         var display = function() {
  83.             var echo = echarts.init(document.getElementById("HistogramChart"));
  84.             var option = {
  85.                 tooltip: {
  86.                     trigger: 'axis',
  87.                     axisPointer: {
  88.                       type: 'shadow'
  89.                     }
  90.                 },
  91.                 grid: {
  92.                     left: '3%',
  93.                     right: '4%',
  94.                     bottom: '3%',
  95.                     containLabel: true
  96.                 },
  97.                 xAxis: {
  98.                     type: 'category',
  99.                     data: keys
  100.                 },
  101.                 yAxis: {
  102.                     type: 'value'
  103.                 },
  104.                 series: [{
  105.                     data: values,
  106.                     type: 'bar'
  107.                 }]
  108.             };
  109.             echo.setOption(option,true);
  110.         };
  111.         display();
  112.     </script>
  114.     <!--折线图绘制方法-->
  115.     <script type="text/javascript" charset="UTF-8">
  117.         // 函数主要用于将传入的字典分解成key,value格式并返回
  118.         var get_key_value = function(kv)
  119.         {
  120.             var keys = new Array();
  121.             var values = new Array();
  123.             for(var logkey in kv)
  124.             {
  125.                 keys.push(logkey);
  126.                 values.push(kv[logkey]);
  127.             }
  128.             return [keys,values];
  129.         }
  131.         // 输出1分钟负载
  132.         var kv = new Array();
  133.         kv = {{ x | safe }};
  134.         var x = get_key_value(kv);
  136.         // 输出5分钟负载
  137.         var kv = new Array();
  138.         kv = {{ y | safe }};
  139.         var y = get_key_value(kv);
  141.         // 输出15分钟负载
  142.         var kv = new Array();
  143.         kv = {{ z | safe }};
  144.         var z = get_key_value(kv);
  146.         // 显示利用率
  147.         var display = function() {
  148.             var echo = echarts.init(document.getElementById("Linechart"));
  149.             var option = {
  150.                 title: {
  151.                     left: 'left',
  152.                     text: 'CPU 利用表',
  153.                 },
  154.                 // 调节大小
  155.                 grid: {
  156.                     left: '3%',
  157.                     right: '4%',
  158.                     bottom: '3%',
  159.                     containLabel: true
  160.                 },
  161.                 // tooltip 鼠标放上去之后会自动出现坐标
  162.                 tooltip: {
  163.                     trigger: 'axis',
  164.                     axisPointer: {
  165.                         type: 'cross',
  166.                         label: {
  167.                             backgroundColor: '#6a7985'
  168.                         }
  169.                     }
  170.                 },
  171.             legend: {
  172.                 data: ['1分钟负载', '5分钟负载', '15分钟负载']
  173.             },
  175.             xAxis: {
  176.                 type: 'category',
  177.                 // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  178.                 data: x[0]
  179.             },
  180.             yAxis: {
  181.                 type: 'value'
  182.             },
  183.             series:
  184.             [
  185.                 {
  186.                     name: "1分钟负载",
  187.                     stack: "总量",
  188.                     //data: [10, 25, 99, 87, 54, 66, 2],
  189.                     data: x[1],
  190.                     type: 'line'
  191.                 },
  192.                 {
  193.                     name: "5分钟负载",
  194.                     stack: "总量",
  195.                     //data: [89, 57, 85, 44, 25, 4, 54],
  196.                     data: y[1],
  197.                     type: 'line'
  198.                 },
  199.                 {
  200.                     name: "15分钟负载",
  201.                     stack: "总量",
  202.                     //data: [1, 43, 2, 12, 5, 4, 7],
  203.                     data: z[1],
  204.                     type: 'line'
  205.                 }
  206.             ]
  207.             };
  208.             echo.setOption(option,true);
  209.         };
  210.         display();
  211.     </script>
  212. </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}
  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)

输出效果如下：

Flask 框架：运用Echarts绘制图形的更多相关文章

  1. Flask框架：运用Ajax轮询动态绘图

    Ajax是异步JavaScript和XML可用于前后端交互,在之前<Flask 框架:运用Ajax实现数据交互>简单实现了前后端交互,本章将通过Ajax轮询获取后端的数据,前台使用echa ...

  2. Flask框架：如何运用Ajax轮询动态绘图

    摘要:Ajax是异步JavaScript和XML可用于前后端交互. 本文分享自华为云社区<Flask框架:运用Ajax轮询动态绘图>,作者:LyShark. Ajax是异步JavaScri ...

  3. 使用echarts绘制条形图和扇形图

    使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 <!doctype html> <html lang="en" ...

  4. 面试简历书写、Flask框架介绍与快速使用、Flask演示登录页面、用户信息页面案例

    今日内容概要 面试简历编写 Flask框架介绍与安装 内容详细 1.面试简历编写 # 千万不要几个小时把简历凑出来 几天到一周 # 有没有面试机会,取决于简历写得怎么样 简历写好是第一步 # 投简历的 ...

  5. Flask 框架入门

    Flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 安装 Flask 依赖两个外部库, We ...

  6. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  7. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  8. html5 canvas 笔记一（基本用法与绘制图形）

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  9. Flask框架获取用户IP地址的方法

    本文实例讲述了python使用Flask框架获取用户IP地址的方法.分享给大家供大家参考.具体如下: 下面的代码包含了html页面和python代码,非常详细,如果你正使用Flask,也可以学习一下最 ...

随机推荐

  1. cordova 发送ajax请求的相关配置

    <access origin="*" /> <preference name="scheme" value="http" ...

  2. Javaweb-JSP详解

    一.什么是JSP Java Server Pages:Java服务器端页面,和Servlet一样,用于动态web技术 最大的特点: 写JSP就像在写HTML 区别: HTML只给用户提供静态的数据 J ...

  3. 【原创】Selenium获取请求头、响应头

    本文仅供学习交流使用,如侵立删! Selenium获取请求头.响应头 操作环境 win10 . mac Python3.9 selenium.seleniumwire selenium是没有办法直接获 ...

  4. ceph 007 双向池同步 rgw对象网关配置 s3对象存储

    增量导入导出要基于快照 导出的过程当中害怕镜像被修改所以打快照.快照的数据是不会变化的 镜像级别的双向同步 镜像主到备,备到主.一对一 就算是池模式的双向同步,镜像也具有主备关系 双向同步,池模式 [ ...

  5. SpringBoot 注解简介(持续更新)

    虽然工作中交替会使用spring mvc 和spring boot 框架,但实际对spring中的很多注解并不是很了解,本篇将持续更新学习到的spring 注解. Spring 主入口类上的注解 Sp ...

  6. HTTP 的 Content-Type 及其媒体类型(MIME)

    Content-Type Content-Type 代表 HTTP 携带的文件类型,决定文件接收方或发送方将以什么形式.什么编码读取这个文件.下图,load.gif 的媒体类型就是 image/gif ...

  7. Mybatis 懒加载使用及源码分析

    Mybatis 懒加载的使用 什么是懒加载?懒加载的意思就是在使用的时候才去加载,不使用不去加载,相反的就叫饥饿加载或者立即加载.懒加载在Mybatis中一般是存在与联合查询的情况,比如查询一个对象的 ...

  8. NOI P序列题 （二分）

    题面 题解 --WQS二分 想到这个这题就完了. 赛时没想到这个你就完了. 时间复杂度 O ( n log ⁡ a ) O(n\log a) O(nloga) 不难发现这题有凸性,可以WQS二分. 我 ...

  9. 前端利器躬行记（8）——VSCode插件研发

    VSCode提供了丰富的 API,可以借助编辑器扩展许多定制功能. 本次研发了一款名为 Search Method 的插件,在此记录整个研发过程. 一.准备工作 1)安装环境 首先是全局安装 yo 和 ...

  10. 第二十八篇:关于node.js连接数据库

    好家伙,这个不难,但是也不简单. $ cnpm install mysql 教程里是带美元符的,但是我打的时候加上美元符用不了,所以我就没用美元符了,一样能行. 还有,淘宝镜像,yyds, var m ...