企业官网建设流程全解析

做潮玩和 IP 消费的人，几乎每天都会盯热搜：“泡泡玛特”今天又有什么新联名？LABUBU 为什么突然冲到前排？SKULLPANDA 的新系列讨论度怎么样？但问题是，靠人工一条一条刷热搜，既慢又容易漏，更别提把一个月的数据拉出来对比趋势了。这时候很多人的第一反应是写爬虫，可爬虫只是第一步，数据抓下来之后怎么变成能看的趋势图、占比图、排行榜，才是真正费时间的部分。本文要解决的，就是这个从“数据”到“可视化”的完整链路。

这个热搜分析平台，是用 Python 做数据采集与处理，用 Flask 提供后端接口，用 ECharts 在前端渲染图表，三块拼起来，可以在 1 小时内跑通一个最小可用版本。我的判断是：这里真正降低开发成本的不是爬虫框架，而是 Flask 轻量级接口模式和 ECharts 开箱即用的图表能力。一个懂 Python 基础的开发者，完全可以在一个周末把“抓取—处理—接口—可视化”这条链路走通，而且这套模板换一个品牌词就能复用。

读完本文，你将得到一个可以直接运行的 Flask + ECharts 模板，并理解如何把它扩展到任意品牌、任意热搜数据源。文章会按照“为什么需要这个平台 → 核心概念与技术选型 → 环境准备 → 数据模块 → 后端接口 → 前端图表 → 运行验证 → 排错 → 工程建议”的路径来展开，代码全部放在对应目录下，照着敲一遍就能跑起来。

1. 从手动刷热搜到自动化分析，问题到底在哪里

先说一个真实的场景。假设你在负责泡泡玛特某个 IP 的市场运营，每周要写一份竞品观察或热点复盘报告。过去是怎么做的？打开微博热搜榜、百度指数、抖音热榜，肉眼搜索“泡泡玛特”“Molly”“LABUBU”这些词，截图、保存、手写进 Excel，再手工画折线图。这种做法的痛点非常明显：

• 不及时。热搜是实时变化的，人工盯盘只能看到某一时刻的快照，看不到完整的波动过程。
• 不系统。多个平台的数据格式不统一，没法定量对比，只能靠“感觉”。
• 无法复用。换一个品牌词，所有整理工作要重来一遍。

也就是说，问题不在于“抓不到数据”，而在于数据抓下来之后缺少一个自动化的分析出口。热搜数据本质上是一种时序数据，适合用趋势图、占比图、排行榜来观察，而这些图表手绘的成本很高。

从这个角度看，热搜分析平台的核心价值不是“爬虫”，而是把获取、清洗、存储、接口、可视化串成一条自动化的流水线。这条流水线的每一环单拎出来都不难，难的是把链路打通。

我推荐 Flask + ECharts 来搭这个平台，原因有三个：

1. Flask 足够轻。不需要像 Django 那样生成一大堆项目骨架，一个文件就能提供 HTTP 接口，学习成本低。
2. ECharts 功能覆盖热搜分析。饼图、折线图、柱状图、雷达图、热力图、词云（配合扩展）全部支持，配置化输出，不需要手写 Canvas。
3. Python 数据处理生态成熟。采集用 requests，清洗用 pandas，复杂统计可以随时扩展，和 Flask 同属一个生态，没有跨语言衔接成本。

所以，这篇文章实际想让你获得的不是某个单一技能，而是**“数据驱动的热点监测”这类小项目的最小闭环经验**。这类经验在日后的运营后台、舆情监测、竞品分析项目中都能复用。

2. Flask + ECharts 的核心概念与技术选型

在动手之前，先把架构里的三个核心角色讲清楚。

2.1 Flask 是什么，解决什么问题

Flask 是一个基于 WSGI 的 Python Web 微框架，核心特点是小而灵活。它不像 Django 那样自带 ORM、Admin、表单验证等重量级组件，而是把选择权交给你：需要数据库就集成 SQLAlchemy，需要模板就用 Jinja2，不需要就不用。

