数据可视化之 Flask Web 开发实践：从简易网页到数据大屏

2401_89814539

481人浏览 · 2025-11-02 19:49:54

2401_89814539 · 2025-11-02 19:49:54 发布

一、引言

在《数据可视化》课程的 Flask web 开发模块中，我完成了从简易数据可视化网页到数据库驱动数据大屏的实践，收获了诸多关于 Web 端数据可视化开发的经验，在此分享我的学习心得与实践过程。

二、任务 4.1：基于 Flask 开发简易数据可视化网页实践

（一）开发流程与代码示例

首先，我们需要搭建 Flask 项目结构，然后编写路由函数来处理请求并渲染包含可视化图表的页面。以下是核心代码示例：

from flask import Flask, render_template import matplotlib.pyplot as plt import io import base64 app = Flask(__name__) @app.route('/') def index(): # 生成一个简单的柱状图 categories = ['A', 'B', 'C', 'D', 'E'] values = [30, 25, 40, 35, 20] plt.bar(categories, values, color=['red', 'green', 'blue', 'yellow', 'purple']) plt.xlabel('类别') plt.ylabel('数值') plt.title('简易数据可视化示例') # 将图表转换为base64编码，以便在网页中显示 img = io.BytesIO() plt.savefig(img, format='png') img.seek(0) plot_url = base64.b64encode(img.getvalue()).decode('utf-8') plt.close() return render_template('index.html', plot_url=plot_url) if __name__ == '__main__': app.run(debug=True)

对应的index.html模板代码（部分）：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Flask数据可视化</title> </head> <body> <h1>基于Flask的简易数据可视化</h1> <img src="data:image/png;base64,{{ plot_url }}" alt="数据可视化图表"> </body> </html>

（二）实践心得

在开发过程中，我学会了如何将 Matplotlib 生成的图表嵌入到 Flask 网页中，理解了 Flask 的路由机制和模板渲染流程。同时，也意识到代码结构的规范性对于项目可维护性的重要性，比如将数据处理和图表生成的逻辑进行适当封装。

三、进阶篇：Flask+ECharts 的 “全栈协同”

（一）项目架构设计

一个完整的Flask+ECharts 数据可视化项目应包含以下模块：

app.py：后端路由与数据处理
templates/index.html：前端页面与 ECharts 渲染
static/js/：ECharts 配置脚本

（二）后端：Flask 的数据接口

python

运行

from flask import Flask, render_template, jsonify
import pymysql
import random

app = Flask(__name__)

# 模拟数据库查询
def get_sales_data():
    # 实际场景中替换为数据库查询
    categories = ['一月', '二月', '三月', '四月', '五月', '六月']
    sales = [random.randint(1000, 5000) for _ in range(6)]
    return {'categories': categories, 'sales': sales}

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/sales')
def api_sales():
    data = get_sales_data()
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

（三）前端：ECharts 的交互可视化

在templates/index.html中集成 ECharts：

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>销售数据可视化大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 100%;
            height: 600px;
            margin: 20px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1>2025年上半年销售数据可视化</h1>
    <div id="chart-container"></div>
    <script>
        // 初始化图表
        var myChart = echarts.init(document.getElementById('chart-container'));
        
        // 异步加载数据
        fetch('/api/sales')
            .then(response => response.json())
            .then(data => {
                // 配置项
                var option = {
                    title: {
                        text: '月度销售趋势',
                        left: 'center',
                        textStyle: {
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>销售额：{c}元'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.categories,
                        axisLabel: {
                            fontSize: 14
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 元'
                        }
                    },
                    series: [{
                        data: data.sales,
                        type: 'bar',
                        color: '#3498db',
                        itemStyle: {
                            borderRadius: [6, 6, 0, 0]
                        },
                        emphasis: {
                            scale: true,
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                myChart.setOption(option);
            });
    </script>
</body>
</html>

（四）场景优化：从 “能用” 到 “好用”

交互增强：通过tooltip.formatter自定义提示框内容，让数据解读更直观；
视觉优化：给柱状图添加borderRadius和 hover 时的shadow效果，提升页面质感；
性能考量：对于千万级数据，可采用 ECharts 的dataZoom组件或后端数据抽样，避免前端渲染卡顿。

四、实战篇：企业级数据大屏的 “落地指南”

（一）需求分析：某电商平台的 “运营驾驶舱”

需展示销售趋势、用户画像、商品 TOP10三大模块，要求支持实时刷新与多端适配。

（二）技术选型与架构

维度	选型	理由
前端可视化	ECharts	开源、生态丰富、交互性强，满足复杂图表需求
后端框架	Flask	轻量级、易上手，适合快速搭建数据接口
数据存储	MySQL + Redis	MySQL 存储全量数据，Redis 缓存高频访问的实时数据，提升响应速度
部署环境	Docker + Nginx	容器化部署保证环境一致性，Nginx 做反向代理与静态资源托管

（三）核心代码片段：实时数据刷新

在前端通过setInterval实现数据定时刷新：

javascript

运行

// 每隔30秒刷新一次数据
setInterval(() => {
    fetch('/api/sales')
        .then(response => response.json())
        .then(data => {
            myChart.setOption({
                series: [{
                    data: data.sales
                }]
            });
        });
}, 30000);