devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Python flask + Mysql +Echarts ：实现数据可视化（玫瑰图）_flask和数据库交互在echarts展示

作者：代码探险家 | 2024-08-02 12:15:21

赞

踩

flask和数据库交互在echarts展示

目录

步骤一：建立Myslq数据库连接

步骤二：开发Flask应用

步骤三：创建前端页面（house_bing.html ）

步骤四：运行Flask应用并查看玫瑰图

步骤一：建立Myslq数据库连接

  1. import pymysql
  2.  
  3. class Mysql(object):
  4.     # 创建 Mysql 类的实例时自动调用
  5.     def __init__(self):
  6.         # 建立MySQL数据库连接
  7.         self.conn = pymysql.connect(host='localhost', user='root', password='123456', database='houses', charset="utf8")
  8.         # 创建了一个游标对象cursor，用于执行SQL命令
  9.         self.cursor = self.conn.cursor()
  10.  
  11.     # 这个方法使得 Mysql 类的实例可以作为上下文管理器使用
  12.     def __enter__(self):
  13.         return self
  14.  
  15.     # 负责关闭游标和数据库连接
  16.     def __exit__(self, exc_type, exc_val, exc_tb):
  17.         self.cursor.close()
  18.         self.conn.close()
  19.  
  20.     # 返回的结果是一个元组列表，每个元组代表house_sum表中的一行数据。
  21.     def house(self):
  22.         sql = "select * from house_sum"
  23.         self.cursor.execute(sql)
  24.         return self.cursor.fetchall()

步骤二：开发Flask应用

  1. from flask import Flask, send_from_directory
  2. from flask import render_template
  3. from mysql import Mysql
  4.  
  5. app = Flask(__name__)
  6.  
  7. # 将 getdata 函数绑定到根URL路径（'/'）。这意味着当用户访问服务器的根地址时，将调用 getdata 函数。
  8. @app.route('/')
  9. # 这个函数是处理根URL路径的视图函数
  10. def getdata():
  11.     # 创建了一个 Mysql 类的实例，用于与MySQL数据库建立连接。
  12.     db = Mysql()
  13.     # 调用 db.house() 方法，执行SQL查询并获取结果。
  14.     item = db.house()
  15.     # 将查询结果转换为字典列表，其中每个字典包含 name 和 value 键，分别对应于数据库表中的列。
  16.     data = [{'name': row[0], 'value': row[1]} for row in item]
  17.     # 使用 render_template 函数渲染 house_bing.html 模板，并将转换后的数据作为参数传递给模板。
  18.     return render_template('house_bing.html', data=data)
  19.  
  20.  
  21. if __name__ == '__main__':
  22.     app.run(debug=True)    #debug=True发生错误时会返回发生错误的地方

render_template()：调用了”render_template()”方法来渲染模板。方法的第一个参数”echarts.html”指向你想渲染的模板名称，第二个参数”data”是你要传到模板去的变量，变量可以传多个。

步骤三：创建前端页面（house_bing.html ）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数据可视化</title>
  6.     <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
  7.     <link rel="stylesheet" href="/static/style.css">
  8. </head>
  9. <body>
  10. <div id="main"></div>
  11.     <script type="text/javascript">
  12.         // 基于准备好的dom，初始化echarts实例
  13.         var myChart = echarts.init(document.getElementById('main'));
  14.  
  15.          //获取数据 将data变量中的数据插入到HTML中。
  16.          // |safe是一个过滤器，它确保插入的数据被正确地转义，以避免XSS攻击。
  17.          var data = {{ data|safe }};
  18.           //调用data数组的map方法创建一个新数组
  19.          var newData = data.map(function(item) {
  20.               return {
  21.               //正则表达式，将item.name中的所有单引号（'），替换为空字符串。这里的/g标志表示全局搜索，即替换所有匹配项，而不仅仅是第一个。
  22.                 name: item.name.replace(/'/g, ''),
  23.                 value: item.value
  24.               };
  25.          });
  26.  
  27.         // 指定图表的配置项和数据
  28.         var option = {
  29.             title: {
  30.                 text: '统计每个区（总共16区）房屋总数',
  31.                 left:'center',
  32.                 textStyle: {
  33.                       fontSize: 25
  34.                 },
  35.             },
  36.             //当用户将鼠标悬停在图表的数据项上时，工具提示会显示。
  37.             tooltip: {
  38.                "show": true,
  39.                 "trigger": "item", //通过图表中的数据项（item）来触发的
  40.             },
  41.             //配置图表工具箱
  42.             toolbox: {
  43.                 show: true,
  44.                 //定义了工具箱中包含的功能选项
  45.                 feature: {
  46.                 mark: { show: true },
  47.                 dataView: { show: true, readOnly: false }, //定义了数据视图的功能
  48.                 restore: { show: true }, //定义了恢复图表默认状态的功能
  49.                 saveAsImage: { show: true }  //定义了将图表保存为图片的功能
  50.                 }
  51.             },
  52.             //图例
  53.             legend: {
  54.                 orient: 'vertical',
  55.                 left: 'left',
  56.                 top: '10%'
  57.             },
  58.             //图表系列
  59.             series: [{
  60.                 type: 'pie',
  61.                 radius: ['40%', '65%'], //饼图的半径
  62.                 center: ['50%', '50%'],  //饼图的中心位置
  63.                 roseType: "radius", //饼图是否展示成南丁格尔玫瑰图
  64.                 avoidOversetting: false,  //控制是否避免标签重叠
  65.                 //饼图数据项的样式
  66.                 itemStyle: {
  67.                     borderRadius: 18,  //数据项的边框半径为18像素
  68.                     borderWidth: 2  //数据项的边框宽度为2像素
  69.                 },
  70.                 //定义了当数据项被强调时的样式，比如鼠标悬停时的样式。
  71.                 emphasis: {
  72.                     itemStyle: {
  73.                         shadowBlur: 10,  //设置阴影的模糊度为10像素
  74.                         shadowOffsetX: 0,  //设置阴影在水平方向上的偏移量为0像素。
  75.                         shadowColor: 'rgba(0, 0, 0, 0.5)'  //设置阴影的颜色为半透明的黑色。
  76.                     },
  77.                     //标签样式
  78.                     label: {
  79.                         show: true,
  80.                         position: 'inside'  //标签位置在数据项内部
  81.                     },
  82.                 },
  83.                 data:newData,
  84.                 "label": {
  85.                     "show": true,
  86.                     "margin": 10,
  87.                     "formatter": "{b} : {c} ({d}%)" //{b}代表标签的名称，{c}代表数值，{d}%代表百分比
  88.                 }
  89.             }]
  90.         };
  91.         // 使用刚指定的配置项和数据显示图表。
  92.         myChart.setOption(option);
  93.     </script>
  94. </body>
  95. </html>

步骤四：运行Flask应用并查看玫瑰图

运行完，点击 http://127.0.0.1:5000/可以看到html所绘制的玫瑰图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/918552
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号