在热搜分析平台中，Flask 承担的是服务端接口层的职责。浏览器里的 ECharts 图表无法直接读取 Python 内存中的数据，需要 Flask 暴露一个 HTTP 接口，前端通过 Ajax 或 fetch 请求这个接口，拿到 JSON 数据后再渲染图表。

传统方案里，你可能需要写一个完整的后端服务来处理登录、权限、数据库事务，但热搜分析平台的核心逻辑很简单：把数据整理好，以 JSON 形式吐给前端。用 Flask 来做这件事，代码量最少，调试也最直接。

2.2 ECharts 是什么，解决什么问题

ECharts 是百度开源、Apache 基金会孵化的前端可视化图表库，底层基于 Canvas 渲染，支持的图表类型非常全。对数据分析项目来说，它的几个优点很突出：

• 配置化书写。图表的类型、坐标轴、图例、提示框、颜色都通过 option 对象配置，不需要关注绘制细节。
• 交互能力强。缩放、拖拽、图例开关、数据视图、导出图片都是内置能力。
• 文档和社区成熟。遇到不熟悉的图表，去官方示例库搜一下就能找到相似配置。

在热搜分析平台中，ECharts 负责把 Flask 返回的数据渲染成三类最常见的分析图：饼图（类别占比）、折线图（时间趋势）、柱状图（热度排行）。后续如果需要词云、地图、热力图，ECharts 也有对应的扩展或原生支持。

2.3 为什么不选其他方案

很多人会问：直接用 Jupyter Notebook 画图不也一样吗？Jupyter 适合个人探索性分析，但它的输出是静态的，无法给运营同事提供一个可交互的 Web 页面。用 Tableau / Power BI 也能做，但这类工具偏重商业分析场景，部署和授权成本高，对开发者不够友好。

还有人会问：前端能不能不用 Flask，直接用 Python 脚本生成 HTML？可以，但那样每次分析都要重新生成页面，无法做到按需请求、按条件筛选。而 Flask 提供的是“数据 API”，前端可以随时刷新、切换维度，后端只需要保证数据最新即可。这个模式在真实项目中更常见，也更便于扩展。

一句话总结：Flask 管理数据出口，ECharts 管理数据呈现，两者通过 JSON 对话，这就是平台的最小架构。

3. 环境准备与项目结构设计

在开始写代码之前，先把环境准备好。本项目的依赖非常简单，不需要数据库，不需要 Node.js，也不需要前端构建工具。

3.1 Python 环境

建议使用 Python 3.8 及以上版本。可以用以下命令检查：

python --version

如果还没有安装 Python，建议直接去官网下载安装包，安装时勾选“Add Python to PATH”。版本以实际安装为准，本文演示的代码在 Python 3.8 到 3.12 上都能运行。

3.2 创建虚拟环境并安装依赖

为了避免多个项目之间的依赖冲突，建议在项目目录下创建虚拟环境：

mkdir hotword-platform cd hotword-platform python -m venv venv

激活虚拟环境：

# Windows venv\Scripts\activate # Linux / macOS source venv/bin/activate

然后安装依赖。创建requirements.txt文件，内容如下：

flask>=2.0 requests>=2.25

安装：

pip install -r requirements.txt

这里把 requests 也加上了，因为后续接真实数据源时会用到。本教程的模拟数据模块暂时不强制依赖它。

3.3 项目目录结构

整个项目只有四个文件：

hotword-platform/ ├── app.py # Flask 应用，提供接口和页面渲染 ├── data_fetcher.py # 数据获取与模拟数据处理 ├── requirements.txt # 依赖清单 └── templates/ └── index.html # 前端页面，ECharts 渲染图表

