企业官网建设流程全解析

在实际的数据分析项目中，单纯地使用 Jupyter Notebook 或 Excel 进行分析，结果往往只停留在本地。如何将分析过程、结论和洞察，通过一个直观、可交互的 Web 应用分享出去，是数据分析师和开发者需要掌握的关键技能。本文将以一个具体的商业案例——分析“泡泡玛特”相关热搜的评论数据——为背景，带你从零构建一个完整的数据分析可视化 Web 项目。

这个项目将整合数据获取、数据处理、后端 API 构建和前端可视化展示全链路。我们将使用 Python3 作为核心语言，Flask 作为轻量级 Web 框架，ECharts 作为前端图表库。整个过程不仅会展示如何编写代码，更会解释每一步的设计思路和常见陷阱，确保你不仅能“跑通”项目，更能理解背后的“为什么”。最终，你将得到一个结构清晰、图表丰富、可直接用于学习、简历展示或作为毕业设计核心模块的实战案例。

1. 理解项目架构与核心技术选型

在动手写代码之前，我们需要明确整个项目的技术栈和它们各自扮演的角色。一个典型的数据分析可视化 Web 项目通常采用前后端分离的架构，后端负责数据处理和提供数据接口，前端负责渲染交互式图表。

1.1 为什么选择 Flask + ECharts + Python3 组合？

• Python3：是数据分析领域的首选语言。其生态中拥有pandas,numpy,jieba,snownlp等强大的数据处理、分析和文本挖掘库，能够高效地完成从数据清洗到特征提取的全过程。
• Flask：作为一个微框架，它足够轻量、灵活，没有强制的项目结构，非常适合快速构建 RESTful API。对于数据分析类项目，我们通常不需要 Django 那样重量级、全功能的框架，Flask 足以胜任数据接口的提供工作。
• ECharts：一个由百度开源的高性能 JavaScript 图表库。它图表类型丰富，文档详尽，社区活跃，并且通过简单的配置就能生成美观、交互性强的图表。相较于直接使用 D3.js 等底层库，ECharts 能极大降低前端可视化的开发门槛。

这个组合的优势在于：Python 处理数据的强大能力 + Flask 快速搭建 API 的便捷性 + ECharts 丰富美观的图表表现力，三者结合能高效地将数据分析结果产品化。

1.2 项目核心流程与数据流

整个项目的运行流程可以概括为以下几步：

1. 数据准备：通过爬虫或已有数据集，获取关于“泡泡玛特”热搜的原始评论数据（通常为 CSV 或 JSON 格式）。
2. 数据分析：使用 Python (Pandas 等) 对原始数据进行清洗、去重、分词、情感分析、关键词提取、统计聚合等操作。
3. 后端服务：使用 Flask 搭建 Web 服务器，编写路由（API 接口），这些接口接收前端请求，并返回处理好的结构化数据（通常是 JSON 格式）。
4. 前端展示：使用 HTML/CSS/JavaScript 构建页面，通过 AJAX 调用 Flask 提供的 API 获取数据，然后使用 ECharts 将数据渲染成各种图表（如词云、柱状图、折线图、饼图等）。
5. 交互：用户在前端与图表交互（如点击、筛选），前端再次请求后端接口获取新数据，实现动态更新。

2. 环境准备与项目初始化

一个清晰的项目结构是良好开端的基础。我们将按照以下步骤搭建开发环境。

2.1 创建项目目录与虚拟环境

首先，在本地创建一个项目文件夹，并为其建立独立的 Python 虚拟环境。这能有效隔离项目依赖，避免版本冲突。

# 创建项目目录 mkdir popmart_sentiment_analysis cd popmart_sentiment_analysis # 创建虚拟环境 (以 venv 为例，确保你使用的是 Python3) python3 -m venv venv # 激活虚拟环境 # 在 Windows 上: # venv\Scripts\activate # 在 macOS/Linux 上: source venv/bin/activate

激活后，命令行提示符前通常会显示(venv)，表示你已进入虚拟环境。

2.2 安装核心依赖库

