Mysql+Echarts+Python+Flask实现前后端交互及数据可视化

前言

社区版Pycharm实现python+flask+echarts+Mysql实现简单的前后端交互。
新手入门,记录经验,欢迎交流。

一、首先检测Flask框架是否成功?

首先,在你的项目下中安装flask库。
具体步骤为file->settings->Python Interpreter,点击“+”,在搜索栏中输入flask,搜索并安装。
第二步,在你的项目下新建一个python文件,在这里我将其命名为test.py,内容如下:

from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
    return '<h1>Hello World</h1>'
if __name__ == '__main__':
    app.run(debug=True)

点击运行,可以看到下面有一个“http://127.0.0.1:5000/”,点击进入后就可以看到“Hello World”字样,测试到此成功!!!激动不!!!
在这里插入图片描述

二、正式部署Mysql+Echarts+python

1.建立Mysql数据库

前后端交互当然要先有一个后端啦,我使用的是Navicat来操作Mysql,(既然大家都做到前后端交互了,那Mysql的使用一定不在话下,这里不再赘述),数据库名为data,表名为people_flow,内容如下:
在这里插入图片描述

2.Mysql连接

在你的项目下新建两个文件夹,分别命名为static、templates。把echarts.min.js放在static文件夹下(echarts.min.js可以在echarts官网进行下载)。
第二步,在你的工程项目下新建server.py文件,代码示例如下:

from flask import Flask, render_template
import pymysql
app = Flask(__name__)
@app.route("/")
def my_echart():
    conn = pymysql.connect(host='127.0.0.1', user='你的数据库用户名', password='你的数据库密码', db='你的数据库名,在这里为data')#建立数据库连接
    cur = conn.cursor()
    sqlmale = ' SELECT count(sex) FROM  people_flow where sex=1 '
    sqlfemale = ' SELECT count(sex) FROM  people_flow where sex=0'
    sqls = ' SELECT sex FROM  people_flow '
    cur.execute(sqlmale)#执行单条sql语句
    maleresult = cur.fetchall()#接收全部的返回结果行
    cur.execute(sqlfemale)
    femaleresult = cur.fetchall()
    cur.execute(sqls)
    results = cur.fetchall()
    male_num = maleresult[0][0]
    female_num = femaleresult[0][0]
    num1 = []
    for result in results:
        num1.append(result[0])
    cur.close()#关闭指针对象
    conn.close()#关闭连接对象
    # print(male_num)#测试
    # print(female_num)
    # print(num1)
    return render_template('bar.html',male_num=male_num,female_num=female_num, num1=num1)#先引入bar.html,同时根据后面传入的参数,对html进行修改渲染
if __name__ == '__main__':
    app.run(debug=True)#启用调试模式

3.数据可视化的实现

在上一步中,我们已经实现了Mysql与Python的连接,现在我们在templates文件夹下创建一个HTML文件,并命名为bar.html,内容如下:

<!DOCTYPE html>
<html>
<head>
   <!--指定编码格式,防止中文乱码-->
    <meta charset="utf-8"> 
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
</head>
<body>
<!--设定图像的对齐方式为居中对齐-->
<div align="center"></div>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
 <!--放在<script></script>之间的是文本类型(text),javascript是告诉浏览器里面的文本是属于javascript脚本-->
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 获取变量
    var mannum = "{{male_num }}";
    var womennum = "{{ female_num }}";
    // 饼图配置文件
    option_pie = {
        title: {
            text: '班级性别统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['男', '女']
        },
        series: [
            {
                name: '性别',
                type: 'pie',
                radius: '55%',
                center: ['40%', '60%'],
                data: [
                    {value: [mannum], name: '男'},
                    {value: [womennum], name: '女'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
        color: ['rgb(131,175,155)', 'rgb(252,157,154)', 'rgb(249,205,173)', 'rgb(200,200,169)']
    };
    function makePie() {
        myChart.clear();
        myChart.setOption(option_pie);//setOption方法生成一个简单的饼状图
    }
    // 初始化选择画饼图
    makePie()
</script>
</body>
</html>

现在就可以运行你的server.py文件了,运行后下方就会出现127.0.0.1:5000的链接,点击链接就会出现下面的界面,实验至此成功!!!

在这里插入图片描述
-------------------------------美丽的分隔符----------------------------------------
现在更改一下我们的Mysql数据库的数据,可以看到我们的饼图数据也变了。
在这里插入图片描述

补充

文件目录结构
文件目录结构在这里插入图片描述

  • 37
    点赞
  • 336
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
### 回答1: 使用FlaskMySQL实现数据可视化,可以通过以下步骤来实现: 1. 使用Flask来搭建Web应用程序,根据需要设置路由和视图函数。 2. 使用MySQL数据库来存储数据,建立需要的数据表,并通过Flask的SQLAlchemy库进行数据交互。 3. 使用Echarts库来实现数据可视化,通过Flask的路由将需要展示的数据传递给前端页面,并将数据绑定到Echarts图形中进行展示。 通过上述步骤,就可以实现Flask+MySQL+Echarts数据可视化。 ### 回答2: Flask是一个用Python编写的轻量级Web应用框架;MySQL是一种关系型数据库;而Echarts是一个由百度公司开发的数据可视化库。将FlaskMySQLEcharts组合使用,可以实现数据的可视化展示,使数据更具可读性和可理解性。 实现步骤如下: 1.搭建Flask框架,建立路由,用于数据传输。 2.连接MySQL数据库,使用Python的pymysql模块连接数据库。 3.从MySQL数据库中读取所需的数据,并将它们存入Python中的数据结构中,如字典或列表,然后将其传回到Flask应用中。 4.编写Echarts图表,并将数据插到其中。可以选择线形图、条形图、饼图、地图等不同的图表类型,并根据需求自定义颜色、字体、动画效果等。 5.最后将Echarts图表嵌入到Flask应用中,使其显示在网页上,供用户查看并互动。 对于使用FlaskMySQLEcharts实现数据可视化的具体步骤,我将稍微详细说明一下。 一、搭建Flask框架 Flask是一个微型框架,采用了Werkzeug工具箱和Jinja2模板引擎。我们需要安装Flask和相关的依赖项,建立Flask应用程序,然后建立路由,使得我们可以传输数据到和从Flask应用程序中。 二、连接MySQL数据库 我们可以使用比Python标准库中的MySQLdb更流行的pymysql模块来连接我们的MySQL数据库。我们需要提供数据库的用户名和密码,以及主机名、端口、要使用的数据库等其他相关信息。连接后,可以通过Python执行SQL查询或更新,以读取或写入数据。 三、读取数据并传回Flask应用程序: 使用Python代码向数据库查询所需数据,从结果中提取所需信息,然后返回组成数据结构,如列表或字典。在Flask应用程序中设置一个路由,可以识别来自前端JavaScript的HTTP GET请求,并将响应作为JSON格式数据发送回前端。 四、编写Echarts图表 我们可以使用Echarts图表库中的各种类型的图表,用于不同的数据可视化需求。我们可以选择线形图、条形图、散点图、饼图、地图等。Echarts提供了一个函数接口,可以直接把数据传入图表,然后用JavaScript来呈现。 五、将Echarts图表嵌入到Flask应用中 将Echarts图表嵌入到Flask应用程序中,需要在前端JavaScript中调用我们已设置好的路由,向Flask应用程序请求数据,并在响应到达时调用Echarts图表组件来显示数据。    综上所述,使用FlaskMySQLEcharts结合实现数据可视化,可以让数据更生动形象,让用户对数据有更好的理解和掌握,进而提升整个数据应用的效率和可靠性。 ### 回答3: Flask是一个非常流行的Python Web框架,可以用来搭建Web应用程序。MySQL是一个开源、轻量级的关系型数据库管理系统。而echarts是一个非常强大的JavaScript图表库,可以用来展示各种数据。 通过将这三者结合起来,可以实现数据可视化,即将MySQL中的数据通过Flask进行处理和展示,并使用echarts将这些数据以图表的方式呈现出来。 实现该过程的基本步骤如下: 1.使用Python连接MySQL数据库并读取数据。 2.使用Flask框架编写Web应用程序,包括提供数据的API接口、前端页面等。 3.在前端页面中使用echarts库进行数据可视化展示。可以绘制多种类型的图表,如折线图、柱状图、饼图等,根据数据的具体情况选择合适的图表类型。 具体实现步骤如下: 1.安装MySQLFlask库,分别使用以下命令: pip install mysql-connector-python pip install Flask 2.编写Python代码,连接MySQL数据库,并读取需要展示的数据。代码示例: import mysql.connector cnx = mysql.connector.connect(user='用户名', password='密码', host='主机名', database='数据库名') cursor = cnx.cursor() query = "SELECT * FROM 表名" cursor.execute(query) data = cursor.fetchall() 3.编写Flask应用程序,提供API接口。代码示例: from flask import Flask, jsonify app = Flask(__name__) @app.route("/data") def get_data(): # 数据读取及处理 return jsonify(data) if __name__ == "__main__": app.run() 4.编写前端页面,使用echarts库进行数据可视化展示。代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据可视化展示</title> </head> <body> <!--echarts图表展示区域--> <div id="chart" style="width: 600px; height:400px;"></div> <!--echarts库的引入--> <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.1/echarts.min.js"></script> <!--数据获取及图表绘制--> <script> var dataUrl = "/data"; $.get(dataUrl, function (data) { var chart = echarts.init(document.getElementById('chart')); var option = { xAxis: { type: 'category', data: data.xAxisData }, yAxis: { type: 'value' }, series: [{ data: data.seriesData, type: 'bar' }] }; chart.setOption(option); }); </script> </body> </html> 以上就是Flask MySQL echarts实现数据可视化的基本步骤,通过这种方式可以方便地展示各种类型的数据。在实际项目中,还需要根据具体情况进行相应的调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿乐今天敲代码没

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值