templates目录是 Flask 渲染 HTML 模板的默认目录。这里的index.html会被render_template("index.html")自动找到，不需要额外配置。

可能你会有疑问：真实项目里不是还要有数据库、配置文件、路由分模块吗？话没错，但那是工程后期的事。当你只有一个核心目标——跑通数据到图表的链路时，文件越少越不容易出错。先把最小闭环跑起来，再逐步拆模块，是更务实的做法。

4. 数据采集与清洗：先用模拟数据跑通链路

这一章是整个平台的“原料”部分。选择先用模拟数据，是因为真实的公开热搜接口往往有频率限制、参数要求、反爬策略，如果直接依赖它，教程可能隔几天就失效了。先用一份结构良好的模拟数据把整个链路跑通，再替换成真实数据源，这是最稳的开发顺序。

4.1 为什么先用模拟数据

模拟数据不是“糊弄”，而是为了保证可复现性。一个教程如果不能稳定运行，就没法建立读者的信心。对于热搜分析平台来说，数据字段的规范性比数据本身的真实性更重要。先把字段约定好，后面接真实数据时，只需要替换获取函数，后端和前端都不用大改。

我们约定每个热搜词包含五个字段：

这个结构基本覆盖了热搜分析的常规维度：看关键词、看分类、看来源、看数值、看时间。

4.2 data_fetcher.py 完整代码

新建data_fetcher.py，写入以下代码：

# 文件路径：data_fetcher.py """ 模拟数据获取模块。 默认返回结构化的模拟数据，保证整个链路在无网络、无数据库的情况下也能跑通。 后续接入真实热搜数据源时，只需要替换本模块中对应的函数即可。 """ import random from datetime import datetime, timedelta # 为了让演示结果可复现，固定随机种子。实际项目中可以移除。 random.seed(42) # 核心关键词列表，按实际业务场景配置 HOT_KEYWORDS = [ {"keyword": "泡泡玛特", "category": "品牌", "source": "微博热搜", "hot_value": 920000}, {"keyword": "SKULLPANDA", "category": "IP", "source": "微博热搜", "hot_value": 880000}, {"keyword": "LABUBU", "category": "IP", "source": "抖音热榜", "hot_value": 760000}, {"keyword": "Molly", "category": "IP", "source": "百度指数", "hot_value": 610000}, {"keyword": "Dimoo", "category": "IP", "source": "微博热搜", "hot_value": 430000}, {"keyword": "盲盒", "category": "行业", "source": "百度指数", "hot_value": 380000}, {"keyword": "潮玩", "category": "行业", "source": "微博热搜", "hot_value": 300000}, {"keyword": "泡泡玛特联名", "category": "产品", "source": "抖音热榜", "hot_value": 280000}, ] TREND_DAYS = 7 TREND_KEYWORDS = ["泡泡玛特", "SKULLPANDA", "LABUBU"] def get_hot_keywords(): """返回当前热搜词列表。""" return HOT_KEYWORDS def get_keyword_trends(days=TREND_DAYS): """ 返回核心关键词最近 N 天的热度趋势。 实际项目中，这里应该从搜索引擎公开 API 或自建数据库中读取真实数据。 """ today = datetime.now() result = [] for keyword in TREND_KEYWORDS: # 给每个关键词一个基准热度，再叠加随机波动，模拟真实趋势 base_value = 500000 + random.randint(0, 100000) for i in range(days - 1, -1, -1): date = today - timedelta(days=i) point = { "date": date.strftime("%m-%d"), "keyword": keyword, "hot_value": base_value + random.randint(-50000, 50000), } result.append(point) return result def get_rank_list(limit=10): """返回热度排行榜，按 hot_value 降序排列。""" sorted_data = sorted(HOT_KEYWORDS, key=lambda x: x["hot_value"], reverse=True) return sorted_data[:limit]

这段代码暴露了三个函数，分别对应前端的三种图表需求：

