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

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

阿乐今天敲代码没

16578人浏览 · 2021-04-01 17:33:32

阿乐今天敲代码没 · 2021-04-01 17:33:32 发布

前言

社区版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>