赞
踩
- import pymysql
-
- class Mysql(object):
- # 创建 Mysql 类的实例时自动调用
- def __init__(self):
- # 建立MySQL数据库连接
- self.conn = pymysql.connect(host='localhost', user='root', password='123456', database='houses', charset="utf8")
- # 创建了一个游标对象cursor,用于执行SQL命令
- self.cursor = self.conn.cursor()
-
- # 这个方法使得 Mysql 类的实例可以作为上下文管理器使用
- def __enter__(self):
- return self
-
- # 负责关闭游标和数据库连接
- def __exit__(self, exc_type, exc_val, exc_tb):
- self.cursor.close()
- self.conn.close()
-
- # 返回的结果是一个元组列表,每个元组代表house_sum表中的一行数据。
- def house(self):
- sql = "select * from house_sum"
- self.cursor.execute(sql)
- return self.cursor.fetchall()
- from flask import Flask, send_from_directory
- from flask import render_template
- from mysql import Mysql
-
- app = Flask(__name__)
-
- # 将 getdata 函数绑定到根URL路径('/')。这意味着当用户访问服务器的根地址时,将调用 getdata 函数。
- @app.route('/')
- # 这个函数是处理根URL路径的视图函数
- def getdata():
- # 创建了一个 Mysql 类的实例,用于与MySQL数据库建立连接。
- db = Mysql()
- # 调用 db.house() 方法,执行SQL查询并获取结果。
- item = db.house()
- # 将查询结果转换为字典列表,其中每个字典包含 name 和 value 键,分别对应于数据库表中的列。
- data = [{'name': row[0], 'value': row[1]} for row in item]
- # 使用 render_template 函数渲染 house_bing.html 模板,并将转换后的数据作为参数传递给模板。
- return render_template('house_bing.html', data=data)
-
-
- if __name__ == '__main__':
- app.run(debug=True) #debug=True发生错误时会返回发生错误的地方
render_template():调用了”render_template()”方法来渲染模板。方法的第一个参数”echarts.html”指向你想渲染的模板名称,第二个参数”data”是你要传到模板去的变量,变量可以传多个。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>数据可视化</title>
- <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
- <link rel="stylesheet" href="/static/style.css">
- </head>
- <body>
- <div id="main"></div>
- <script type="text/javascript">
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.getElementById('main'));
-
- //获取数据 将data变量中的数据插入到HTML中。
- // |safe是一个过滤器,它确保插入的数据被正确地转义,以避免XSS攻击。
- var data = {{ data|safe }};
- //调用data数组的map方法创建一个新数组
- var newData = data.map(function(item) {
- return {
- //正则表达式,将item.name中的所有单引号('),替换为空字符串。这里的/g标志表示全局搜索,即替换所有匹配项,而不仅仅是第一个。
- name: item.name.replace(/'/g, ''),
- value: item.value
- };
- });
-
- // 指定图表的配置项和数据
- var option = {
- title: {
- text: '统计每个区(总共16区)房屋总数',
- left:'center',
- textStyle: {
- fontSize: 25
- },
- },
- //当用户将鼠标悬停在图表的数据项上时,工具提示会显示。
- tooltip: {
- "show": true,
- "trigger": "item", //通过图表中的数据项(item)来触发的
- },
- //配置图表工具箱
- toolbox: {
- show: true,
- //定义了工具箱中包含的功能选项
- feature: {
- mark: { show: true },
- dataView: { show: true, readOnly: false }, //定义了数据视图的功能
- restore: { show: true }, //定义了恢复图表默认状态的功能
- saveAsImage: { show: true } //定义了将图表保存为图片的功能
- }
- },
- //图例
- legend: {
- orient: 'vertical',
- left: 'left',
- top: '10%'
- },
- //图表系列
- series: [{
- type: 'pie',
- radius: ['40%', '65%'], //饼图的半径
- center: ['50%', '50%'], //饼图的中心位置
- roseType: "radius", //饼图是否展示成南丁格尔玫瑰图
- avoidOversetting: false, //控制是否避免标签重叠
- //饼图数据项的样式
- itemStyle: {
- borderRadius: 18, //数据项的边框半径为18像素
- borderWidth: 2 //数据项的边框宽度为2像素
- },
- //定义了当数据项被强调时的样式,比如鼠标悬停时的样式。
- emphasis: {
- itemStyle: {
- shadowBlur: 10, //设置阴影的模糊度为10像素
- shadowOffsetX: 0, //设置阴影在水平方向上的偏移量为0像素。
- shadowColor: 'rgba(0, 0, 0, 0.5)' //设置阴影的颜色为半透明的黑色。
- },
- //标签样式
- label: {
- show: true,
- position: 'inside' //标签位置在数据项内部
- },
- },
- data:newData,
- "label": {
- "show": true,
- "margin": 10,
- "formatter": "{b} : {c} ({d}%)" //{b}代表标签的名称,{c}代表数值,{d}%代表百分比
- }
- }]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- </script>
- </body>
- </html>
运行完,点击 http://127.0.0.1:5000/可以看到html所绘制的玫瑰图
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。