• get_hot_keywords()返回热搜词列表，前端用来按 category 聚合出“热词类别占比”饼图。
• get_keyword_trends()返回最近 7 天核心关键词的热度趋势，前端用来画折线图。
• get_rank_list()返回热度榜，前端用来画柱状图。

三个函数共同构成“数据访问层”。后端接口只关心这三个函数，不关心数据到底是从内存、数据库还是爬虫拿到的。这就是模块之间解耦的价值。

4.3 真实数据采集的扩展思路

如果后续要接入真实热搜数据，替换思路是这样的：

先用requests请求公开的热搜榜接口（例如微博热搜榜的公开页面或移动端接口），然后把返回结果解析成上面约定的五字段结构。需要注意几点：

• 优先使用官方开放 API，没有官方 API 时再考虑页面解析。
• 遵守目标网站的 robots 协议和访问频率限制，避免对目标服务器造成压力。
• 只采集公开可见的非个人信息，不要涉及用户隐私数据。
• 合理控制请求间隔，建议至少间隔 1 秒以上，并使用退避重试策略。

从技术实现上说，真实数据源和模拟数据的差别只在data_fetcher.py内部，后端接口和前端图表完全不用改。这是设计上值得保留的一个优点。

5. Flask 后端接口设计：让数据可以被前端调用

数据模块写好了，接下来要把它暴露给前端。Flask 在这里的作用很简单：定义几个路由，返回 JSON。

5.1 app.py 完整代码

新建app.py，写入以下代码：

# 文件路径：app.py from flask import Flask, jsonify, render_template import data_fetcher app = Flask(__name__) @app.route("/") def index(): """渲染前端页面。""" return render_template("index.html") @app.route("/api/hot_keywords") def api_hot_keywords(): """热搜词列表，用于饼图展示。""" data = data_fetcher.get_hot_keywords() return jsonify({"code": 0, "data": data}) @app.route("/api/trends") def api_trends(): """关键词趋势，用于折线图展示。""" data = data_fetcher.get_keyword_trends() return jsonify({"code": 0, "data": data}) @app.route("/api/rank") def api_rank(): """热度排行榜，用于柱状图展示。""" data = data_fetcher.get_rank_list() return jsonify({"code": 0, "data": data}) @app.after_request def add_cors_headers(response): """ 开发阶段简单处理跨域。 注意：这里把 Access-Control-Allow-Origin 设置为 * 仅适合本地开发。 生产环境请使用具体的域名白名单，避免任何网站都能调用你的接口。 """ response.headers["Access-Control-Allow-Origin"] = "*" response.headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS" response.headers["Access-Control-Allow-Headers"] = "Content-Type" return response if __name__ == "__main__": app.run(host="0.0.0.0", port=5000, debug=True)

5.2 路由说明与接口规范

这个后端一共暴露了四个路由：

jsonify是 Flask 内置的 JSON 序列化方法。这里我把返回格式统一成{"code": 0, "data": ...}，code 为 0 表示成功，data 放具体数据。将来如果接口出错了，可以返回{"code": 500, "message": "错误描述"}，前端可以根据 code 统一处理异常。

@app.after_request里的跨域配置是给开发便利的。如果以后把前端放到单独域名下，或者改成前后端分离部署，这行代码能避免浏览器因 CORS 问题拦截请求。生产环境建议把*改成具体域名，比如只允许你公司的前端域名访问，防止接口被外部随意调用。

5.3 启动 Flask 服务

在项目根目录执行：

python app.py

看到如下日志说明启动成功：

* Running on all addresses (0.0.0.0) * Running on http://127.0.0.1:5000

此时打开浏览器访问http://127.0.0.1:5000/api/rank，应该能看到 JSON 格式的数据。这一步能直接验证后端是否正常。

6. ECharts 前端可视化：三张图看清热搜规律