在虚拟环境激活的状态下，使用pip安装项目所需的 Python 库。我们将依赖分为数据处理、Web 框架和文本分析三类。

# 安装 Flask 及相关扩展 pip install flask flask-cors # 安装数据处理库 pip install pandas numpy # 安装中文文本处理库 (用于分词和情感分析) # jieba: 中文分词 # snownlp: 中文自然语言处理，可用于情感分析 # wordcloud: 生成词云图 (后端生成图片时使用，也可前端用ECharts实现) pip install jieba snownlp wordcloud # 安装开发工具 (可选，用于代码格式化等) pip install black flake8

安装完成后，可以通过pip list命令检查已安装的包。

2.3 初始化项目文件结构

一个清晰的文件结构有助于代码管理和维护。在项目根目录下创建如下文件和文件夹：

popmart_sentiment_analysis/ ├── app.py # Flask 应用主入口文件 ├── config.py # 配置文件 (如密钥、数据库连接等) ├── requirements.txt # 项目依赖清单 ├── data/ # 数据目录 │ ├── raw/ # 存放原始数据文件 (如 comments.csv) │ └── processed/ # 存放处理后的中间数据或结果 ├── analysis/ # 数据分析模块 │ ├── __init__.py │ └── data_processor.py # 核心的数据处理与分析类 ├── static/ # Flask 静态文件目录 (存放 CSS, JS, 图片) │ ├── css/ │ ├── js/ │ └── images/ ├── templates/ # Flask 模板目录 (存放 HTML 文件) │ └── index.html └── utils/ # 工具函数目录 ├── __init__.py └── file_utils.py

现在，生成requirements.txt文件，方便在其他环境复现依赖。

pip freeze > requirements.txt

3. 数据处理与分析模块开发

数据处理是项目的核心。我们将创建一个专门的类来封装所有与数据相关的操作。

3.1 准备模拟数据

由于真实爬虫数据获取涉及外部因素，我们先在data/raw/comments.csv中创建一份模拟数据用于开发。数据字段可以包括：评论ID、用户昵称、评论内容、发布时间、点赞数等。

id,username,content,created_at,likes 1,用户A,泡泡玛特的新品盲盒设计太棒了，忍不住端盒了！,2023-10-01 10:00:00,152 2,用户B,抽到了隐藏款，开心到飞起！,2023-10-01 11:30:00,89 3,用户C,质量一般，感觉有点溢价，性价比不高。,2023-10-02 09:15:00,45 4,用户D,期待已久的IP联名，果然没让我失望。,2023-10-02 14:20:00,210 5,用户E,二手市场炒得太高了，失去了收藏的初心。,2023-10-03 16:45:00,78 ... (可以继续补充更多行)

3.2 编写数据分析处理器

在analysis/data_processor.py中，我们创建一个DataProcessor类。

