喵喵爱编程

这个屌丝很懒，什么也没留下！

热门标签

Flask+Pyecharts+大数据集群(Linux)：数据可视化大屏的实现_flask可视化大屏

作者：喵喵爱编程 | 2024-07-27 03:22:46

踩

flask可视化大屏

Flask+Pyecharts+大数据集群：数据可视化大屏的实现

一、相关技术介绍及相关模块安装
二、在pycharm新建工程：FlaskPyecharts
- 1.新建Pycharm工程
- 2.下载Echarts的json文件
三、Flask+Pyecharts：单图展示
- 1.绘制柱状图
- 2.绘制饼图
四、Flask+Pyecharts+本地数据：数据可视化大屏（多图展示）
- 1.数据准备
- 2.读取本地数据，多图绘制
五、Flask+Pyecharts+MySQL：绘制数据可视化大屏
- 1.数据准备
- 2.读取MySQL数据，绘制可视化大屏
六、Flask+Pyecharts+大数据集群(Linux)：绘制数据可视化大屏
- 1.大数据集群的数据准备
- 2.读取大数据集群的MySQL数据，绘制可视化大屏

一、相关技术介绍及相关模块安装

1.相关技术介绍

（1）Flask

Flask是一个轻量级、灵活、可扩展的Web应用框架，使用Python编写，适合用于构建中小型Web应用程序。它提供了基本的路由、模板引擎、URL构建、错误处理等功能，并支持插件和扩展来增强其功能。
Flask提供了一个路由系统，可以将不同的URL路径映射到相应的处理函数上。当用户访问特定的URL时，Flask会调用相应的处理函数，并返回响应。
Flask内置了一个基于Jinja2的模板引擎，开发者可以使用模板来渲染HTML页面。通过将动态数据传递给模板，并使用模板语言来定义页面的结构和样式，开发者可以轻松地创建和管理Web页面的外观和布局。
Flask中文版教程
 Flask英文版教程

（2）Pyecharts

Pyecharts是一款基于Python的开源数据可视化库，它整合了Echarts与Python的优势，使得在Python环境中能够轻松创建出美观且交互性强的图表。Pyecharts支持多达数十种图表类型，包括折线图、柱状图、散点图、饼图等常见图表，以及地图、热力图、关系图等特色图表。这些丰富的图表类型能够满足不同场景下的数据可视化需求。
通过Pyecharts，可以绘制出如全国各省份GDP数据地图、中国各地区人口统计数据柱状图、股票交易数据K线图、销售数据折线图等多种图表，直观地展示数据。
Pyecharts官方文档: https://pyecharts.org/#/zh-cn/intro
pyecharts-gallery，示例: https://gallery.pyecharts.org/#/README

（3）大数据集群

如下表所示，集群部署了3个节点。

节点名称	功能	IP地址
master	名称节点	192.168.126.10
slave1	数据节点	192.168.126.11
slave2	数据节点	192.168.126.12

虚拟机软件为VMware 17，Linux系统为CentOS 7。

（4）Pycharm编程工具

本文采用PyCharm编程，PyCharm是一款功能强大、用户友好的Python IDE，适合各类Python开发者使用。

2.相关模块安装

（1）安装Flask

打开Pycharm，点击“终端”，执行以下安装命令。

pip install flask
1

在这里插入图片描述

（2）安装Pyecharts

pip install pyechatrs
1

（3）安装pymysql

pip install pymysql
1

查看已经安装的模块。

pip list
1

在这里插入图片描述

二、在pycharm新建工程：FlaskPyecharts

1.新建Pycharm工程

在pychartm中新建项目:FlaskPyecharts
在这里插入图片描述
创建项目后pycharm的目录结构：

新建3个目录：templates，data，static，其中：templates必须用这个目录名称。

新建目录后pycharm的目录结构如下：

2.下载Echarts的json文件

到Echarts官网下载json文件：https://echarts.apache.org/zh/download.html
在这里插入图片描述
选择要打包的图表：

本文采用默认图表，去掉“代码压缩”，下载：

在这里插入图片描述
下载成功后，生成文件：echarts.js，将该文件粘贴到Pycharm的static目录下：

三、Flask+Pyecharts：单图展示

1.绘制柱状图

清空main.py里面的所有内容，输入以下代码：

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 应用实例
# 使用 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())

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5000,debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

代码截图如下：
在这里插入图片描述
在pycharm的templates目录下，创建：show_pyecharts.html

