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

最新推荐文章于 2024-05-29 02:54:39 发布

阿乐今天敲代码没

最新推荐文章于 2024-05-29 02:54:39 发布

阅读量1.6w

点赞数 40

分类专栏：前后端交互文章标签： mysql flask echarts

本文链接：https://blog.csdn.net/qq_45840993/article/details/115378692

版权

前后端交互专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前言

社区版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数据库的数据，可以看到我们的饼图数据也变了。

补充

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

阿乐今天敲代码没

关注

40
点赞
踩
370

收藏

觉得还不错? 一键收藏
打赏
21
评论
Mysql+Echarts+Python+Flask实现前后端交互及数据可视化

前言社区版Pycharm实现python+flask+echarts+Mysql实现简单的前后端交互。新手入门，记录经验，欢迎交流。一、首先检测Flask框架是否成功？首先，在你的项目下中安装flask库。具体步骤为file->settings->Python Interpreter，点击“+”，在搜索栏中输入flask，搜索并安装。第二步，在你的项目下新建一个python文件，在这里我将其命名为test.py，内容如下：from flask import Flaskapp =
复制链接

扫一扫