# analysis/data_processor.py import pandas as pd import jieba import jieba.analyse from snownlp import SnowNLP import re from collections import Counter import numpy as np class DataProcessor: def __init__(self, data_path): """ 初始化处理器，加载数据。 :param data_path: 原始数据文件路径 """ self.df = pd.read_csv(data_path, parse_dates=['created_at']) self.stopwords = self._load_stopwords() # 加载停用词 def _load_stopwords(self): """加载中文停用词表。可以从网络下载或使用本地文件。""" # 这里是一个简单的示例停用词列表，实际项目应使用更完整的停用词表 stopwords = set(['的', '了', '在', '是', '我', '有', '和', '就', '不', '人', '都', '一', '一个', '上', '也', '很', '到', '说', '要', '去', '你', '会', '着', '没有', '看', '好', '自己', '这']) # 可以尝试从文件加载： with open('stopwords.txt', 'r', encoding='utf-8') as f: ... return stopwords def clean_and_preprocess(self): """数据清洗：去重、去空、处理缺失值等。""" print(f"原始数据量: {len(self.df)}") # 去重 self.df.drop_duplicates(subset=['content'], inplace=True) # 去除空评论 self.df = self.df[self.df['content'].notna()] # 去除评论内容过短的行（例如少于2个字符） self.df = self.df[self.df['content'].str.len() > 1] print(f"清洗后数据量: {len(self.df)}") return self.df def analyze_sentiment(self): """使用 SnowNLP 进行情感分析，情感值范围 [0, 1]，越接近1越积极。""" def get_sentiment(text): try: return SnowNLP(text).sentiments except: return 0.5 # 分析失败时返回中性值 self.df['sentiment'] = self.df['content'].apply(get_sentiment) # 简单分类 self.df['sentiment_label'] = pd.cut(self.df['sentiment'], bins=[0, 0.35, 0.65, 1], labels=['负面', '中性', '正面'], include_lowest=True) return self.df[['content', 'sentiment', 'sentiment_label']].head() def extract_keywords(self, top_k=20): """使用 jieba 提取评论中的关键词（TF-IDF）。""" all_content = ' '.join(self.df['content'].astype(str).tolist()) # 使用 jieba.analyse.extract_tags 基于 TF-IDF 算法提取关键词 keywords = jieba.analyse.extract_tags(all_content, topK=top_k, withWeight=True) # 返回格式：[('关键词', 权重), ...] return keywords def get_word_freq_for_cloud(self): """生成词频数据，用于词云图。""" words_list = [] for content in self.df['content']: # 分词并去除停用词 words = jieba.lcut(content) filtered_words = [w for w in words if w not in self.stopwords and len(w) > 1] words_list.extend(filtered_words) word_counter = Counter(words_list) # 转换为前端 ECharts 词云需要的格式: [{'name': '词', 'value': 频次}, ...] word_freq_list = [{'name': word, 'value': count} for word, count in word_counter.most_common(100)] return word_freq_list def get_sentiment_distribution(self): """获取情感分布数据，用于饼图或环形图。""" dist = self.df['sentiment_label'].value_counts().to_dict() # 转换为 ECharts 饼图数据格式: [{'value': 数量, 'name': '标签'}, ...] data = [{'value': count, 'name': label} for label, count in dist.items()] return data def get_trend_by_time(self, freq='D'): """按时间频率（如每天）统计评论数量和平均情感趋势。""" self.df.set_index('created_at', inplace=True) # 按时间重采样，计算数量 count_series = self.df['content'].resample(freq).count() # 按时间重采样，计算平均情感值 sentiment_series = self.df['sentiment'].resample(freq).mean().fillna(0) self.df.reset_index(inplace=True) # 准备折线图数据 trend_data = { 'dates': count_series.index.strftime('%Y-%m-%d').tolist(), 'counts': count_series.values.tolist(), 'avg_sentiments': sentiment_series.values.tolist() } return trend_data # 测试代码 (可以放在文件底部，实际运行时注释掉) if __name__ == '__main__': processor = DataProcessor('../data/raw/comments.csv') df_clean = processor.clean_and_preprocess() print(processor.analyze_sentiment()) print(processor.extract_keywords(10)) print(processor.get_sentiment_distribution()[:5])

关键点解释：

1. 停用词：去除“的”、“了”等无实际意义的词汇，能让关键词提取和词云结果更准确。实际项目中应使用更全面的停用词表。
2. 情感分析：SnowNLP的情感分析基于机器学习模型，对商品、服务等短文本有一定效果，但并非百分之百准确。生产环境可能需要训练定制模型或使用更专业的服务。
3. 分词：jieba.lcut是精确模式分词，适合词频统计。jieba.analyse.extract_tags使用了 TF-IDF 算法，能更好地提取文档中的关键主题词。
4. 时间序列：使用 Pandas 的resample方法可以方便地按日、周、月进行聚合，是分析趋势的利器。

4. 构建 Flask 后端 API 服务

数据处理模块完成后，我们需要通过 Flask 将其封装成 HTTP API，供前端调用。

4.1 创建 Flask 应用主文件

在项目根目录下创建app.py。

