1.数据准备

现有一个数据集：student.csv，数据如下所示：

将该数据集粘贴到data目录下，因为数据集有汉字，因此提示乱码，点击“以GBK重新加载”，如下图所示：

重新加载的数据以及pycharm目录结构如下图所示：

2.读取本地数据，多图绘制

在main.py添加如下代码，截图如下：

完整的main.py代码如下：

<code>import json

import pyecharts.charts

from flask import Flask, render_template

from pyecharts import options as opts

from markupsafe import Markup # 导入 Markup，用于在 Flask 模板中安全地渲染 HTML

from pyecharts import charts

import pandas as pd

from sqlalchemy import create_engine

from pyecharts.charts import Pie, Bar, Line

app=Flask(__name__) # 创建一个 Flask 应用实例

# ------------------1.单图展示------------------------

# 使用 Flask 的装饰器 @app.route 来定义一个路由

# 当访问 "/show_pyecharts" 路径时，会调用 show_pyecharts 函数

@app.route("/show_pyecharts")

def show_pyecharts():

bar = (

Bar()

.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])

.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])

)

# 渲染模板 "show_pyecharts.html"，并将生成的 Bar 图表的配置选项作为参数传递给模板

return render_template("show_pyecharts.html", bar_options=bar.dump_options())

@app.route("/show_pyecharts_02")

def show_pyecharts_02():

x = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

y = [5, 20, 36, 10, 75, 90]

data = [list(z) for z in zip(x, y)]

pie = (

Pie()

.add("", data_pair=data)

)

return render_template("show_pyecharts_02.html", pie_options=pie.dump_options())

# ----------2.本地数据，多图展示------------------------

df = pd.read_csv("./data/student.csv", encoding='gbk')code>

grade_counts = df['年级'].value_counts().reset_index()

grade_counts.columns = ['年级', '人数']

def get_pie():

pie = (

Pie()

.add("",grade_counts.values.tolist(),

label_opts=opts.LabelOpts(formatter="{b}:{c}"),code>

radius=["40%", "75%"],

center=["50%", "50%"])

.set_global_opts(title_opts=opts.TitleOpts(title="年级人数"),code>

legend_opts=opts.LegendOpts(orient="vertical",code>

pos_left="2%", pos_top="15%"))code>

)

return pie

def get_bar():

bar = (

Bar()

.add_xaxis(grade_counts['年级'].tolist())

.add_yaxis("人数",grade_counts["人数"].tolist())

.set_global_opts(title_opts=opts.TitleOpts(title="各年级人数分布柱状图"))code>

)

return bar

def get_line():

line = (

Line()

.add_xaxis(grade_counts['年级'].tolist())

.add_yaxis("人数", grade_counts['人数'].tolist())

.set_global_opts(title_opts=opts.TitleOpts(title="各年级人数分布折线图"))code>

)

return line

@app.route('/show_pyecharts_03')

def show_pyecharts_03():

pie = get_pie()

bar = get_bar()

line = get_line()

return render_template("show_pyecharts_03.html", pie_options=pie.dump_options()

, bar_options=bar.dump_options(), line_options=line.dump_options())

# ------------3.MySQL数据，多图展示-------------------------

# 自定义函数连接windows端的MySQL数据库，获取数据

def connFunc():

engine = create_engine("mysql+pymysql://root:您的密码@localhost:3306/test")

sql = '''select 年级,count(1) as 人数 from student group by 年级'''

data = pd.read_sql(sql, engine)

return data

# 读取MySQL数据，自定义绘图函数

def get_pie_mysql():

data = connFunc()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

data_list = [list(z) for z in zip(sex_list, cnt_list)]

c = (

pyecharts.charts.Pie()

.add("", data_list)

.set_global_opts(title_opts=opts.TitleOpts(title="Pie示例"))code>

.set_global_opts(title_opts=opts.LabelOpts(formatter="{b}:{c}"))code>

)

return c

def get_bar_mysql():

data = connFunc()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

c = (

pyecharts.charts.Bar()

.add_xaxis(sex_list)

.add_yaxis("人数", cnt_list)

.set_global_opts(title_opts=opts.TitleOpts(title="bar示例", subtitle="bar"))code>

)

return c

def get_line_mysql():

data = connFunc()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

c = (

pyecharts.charts.Line()

.add_xaxis(sex_list)

.add_yaxis("人数", cnt_list)

)

return c

@app.route('/show_pyecharts_04')

def show_pyecharts_04():