在这里插入图片描述
创建后pycharm目录结构如下：

打开show_pyecharts.html，将里面的内容清空，粘贴以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/static/echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {{ bar_options | safe }};
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

代码截图如下：
在这里插入图片描述
在main.py文件中，单击鼠标右键，点击运行。

运行程序后，点击链接。

在这里插入图片描述
打开链接，在后面添加show_pyecharts，就可以看到绘制的柱形图。

2.绘制饼图

在main.py中添加下图框中的代码：
在这里插入图片描述
main.py完整的代码如下：

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 应用实例
# 使用 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())


if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5000, debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在Pycharm的templates目录中新建文件：show_pyecharts_02.html，目录结构如下：

在这里插入图片描述
删除show_pyecharts_02.html中所有内容，再粘贴以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="/static/echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {{ pie_options | safe }};
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

代码截图如下：
在这里插入图片描述
在main.py中，点击运行，然后打开链接，可以看到绘制的饼图。

上面的两个例子，每个页面只能显示一幅图。如何将多幅图绘制在同一页面中，形成一个图形丰富、数据全面的可视化大屏？

四、Flask+Pyecharts+本地数据：数据可视化大屏（多图展示）

1.数据准备

现有一个数据集：student.csv，数据如下所示：
在这里插入图片描述
将该数据集粘贴到data目录下，因为数据集有汉字，因此提示乱码，点击“以GBK重新加载”，如下图所示：

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

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

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

在这里插入图片描述

完整的main.py代码如下：

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')
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}"),
             radius=["40%", "75%"],
             center=["50%", "50%"])
        .set_global_opts(title_opts=opts.TitleOpts(title="年级人数"),
                         legend_opts=opts.LegendOpts(orient="vertical",
                                            pos_left="2%", pos_top="15%"))
    )
    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="各年级人数分布柱状图"))
    )
    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="各年级人数分布折线图"))
    )
    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())

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=5000, debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

在templates目录下，新建文件：show_pyecharts_03.html，目录结构如下图：
在这里插入图片描述
设计的可视化大屏为2行2列布局，先清空show_pyecharts_03.html，然后粘贴以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="chart-container">
      <div class="chart-row">
         <div class="chart-item"  id="pie" style="width: 600px;height:400px;"></div>
         <div class="chart-item" id="bar" style="width: 600px;height:400px;"></div>
      </div>

      <div class="chart-row">
         <div class="chart-item" id="line" style="width: 600px;height:400px;"></div>
         <h1>待绘制</h1>
         <div class="chart-item" id="backUp" style="width: 400px;height:300px;"></div>
      </div>
    </div>

    <script type="text/javascript">
        // 基于准备好的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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

在main.py运行程序，打开链接：http://127.0.0.1:5000/show_pyecharts_03，可以看到绘制的可视化大屏如下图所示：

在这里插入图片描述

五、Flask+Pyecharts+MySQL：绘制数据可视化大屏

1.数据准备

打开Navicat Premium，连接MySQL，新建test数据库，导入数据集student.csv的数据。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
导入数据成功。

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

打开pycharm，在main.py中，自定义函数连接windows端的MySQL数据库，获取数据。
请注意：需要将MySQL用户名和密码，替换成您的用户名和密码。
在这里插入图片描述
读取MySQL数据，自定义绘图函数

定义路由，将配置好的图渲染到show_pyecharts_04.html页面。

main.py的完整代码如下，请注意：需要将MySQL用户名和密码，替换成您的用户名和密码。

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')
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}"),
             radius=["40%", "75%"],
             center=["50%", "50%"])
        .set_global_opts(title_opts=opts.TitleOpts(title="年级人数"),
                         legend_opts=opts.LegendOpts(orient="vertical",
                                            pos_left="2%", pos_top="15%"))
    )
    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="各年级人数分布柱状图"))
    )
    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="各年级人数分布折线图"))
    )
    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示例"))
            .set_global_opts(title_opts=opts.LabelOpts(formatter="{b}:{c}"))
    )
    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"))
    )
    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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

在templates目录下，新建目录：show_pyecharts_04.html。
在这里插入图片描述

