前言

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

补充

文件目录结构

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

前端（echarts+百度地图api）后端（python+flask）完成绵阳餐饮消费数据可视化系统
一.可视化要求针对团购网站餐饮类消费数据的可视分析系统设计与开发大多数消费者在选择团购网站消费后会做出相应评价,从而产生海量的交易数据.这些数据包含了消费者对饮食比较全面的主观性评价和量化评分,因 ...
Python做web前后端交互
Python web开发入门 ------------------------------------------------------------------------------------- ...
python flask 分页前后端分离_flask展示pyecharts图表前后端分离的问题
我按照pyecharts的官网案例学习flask,其中有段flask前后端分离的示例. 官方教程:https://pyecharts.org/#/zh-cn... 我用前后端分离展示柱状图.饼图都没问 ...
python如何实现前后端交互_笔记 | 实现前后端交互的方法
前端工程师的职责:1.UI重构 2.在正确的区域渲染出服务端的数据. 毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列前端工程师应该必备的同后端打交道的常用技能. 1. ...
Python+Flask+爬虫双色球数据采集及大数据可视化平台
文件大小:68M 开发环境:Python3.8.MySQL8.0.火狐浏览器点击下载:点击下载简要概述:项目主要构成有数据爬虫.数据可视化.数据管理.数据预测四大部分,爬虫爬取数据,可视化进行分析 ...
python flask 分页前后端分离_【flask + vue 前后端分离博客】创建第一个 Flask RESTFul（一）...
1. 代码管理 1.1 创建仓库 github 上创建仓库:flask-vuejs-madblog,并选择开源协议为 MIT License(也可以选择 gitee,速度快一些比之 github). ...
类Flask实现前后端交互之代码聊天室
前言框架项目目录及各自功能流程图后端 server backend exector 前端 ajax 页面更新演示简易应答模式代理模式处理外部请求后台日志总结前言这两天老是做梦,全 ...
Python前后端交互（ Flask Ajax ）
本文是自己学习Python前后端交互记录使用,之前没有学习过Python任何框架,前端也是简单学了一下,如哪里有问题,还望大家批评改正. 1. 前端 1.1 HTML布局这个就不用说啥了,登录长啥样 ...
Python 实现机器学习前后端页面的交互
作者 | 俊欣来源丨关于数据分析与可视化对于机器学习爱好者而言,很多时候我们需要将建好的模型部署在线上,实现前后端的交互,今天小编就通过Flask以及Streamlit这两个框架实现机器学习模型的 ...

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

前言