后端接口就绪后，现在写前端页面。这个页面用三个图表来回答三个问题：热搜词都集中在哪些类别、核心 IP 热度最近怎么变化、当前热度最高的关键词是哪几个。

6.1 index.html 完整代码

新建templates/index.html，写入以下代码：

<!-- 文件路径：templates/index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>泡泡玛特热搜分析平台</title> <!-- 使用 jsdelivr 的 ECharts 5 CDN，不需要 npm 和打包工具 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <style> body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; margin: 20px; background: #f5f6fa; } h1 { text-align: center; color: #333; } .chart-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .chart-box { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 16px; box-sizing: border-box; } .chart-box.large { width: 100%; height: 420px; } .chart-box.medium { width: calc(50% - 10px); height: 360px; } @media (max-width: 768px) { .chart-box.medium { width: 100%; } } </style> </head> <body> <h1>泡泡玛特热搜分析平台</h1> <div class="chart-row"> <div id="pieChart" class="chart-box medium"></div> <div id="barChart" class="chart-box medium"></div> <div id="lineChart" class="chart-box large"></div> </div> <script> async function fetchJSON(url) { const response = await fetch(url); if (!response.ok) { throw new Error('请求失败：' + response.status + ' ' + response.statusText); } const result = await response.json(); if (result.code !== 0) { throw new Error('接口返回错误：' + (result.message || '未知错误')); } return result.data; } async function initPieChart() { const chart = echarts.init(document.getElementById('pieChart')); const data = await fetchJSON('/api/hot_keywords'); // 按 category 聚合热度值，得到饼图所需的数据结构 const categoryMap = {}; data.forEach(item => { categoryMap[item.category] = (categoryMap[item.category] || 0) + item.hot_value; }); const pieData = Object.entries(categoryMap).map(([name, value]) => ({ name, value })); chart.setOption({ title: { text: '热词类别占比', left: 'center', textStyle: { fontSize: 16 } }, tooltip: { trigger: 'item' }, legend: { bottom: 10 }, series: [{ type: 'pie', radius: ['35%', '70%'], label: { formatter: '{b}: {d}%' }, data: pieData }] }); } async function initLineChart() { const chart = echarts.init(document.getElementById('lineChart')); const data = await fetchJSON('/api/trends'); // 提取所有关键词和日期，用于构造折线图的 series const keywordSet = [...new Set(data.map(item => item.keyword))]; const dates = [...new Set(data.map(item => item.date))].sort(); const series = keywordSet.map(keyword => { const valueMap = data .filter(item => item.keyword === keyword) .reduce((acc, item) => { acc[item.date] = item.hot_value; return acc; }, {}); return { name: keyword, type: 'line', smooth: true, data: dates.map(date => valueMap[date] || 0) }; }); chart.setOption({ title: { text: '核心关键词近7天热度趋势', left: 'center', textStyle: { fontSize: 16 } }, tooltip: { trigger: 'axis' }, legend: { top: 40 }, grid: { left: 60, right: 30, top: 80, bottom: 40 }, xAxis: { type: 'category', data: dates }, yAxis: { type: 'value', name: '热度值' }, series: series }); } async function initBarChart() { const chart = echarts.init(document.getElementById('barChart')); const data = await fetchJSON('/api/rank'); // 横向柱状图更适合展示排行榜 const names = data.map(item => item.keyword); const values = data.map(item => item.hot_value); chart.setOption({ title: { text: '热搜词 TOP 榜', left: 'center', textStyle: { fontSize: 16 } }, tooltip: { trigger: 'axis' }, grid: { left: 120, right: 30, top: 50, bottom: 40 }, xAxis: { type: 'value', name: '热度值' }, yAxis: { type: 'category', data: names.reverse() }, series: [{ type: 'bar', data: values.reverse(), itemStyle: { color: '#5470c6' }, label: { show: true, position: 'right' } }] }); } window.addEventListener('resize', () => { ['pieChart', 'lineChart', 'barChart'].forEach(id => { const chart = echarts.getInstanceByDom(document.getElementById(id)); if (chart) chart.resize(); }); }); initPieChart().catch(err => console.error(err)); initLineChart().catch(err => console.error(err)); initBarChart().catch(err => console.error(err)); </script> </body> </html>