pie = get_pie_mysql()

bar = get_bar_mysql()

line = get_line_mysql()

return render_template("show_pyecharts_04.html", pie_options=pie.dump_options()

, bar_options=bar.dump_options(), line_options=line.dump_options())

if __name__ == "__main__":

app.run(host='127.0.0.1', port=5000, debug=True)code>

在templates目录下，新建目录：show_pyecharts_04.html。

清空show_pyecharts_04.html内容，粘贴以下代码：

show_pyecharts_04.html的代码和show_pyecharts_03.html的一致。show_pyecharts_04.html的代码如下：

<code><!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />code>

<title>ECharts</title>

<style >

/* CSS 样式将放在这里 */

.chart-container{ -- -->

display:flex;

flex-direction:column; /* 默认为column，表示垂直布局 */

justify-content:center: /* 水平居中 */

align-items:center; /* 垂直居中（如果需要的话） */

height:150vh; /* 根据需要设置容器高度 */

width:100%; /* 占据全屏宽度 */

}

.chart-row{

display: flex; /* 每一行都是一个flex容器 */

justify-content:space-between; /* 列之间均匀分布 */

margin-bottom:50px; /* 行与行之间的间距 */

}

.chart-item{

flex: 1; /* 每个flex item占据相等的空间 */

margin: 0 10px; /* 图表之间的间距 */

}

</style>

<!-- 引入刚刚下载的 ECharts 文件 -->

<script src="/static/echarts.js"></script>code>

</head>

<body>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div class="chart-container">code>

<div class="chart-row">code>

<div class="chart-item" id="pie" style="width: 600px;height:400px;"></div>code>

<div class="chart-item" id="bar" style="width: 600px;height:400px;"></div>code>

</div>

<div class="chart-row">code>

<div class="chart-item" id="line" style="width: 600px;height:400px;"></div>code>

<h1>待绘制</h1>

<div class="chart-item" id="backUp" style="width: 400px;height:300px;"></div>code>

</div>

</div>

<script type="text/javascript">code>

// 基于准备好的dom，初始化echarts实例

var pieChart = echarts.init(document.getElementById('pie'));

var barChart = echarts.init(document.getElementById('bar'));

var lineChart = echarts.init(document.getElementById('line'));

// 使用刚指定的配置项和数据显示图表。

pieChart.setOption({ -- -->{ pie_options | safe }});

barChart.setOption({ { bar_options | safe }});

lineChart.setOption({ { line_options | safe }});

</script>

</body>

</html>

在main.py中点击运行，打开链接:http://127.0.0.1:5000/show_pyecharts_04，可视化大屏如下图所示：

六、Flask+Pyecharts+大数据集群(Linux)：绘制数据可视化大屏

<code>show databases;

创建数据库test。

<code>create database test;

查看数据库。

show databases;

代码截图如下：

使用test数据库

<code>use test;

在test数据库中，创建表student。

<code>CREATE TABLE student(学号 varchar(100),性别 varchar(100),年级 varchar(100),成绩 int);

加载数据集student.csv到表student。

<code>load data infile '/var/lib/mysql-files/student.csv' into table student character set gbk fields terminated by ',' enclosed by '"' lines terminated by '\n' ignore 1 rows;

加载数据以及查询表的截图如下：

在本文中，数据集student.csv加载到表student中，模拟集群处理大数据后保存在MySQL数据库中的数据，如Hive，Spark处理后的数据。

2.读取大数据集群的MySQL数据，绘制可视化大屏

自定义函数，读取master节点的MySQL数据

请注意：需要将MySQL用户名和密码，替换成您的用户名和密码，IP地址也替换成您的节点IP地址。

读取master节点（Linux系统）中的MySQL数据，自定义绘图函数。

main.py的完整代码如下：

<code>import json

import pyecharts.charts

from flask import Flask, render_template

from pyecharts import options as opts

from markupsafe import Markup # 导入 Markup，用于在 Flask 模板中安全地渲染 HTML

from pyecharts import charts

import pandas as pd

from sqlalchemy import create_engine

from pyecharts.charts import Pie, Bar, Line

app=Flask(__name__) # 创建一个 Flask 应用实例

# ------------------1.单图展示------------------------

# 使用 Flask 的装饰器 @app.route 来定义一个路由

# 当访问 "/show_pyecharts" 路径时，会调用 show_pyecharts 函数

@app.route("/show_pyecharts")

def show_pyecharts():

bar = (

Bar()

.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])

.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])

)