清空show_pyecharts_04.html内容，粘贴以下代码：
在这里插入图片描述
show_pyecharts_04.html的代码和show_pyecharts_03.html的一致。show_pyecharts_04.html的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="chart-container">
      <div class="chart-row">
         <div class="chart-item"  id="pie" style="width: 600px;height:400px;"></div>
         <div class="chart-item" id="bar" style="width: 600px;height:400px;"></div>
      </div>

      <div class="chart-row">
         <div class="chart-item" id="line" style="width: 600px;height:400px;"></div>
         <h1>待绘制</h1>
         <div class="chart-item" id="backUp" style="width: 400px;height:300px;"></div>
      </div>
    </div>

    <script type="text/javascript">
        // 基于准备好的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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

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

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

1.大数据集群的数据准备

启动大数据集群

在这里插入图片描述
在master节点的Linux系统中单击鼠标右键，打开终端，执行以下命令，打开MySQL：

执行命令：SHOW VARIABLES LIKE ‘secure_file_priv’;
查看MySQL服务器允许在哪些目录下进行数据加载操作。

SHOW VARIABLES LIKE 'secure_file_priv';
1

执行结果如下：
在这里插入图片描述
从执行结果可以看出，目录：/var/lib/mysql-files/，可以执行加载文件操作。
通过WinSCP工具，将数据集：student.csv拷贝到/var/lib/mysql-files/目录。

在master节点的Linux中，输入以下代码，查看MySQL数据库。

show databases;
1

在这里插入图片描述
创建数据库test。

create database test;
1

查看数据库。

show databases;
1

代码截图如下：
在这里插入图片描述
使用test数据库

use test;
1

在这里插入图片描述

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

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

在这里插入图片描述
加载数据集student.csv到表student。

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;

1
2

加载数据以及查询表的截图如下：
在这里插入图片描述
在本文中，数据集student.csv加载到表student中，模拟集群处理大数据后保存在MySQL数据库中的数据，如Hive，Spark处理后的数据。

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

自定义函数，读取master节点的MySQL数据
请注意：需要将MySQL用户名和密码，替换成您的用户名和密码，IP地址也替换成您的节点IP地址。

在这里插入图片描述
读取master节点（Linux系统）中的MySQL数据，自定义绘图函数。

main.py的完整代码如下：

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')
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}"),
             radius=["40%", "75%"],
             center=["50%", "50%"])
        .set_global_opts(title_opts=opts.TitleOpts(title="年级人数"),
                         legend_opts=opts.LegendOpts(orient="vertical",
                                            pos_left="2%", pos_top="15%"))
    )
    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="各年级人数分布柱状图"))
    )
    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="各年级人数分布折线图"))
    )
    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示例"))
            .set_global_opts(title_opts=opts.LabelOpts(formatter="{b}:{c}"))
    )
    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"))
    )
    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示例"))
            .set_global_opts(title_opts=opts.LabelOpts(formatter="{b}:{c}"))
    )
    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"))
    )
    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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

在templates目录下，新建show_pyecharts_05.html文件。
在这里插入图片描述
清空show_pyecharts_05.html，将show_pyecharts_04.html的代码全部复制到show_pyecharts_05.html。

show_pyecharts_05.html的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="chart-container">
      <div class="chart-row">
         <div class="chart-item"  id="pie" style="width: 600px;height:400px;"></div>
         <div class="chart-item" id="bar" style="width: 600px;height:400px;"></div>
      </div>

      <div class="chart-row">
         <div class="chart-item" id="line" style="width: 600px;height:400px;"></div>
         <h1>待绘制</h1>
         <div class="chart-item" id="backUp" style="width: 400px;height:300px;"></div>
      </div>
    </div>

    <script type="text/javascript">
        // 基于准备好的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

在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-2_defaultbaidujs_baidulandingword~default-1-133172762-blog-119306330.235^v43pc_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

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

Flask+Pyecharts+大数据集群(Linux)：数据可视化大屏的实现_flask可视化大屏

Flask+Pyecharts+大数据集群：数据可视化大屏的实现

一、相关技术介绍及相关模块安装

1.相关技术 介绍

（1）Flask

（2）Pyecharts

（3）大数据集群

（4）Pycharm编程工具

2.相关模块安装

（1）安装Flask

（2）安装Pyecharts

（3）安装pymysql

二、在pycharm新建工程：FlaskPyecharts

1.新建Pycharm工程

2.下载Echarts的json文件

三、Flask+Pyecharts：单图展示

1.绘制柱状图

2.绘制饼图

四、Flask+Pyecharts+本地数据：数据可视化大屏（多图展示）

1.数据准备

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

五、Flask+Pyecharts+MySQL：绘制数据可视化大屏

1.数据准备

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

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

1.大数据集群的数据准备

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

1.相关技术介绍