6.2 前端逻辑要点

这里有几个关键点值得解释。

fetchJSON这个函数封装了请求逻辑：先请求 URL，再判断 HTTP 状态，然后解析 JSON 并检查业务 code。三个初始化函数都复用它，避免重复写 try-catch。

饼图的数据聚合放在前端做，是因为/api/hot_keywords返回的是“关键词明细”，而饼图需要的是“类别汇总”。在前端用reduce聚合虽然直观，但如果数据量大到几万条，更合适的做法是在后端用 pandas 完成聚合。当前演示数据量很小，所以前端处理完全没问题。

折线图的做法是先把数据按 keyword 分组，每个 keyword 变成一条线。日期排序时，因为日期格式是类似"01-23"的字符串，直接用sort()就能按字符顺序排，恰好等于时间顺序。这种小技巧在这个场景下够用，但如果日期格式换成"2025-01-23"，同样成立。

柱状图用横向布局，因为排行榜的词条比较多，横向更容易阅读。注意names.reverse()和values.reverse()的作用是让热度最高的词显示在顶部，更符合阅读习惯。

6.3 为什么不需要前端框架

很多模板项目一上来就引入 Vue 或 React，但对这个场景来说，原生 JavaScript 加 ECharts 已经足够。理由很简单：页面没有复杂的状态管理，没有组件通信，只有三个独立的图表初始化函数。引入框架反而会增加构建工具配置、依赖安装等额外步骤，拉高上手门槛。

如果你以后想加日期筛选器、关键词搜索、图表联动，再考虑用 Vue/React 也不迟。先把最简单的版本跑通，永远是第一优先级。

7. 运行验证与效果展示

完成上面所有代码后，进入验证阶段。建议按下面的顺序检查。

7.1 启动服务

确保虚拟环境已激活，然后执行：

python app.py

启动成功后，控制台会输出类似下面的内容：

* Running on all addresses (0.0.0.0) * Running on http://127.0.0.1:5000

注意：如果5000端口被占用，Flask 会提示OSError: [Errno 98] Address already in use。这时可以改端口启动：

python app.py --port 5001

或者直接修改代码里的port=5000。在 macOS 上，5000 端口有时会被 AirPlay 接收器占用，这是比较常见的情况。

7.2 验证接口

打开浏览器，先访问http://127.0.0.1:5000/api/hot_keywords，正常会看到 JSON 数组。再访问/api/trends和/api/rank，确认三个接口都返回数据。

也可以在终端用 curl 验证：

curl http://127.0.0.1:5000/api/rank

输出类似：

{"code":0,"data":[{"category":"品牌","hot_value":920000,"keyword":"泡泡玛特","source":"微博热搜"}]}

注意：/api/trends的返回值里有时间字段，但data_fetcher.py里已经格式化为字符串，所以 Flask 的 JSON 序列化不会遇到datetime类型错误。

7.3 访问主页面

访问http://127.0.0.1:5000/，正常情况下页面渲染三个图表：

• 饼图：展示 IP、品牌、行业、产品四个类别的热度占比。
• 折线图：展示“泡泡玛特”“SKULLPANDA”“LABUBU”三个关键词最近 7 天的热度波动。
• 柱状图：展示当前热度最高的关键词排行。

如果图表区域空白，先按 F12 打开浏览器开发者工具，在 Console 标签页看报错信息。最常见的几个错误是：

• ECharts CDN 加载失败，页面会报ECharts is not defined。
• 后端接口 404，通常是 Flask 服务没启动或者路由写错。
• 接口返回了数据但图表数据为空，需要检查数据聚合逻辑。