# 渲染模板 "show_pyecharts.html"，并将生成的 Bar 图表的配置选项作为参数传递给模板

return render_template("show_pyecharts.html", bar_options=bar.dump_options())

@app.route("/show_pyecharts_02")

def show_pyecharts_02():

x = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

y = [5, 20, 36, 10, 75, 90]

data = [list(z) for z in zip(x, y)]

pie = (

Pie()

.add("", data_pair=data)

)

return render_template("show_pyecharts_02.html", pie_options=pie.dump_options())

# ----------2.本地数据，多图展示------------------------

df = pd.read_csv("./data/student.csv", encoding='gbk')code>

grade_counts = df['年级'].value_counts().reset_index()

grade_counts.columns = ['年级', '人数']

def get_pie():

pie = (

Pie()

.add("",grade_counts.values.tolist(),

label_opts=opts.LabelOpts(formatter="{b}:{c}"),code>

radius=["40%", "75%"],

center=["50%", "50%"])

.set_global_opts(title_opts=opts.TitleOpts(title="年级人数"),code>

legend_opts=opts.LegendOpts(orient="vertical",code>

pos_left="2%", pos_top="15%"))code>

)

return pie

def get_bar():

bar = (

Bar()

.add_xaxis(grade_counts['年级'].tolist())

.add_yaxis("人数",grade_counts["人数"].tolist())

.set_global_opts(title_opts=opts.TitleOpts(title="各年级人数分布柱状图"))code>

)

return bar

def get_line():

line = (

Line()

.add_xaxis(grade_counts['年级'].tolist())

.add_yaxis("人数", grade_counts['人数'].tolist())

.set_global_opts(title_opts=opts.TitleOpts(title="各年级人数分布折线图"))code>

)

return line

@app.route('/show_pyecharts_03')

def show_pyecharts_03():

pie = get_pie()

bar = get_bar()

line = get_line()

return render_template("show_pyecharts_03.html", pie_options=pie.dump_options()

, bar_options=bar.dump_options(), line_options=line.dump_options())

# ------------3.MySQL数据，多图展示-------------------------

# 自定义函数连接windows端的MySQL数据库，获取数据

def connFunc():

engine = create_engine("mysql+pymysql://root:c3612565@localhost:3306/test")

sql = '''select 年级,count(1) as 人数 from student group by 年级'''

data = pd.read_sql(sql, engine)

return data

# 读取MySQL数据，自定义绘图函数

def get_pie_mysql():

data = connFunc()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

data_list = [list(z) for z in zip(sex_list, cnt_list)]

c = (

pyecharts.charts.Pie()

.add("", data_list)

.set_global_opts(title_opts=opts.TitleOpts(title="Pie示例"))code>

.set_global_opts(title_opts=opts.LabelOpts(formatter="{b}:{c}"))code>

)

return c

def get_bar_mysql():

data = connFunc()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

c = (

pyecharts.charts.Bar()

.add_xaxis(sex_list)

.add_yaxis("人数", cnt_list)

.set_global_opts(title_opts=opts.TitleOpts(title="bar示例", subtitle="bar"))code>

)

return c

def get_line_mysql():

data = connFunc()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

c = (

pyecharts.charts.Line()

.add_xaxis(sex_list)

.add_yaxis("人数", cnt_list)

)

return c

@app.route('/show_pyecharts_04')

def show_pyecharts_04():

pie = get_pie_mysql()

bar = get_bar_mysql()

line = get_line_mysql()

return render_template("show_pyecharts_04.html", pie_options=pie.dump_options()

, bar_options=bar.dump_options(), line_options=line.dump_options())

# ---------------4.读取集群的MySQL数据，绘制可视化大屏------------------------

# 自定义函数，读master节点的MySQL数据

def connFun_linux():

engine = create_engine("mysql+pymysql://root:123456@192.168.126.10:3306/test")

sql = '''select 年级,count(1) as 人数 from student

group by 年级

order by

case 年级

when '大一' then 1

when '大二' then 2

when '大三' then 3

when '大四' then 4

else 5

end '''

data = pd.read_sql(sql, engine)

return data

# 读取master节点（Linux系统）中的MySQL数据，自定义绘图函数

def get_pie_linux():

data = connFun_linux()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

data_list = [list(z) for z in zip(sex_list, cnt_list)]

c = (

pyecharts.charts.Pie()

.add("", data_list)

.set_global_opts(title_opts=opts.TitleOpts(title="Pie示例"))code>

.set_global_opts(title_opts=opts.LabelOpts(formatter="{b}:{c}"))code>

)