# app.py from flask import Flask, render_template, jsonify, request from flask_cors import CORS from analysis.data_processor import DataProcessor import os app = Flask(__name__) # 启用跨域，方便前后端分离开发。生产环境应配置具体的源。 CORS(app) # 初始化数据处理器 DATA_PATH = os.path.join(os.path.dirname(__file__), 'data', 'raw', 'comments.csv') processor = DataProcessor(DATA_PATH) # 启动时先清洗数据 processor.clean_and_preprocess() @app.route('/') def index(): """渲染主页面。""" return render_template('index.html') @app.route('/api/sentiment_distribution') def get_sentiment_distribution(): """API: 获取情感分布数据。""" try: data = processor.get_sentiment_distribution() return jsonify({'code': 200, 'msg': 'success', 'data': data}) except Exception as e: return jsonify({'code': 500, 'msg': str(e), 'data': None}) @app.route('/api/word_cloud') def get_word_cloud_data(): """API: 获取词云数据。""" try: data = processor.get_word_freq_for_cloud() return jsonify({'code': 200, 'msg': 'success', 'data': data}) except Exception as e: return jsonify({'code': 500, 'msg': str(e), 'data': None}) @app.route('/api/trend') def get_trend_data(): """API: 获取评论趋势数据。""" try: # 可以从请求参数中获取时间频率，例如 ?freq=D (日) / W (周) / M (月) freq = request.args.get('freq', default='D', type=str) data = processor.get_trend_by_time(freq=freq) return jsonify({'code': 200, 'msg': 'success', 'data': data}) except Exception as e: return jsonify({'code': 500, 'msg': str(e), 'data': None}) @app.route('/api/keywords') def get_keywords(): """API: 获取关键词及权重。""" try: top_k = request.args.get('top_k', default=20, type=int) keywords = processor.extract_keywords(top_k=top_k) # 格式化输出 data = [{'name': k, 'value': round(v, 4)} for k, v in keywords] return jsonify({'code': 200, 'msg': 'success', 'data': data}) except Exception as e: return jsonify({'code': 500, 'msg': str(e), 'data': None}) if __name__ == '__main__': # debug=True 仅用于开发，生产环境必须关闭 app.run(debug=True, host='0.0.0.0', port=5000)

关键点解释：

1. CORS：在开发阶段，前端页面（可能运行在localhost:8080）和后端 API（运行在localhost:5000）端口不同，属于跨域请求。CORS(app)解决了这个问题。生产环境部署到同一域名下时，可以移除或进行严格配置。
2. API 设计：所有数据接口都以/api/开头，返回统一的 JSON 格式{code, msg, data}，这是 RESTful API 的常见实践，便于前端统一处理成功和错误情况。
3. 错误处理：每个接口都使用try...except包裹，避免服务器内部错误导致 Flask 应用崩溃，并向客户端返回友好的错误信息。
4. 参数传递：像/api/trend和/api/keywords接口，通过request.args获取查询参数，使得前端可以动态控制数据粒度（如查看周趋势还是月趋势）。

4.2 创建前端模板页面