这些常见问题会在下一章集中列出。

8. 常见问题与排查思路

下面这几个问题是新手最容易遇到的，按“现象 → 原因 → 排查 → 解决”的方式整理成表格，方便收藏备用。

其中最容易忽略的是最后一个问题。如果后续你在页面上加了“刷新数据”按钮，会发现多次点击后图表可能出现闪烁或渲染错乱，这往往是异步请求返回顺序不一致导致的。建议在每次发起新请求前，记录一个请求序号或使用 AbortController 取消旧请求，可以避免很多竞态问题。

9. 最佳实践与后续学习方向

最小可用的平台已经跑通了。从工程角度，还有几个建议可以在后续迭代中直接使用。

9.1 数据持久化：从内存到 SQLite

当前data_fetcher.py的数据是写死在内存里的，服务重启后数据就丢失。真实项目中建议至少把采集结果落到 SQLite 或 CSV 文件里。SQLite 的优势是零配置文件、Python 自带sqlite3模块，不需要额外安装数据库服务。

有了历史数据之后，趋势图就能展示“最近 30 天”“最近 90 天”的完整曲线，而不仅仅是当天的模拟数据。更进一步，可以定时把采集结果写入数据库，再在 Flask 接口里加上start_date、end_date、keyword等筛选参数，让前端支持按时间范围和关键词动态查询。

9.2 定时采集与部署

热搜数据是持续变化的，靠手动启动脚本采集不现实。建议部署方式有两种：

• 本机或服务器上用cron或APScheduler定时执行采集脚本。
• 在 Flask 应用内部集成 APScheduler，启动服务时自动启动定时任务。

部署方面，Flask 内置的开发服务器不适合生产环境。更稳妥的组合是Gunicorn + Nginx，或者直接用 Docker 把整个应用打成镜像。网上已经有很多 Flask + Docker 部署案例，可以参照。部署时记得关闭 debug 模式，并用环境变量管理密钥和数据库连接信息。

9.3 前后端进一步分离

当前模板是 Flask 直接渲染 HTML 页面，前端和后端在同一项目里。如果前端团队和后端团队要并行开发，或者希望前端复用不同的数据 API，可以把前端拆成独立项目（Vue/React），通过 Nginx 做静态文件服务，再反向代理到 Flask API。此时第 5 章的 CORS 配置就非常关键了，Access-Control-Allow-Origin必须改成具体的前端域名。

9.4 可视化能力扩展

ECharts 能做的远不止三张基础图。针对热搜分析场景，推荐几个进阶方向：

• 词云：展示大量热搜词的热度分布，视觉冲击力最强。
• 南丁格尔玫瑰图：适合展示不同类别的热度对比，比普通饼图更能体现数据差异。
• 地图：如果数据包含地域维度，可以按省份、城市展示热搜热力图。
• 时间轴：ECharts 的 timeline 组件可以播放每天的热搜变化，适合做复盘报告。

9.5 数据采集的合规提醒

最后强调一点。热搜平台的核心价值在于分析，而不是采集本身。接入真实数据源时，请务必遵守平台条款和 robots 协议，控制请求频率，不要尝试绕过反爬机制。如果需要长时间持续监控，优先寻找官方开放接口或直接购买数据服务。这篇文章提供的模板，换成你自己业务范围内的关键词、行业词、品牌词，就是一个完全可用的轻量舆情分析工具，但前提是数据来源合法合规。

如果你按本文的步骤操作，现在应该已经看到了三个图表。整个项目从零到一的核心在于：用模拟数据先打通链路，用分层结构隔离数据获取和展示变化，再用 Flask 和 ECharts 各自的生态优势降低开发成本。下一步，可以给data_fetcher.py接上真实数据源，把结果写入 SQLite，再给页面加上一个刷新按钮。做完这三件事，这个 1 小时的练习项目就已经具备了一个小型数据分析产品的雏形。