return c

def get_bar_linux():

data = connFun_linux()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

c = (

pyecharts.charts.Bar()

.add_xaxis(sex_list)

.add_yaxis("人数", cnt_list)

.set_global_opts(title_opts=opts.TitleOpts(title="bar示例", subtitle="bar"))code>

)

return c

def get_line_linux():

data = connFun_linux()

sex_list = list(data["年级"])

cnt_list = list(data['人数'])

c = (

pyecharts.charts.Line()

.add_xaxis(sex_list)

.add_yaxis("人数", cnt_list)

)

return c

@app.route('/show_pyecharts_05')

def show_pyecharts_05():

pie = get_pie_linux()

bar = get_bar_linux()

line = get_line_linux()

return render_template("show_pyecharts_05.html", pie_options=pie.dump_options()

, bar_options=bar.dump_options(), line_options=line.dump_options())

if __name__ == "__main__":

app.run(host='127.0.0.1', port=5000, debug=True)code>

在templates目录下，新建show_pyecharts_05.html文件。

清空show_pyecharts_05.html，将show_pyecharts_04.html的代码全部复制到show_pyecharts_05.html。

show_pyecharts_05.html的代码如下：

<code><!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />code>

<title>ECharts</title>

<style >

/* CSS 样式将放在这里 */

.chart-container{ -- -->

display:flex;

flex-direction:column; /* 默认为column，表示垂直布局 */

justify-content:center: /* 水平居中 */

align-items:center; /* 垂直居中（如果需要的话） */

height:150vh; /* 根据需要设置容器高度 */

width:100%; /* 占据全屏宽度 */

}

.chart-row{

display: flex; /* 每一行都是一个flex容器 */

justify-content:space-between; /* 列之间均匀分布 */

margin-bottom:50px; /* 行与行之间的间距 */

}

.chart-item{

flex: 1; /* 每个flex item占据相等的空间 */

margin: 0 10px; /* 图表之间的间距 */

}

</style>

<!-- 引入刚刚下载的 ECharts 文件 -->

<script src="/static/echarts.js"></script>code>

</head>

<body>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div class="chart-container">code>

<div class="chart-row">code>

<div class="chart-item" id="pie" style="width: 600px;height:400px;"></div>code>

<div class="chart-item" id="bar" style="width: 600px;height:400px;"></div>code>

</div>

<div class="chart-row">code>

<div class="chart-item" id="line" style="width: 600px;height:400px;"></div>code>

<h1>待绘制</h1>

<div class="chart-item" id="backUp" style="width: 400px;height:300px;"></div>code>

</div>

</div>

<script type="text/javascript">code>

// 基于准备好的dom，初始化echarts实例

var pieChart = echarts.init(document.getElementById('pie'));

var barChart = echarts.init(document.getElementById('bar'));

var lineChart = echarts.init(document.getElementById('line'));

// 使用刚指定的配置项和数据显示图表。

pieChart.setOption({ -- -->{ pie_options | safe }});

barChart.setOption({ { bar_options | safe }});

lineChart.setOption({ { line_options | safe }});

</script>

</body>

</html>

在main.py中右键，点击运行，打开链接：，可看到如下图所示的可视化大屏：

温馨提示：本文中的折线图没有什么实际意义，仅仅用于演示折线图的绘制过程。

本文的可视化大屏布局为2行2列，其中有一个图空缺（待绘制）。可根据实际情况，灵活调整图表的布局，例如3行3列等。

本文提供了数据集student.csv和Pycharm的项目资料。

参考资料：

1.python上手–flask框架web开发实践

https://zhuanlan.zhihu.com/p/104273184?utm_source=qq

2.【Flask + ECharts】从零开始的可视化编写—药品销售数据可视化

https://blog.csdn.net/heiren_a/article/details/123735606

3.Flask配合Echarts写一个动态可视化大屏

https://blog.csdn.net/heian_99/article/details/133172762?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-133172762-blog-119306330.235v43pc_blog_bottom_relevance_base6&spm=1001.2101.3001.4242.1&utm_relevant_index=4

4.Flask结合ECharts实现在线可视化效果，超级详细！

https://blog.csdn.net/cainiao_python/article/details/119306330

5.MySQL如何将CSV文件快速导入MySQL中

https://www.jb51.net/database/319687j06.htm

6.mysql如何导入csv文件

https://www.php.cn/faq/834141.html