在templates/index.html中，我们编写一个简单的 HTML 骨架，并引入 ECharts 和 jQuery（用于方便地发起 AJAX 请求）。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>泡泡玛特热搜评论数据分析看板</title> <!-- 引入 ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body { font-family: 'Microsoft YaHei', Arial, sans-serif; margin: 20px; background-color: #f5f5f5; } .dashboard-title { text-align: center; color: #333; margin-bottom: 30px; } .chart-container { background: white; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 30px; } .chart-title { font-size: 18px; color: #555; margin-bottom: 15px; border-left: 4px solid #1890ff; padding-left: 10px; } .chart { width: 100%; height: 400px; } .row { display: flex; flex-wrap: wrap; margin: 0 -15px; } .col { flex: 1; min-width: 300px; padding: 0 15px; } .controls { text-align: center; margin: 20px 0; } button { padding: 8px 16px; margin: 0 5px; background-color: #1890ff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #40a9ff; } </style> </head> <body> <h1 class="dashboard-title">泡泡玛特热搜评论情感与主题分析看板</h1> <div class="controls"> <label>趋势频率：</label> <button onclick="loadTrendData('D')">日趋势</button> <button onclick="loadTrendData('W')">周趋势</button> <button onclick="loadTrendData('M')">月趋势</button> </div> <div class="row"> <!-- 情感分布饼图 --> <div class="col"> <div class="chart-container"> <div class="chart-title">评论情感分布</div> <div id="sentimentChart" class="chart"></div> </div> </div> <!-- 关键词条形图 --> <div class="col"> <div class="chart-container"> <div class="chart-title">评论关键词 Top 20 (TF-IDF)</div> <div id="keywordChart" class="chart"></div> </div> </div> </div> <div class="row"> <!-- 评论数量与情感趋势图 --> <div class="col"> <div class="chart-container"> <div class="chart-title">评论数量与平均情感趋势</div> <div id="trendChart" class="chart"></div> </div> </div> <!-- 词云图 --> <div class="col"> <div class="chart-container"> <div class="chart-title">评论词云</div> <div id="wordCloudChart" class="chart"></div> </div> </div> </div> <script src="{{ url_for('static', filename='js/main.js') }}"></script> </body> </html>

5. 使用 ECharts 实现前端数据可视化

前端逻辑集中在static/js/main.js中。我们将为每个图表区域初始化一个 ECharts 实例，并通过 AJAX 调用后端 API 获取数据，最后渲染图表。

5.1 初始化图表与获取数据

创建static/js/main.js文件。

// static/js/main.js $(document).ready(function() { // 初始化所有图表 initSentimentChart(); initKeywordChart(); initTrendChart('D'); // 默认加载日趋势 initWordCloudChart(); }); // 1. 情感分布饼图 function initSentimentChart() { var chartDom = document.getElementById('sentimentChart'); var myChart = echarts.init(chartDom); $.get('/api/sentiment_distribution', function(resp) { if (resp.code === 200) { var option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '情感分布', type: 'pie', radius: '50%', data: resp.data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); } else { console.error('获取情感分布数据失败:', resp.msg); } }); } // 2. 关键词条形图 function initKeywordChart() { var chartDom = document.getElementById('keywordChart'); var myChart = echarts.init(chartDom); $.get('/api/keywords?top_k=20', function(resp) { if (resp.code === 200) { var keywords = resp.data.map(item => item.name); var values = resp.data.map(item => item.value); var option = { tooltip: {}, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', name: 'TF-IDF 权重' }, yAxis: { type: 'category', data: keywords, axisLabel: { interval: 0 // 强制显示所有标签 } }, series: [ { name: '关键词', type: 'bar', data: values, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ]) } } ] }; myChart.setOption(option); } else { console.error('获取关键词数据失败:', resp.msg); } }); } // 3. 趋势图 (双Y轴) function initTrendChart(freq) { var chartDom = document.getElementById('trendChart'); var myChart = echarts.init(chartDom); $.get('/api/trend?freq=' + freq, function(resp) { if (resp.code === 200) { var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, legend: { data: ['评论数量', '平均情感值'] }, xAxis: { type: 'category', data: resp.data.dates, axisLabel: { rotate: 45 // 日期标签旋转，避免重叠 } }, yAxis: [ { type: 'value', name: '评论数量', position: 'left' }, { type: 'value', name: '情感值', position: 'right', min: 0, max: 1 } ], series: [ { name: '评论数量', type: 'bar', yAxisIndex: 0, data: resp.data.counts, itemStyle: { color: '#5470c6' } }, { name: '平均情感值', type: 'line', yAxisIndex: 1, data: resp.data.avg_sentiments, itemStyle: { color: '#91cc75' }, smooth: true } ] }; myChart.setOption(option); } else { console.error('获取趋势数据失败:', resp.msg); } }); } // 4. 词云图 function initWordCloudChart() { var chartDom = document.getElementById('wordCloudChart'); var myChart = echarts.init(chartDom); $.get('/api/word_cloud', function(resp) { if (resp.code === 200) { var option = { tooltip: {}, series: [{ type: 'wordCloud', shape: 'circle', sizeRange: [20, 80], rotationRange: [-90, 90], rotationStep: 45, gridSize: 8, drawOutOfBound: false, textStyle: { fontFamily: 'sans-serif', fontWeight: 'bold', color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, emphasis: { focus: 'self', textStyle: { shadowBlur: 10, shadowColor: '#333' } }, data: resp.data }] }; myChart.setOption(option); } else { console.error('获取词云数据失败:', resp.msg); } }); } // 提供给HTML按钮调用的函数，用于重新加载趋势图 window.loadTrendData = function(freq) { initTrendChart(freq); };

5.2 运行与验证项目

现在，所有组件都已就绪。在项目根目录下，确保虚拟环境已激活，运行 Flask 应用：

python app.py

你将在终端看到类似输出：

* Serving Flask app 'app' * Debug mode: on WARNING: This is a development server. Do not use it in a production deployment. * Running on all addresses (0.0.0.0) * Running on http://127.0.0.1:5000 * Running on http://192.168.x.x:5000

打开浏览器，访问http://127.0.0.1:5000。如果一切正常，你将看到一个包含四个图表的仪表盘：

1. 情感分布饼图：直观展示正面、中性、负面评论的比例。
2. 关键词条形图：显示 TF-IDF 权重最高的前20个关键词。
3. 趋势图：通过顶部按钮可以切换日、周、月视图，展示评论数量和平均情感值随时间的变化。
4. 词云图：根据词频大小展示评论中的高频词汇。

尝试点击“日趋势”、“周趋势”等按钮，观察图表是否动态更新。

6. 常见问题排查与优化建议

在开发和学习过程中，你可能会遇到以下问题。这里提供排查思路和解决方案。

6.1 后端服务启动失败或接口报错

6.2 前端图表显示异常

6.3 数据分析结果不理想

7. 项目扩展与生产环境部署建议

完成基础版本后，你可以从以下几个方向深化项目，使其更接近生产级应用。

7.1 功能扩展建议

1. 数据源动态化：将硬编码的 CSV 文件路径改为从数据库（如 MySQL, PostgreSQL）或对象存储（如 AWS S3, 阿里云 OSS）中读取。可以使用 SQLAlchemy 等 ORM 库。
2. 实时数据更新：集成一个简单的爬虫模块（使用requests,BeautifulSoup或Scrapy），定时从社交媒体平台抓取最新评论，并更新数据库。后端 API 则从数据库查询最新数据。
3. 更丰富的图表与交互：
   • 地图：如果评论包含地理位置信息，可以用 ECharts 地图展示地域分布。
   • 桑基图：分析用户情感与关键词之间的关联流向。
   • 数据筛选：增加前端控件（如日期选择器、情感筛选下拉框），让用户能动态筛选查看特定范围的数据。
4. 用户登录与多数据看板：使用 Flask-Login 等扩展增加用户系统，不同用户可以上传和分析自己的数据集。

7.2 生产环境部署要点

1. 关闭 Debug 模式：在app.run()中设置debug=False。Debug 模式会带来安全风险。
2. 使用生产级 WSGI 服务器：不要使用 Flask 自带的开发服务器。推荐使用Gunicorn(Linux/macOS) 或Waitress(Windows) 作为 WSGI 服务器。

   # 安装 Gunicorn pip install gunicorn # 启动应用 (假设入口文件是 app.py， app 是 Flask 实例名) gunicorn -w 4 -b 0.0.0.0:8000 app:app

3. 反向代理与静态文件：使用Nginx作为反向代理，处理静态文件（static/目录下的文件），并将动态请求转发给 Gunicorn。这能提升性能和安全性。
4. 配置管理：将敏感信息（如数据库连接字符串、API密钥）从代码中剥离，使用环境变量或配置文件（如config.py）管理，并通过.gitignore避免提交到代码库。
5. 日志记录：配置 Flask 或 Gunicorn 的日志，将访问日志和应用错误日志记录到文件中，便于故障排查。
6. 进程管理：使用Supervisor或systemd来管理 Gunicorn 进程，确保应用在服务器重启后能自动运行。

这个项目从数据到展示的完整流程，覆盖了现代数据应用的核心环节。理解每个模块的作用和它们之间的数据流转，比单纯复制代码更重要。在实际应用中，你需要根据具体的业务需求和数据特点，调整数据处理逻辑、图表类型和交互方式。