# douyin-analytics

**Repository Path**: ghostroot/douyin-analytics

## Basic Information

- **Project Name**: douyin-analytics
- **Description**: - 项目性质 ：FastAPI数据可视化项目
- 数据规模 ：173万条抖音用户行为数据
- 技术栈 ：前端ECharts+jQuery，后端FastAPI+Pandas
- 功能规模 ：26个图表，20+API接口，4个分析页面
- 部署特性 ：一键部署脚本
- 适用场景 ：数据分析可视化学习
- **Primary Language**: Python
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-23
- **Last Updated**: 2026-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 抖音数据分析大屏 —— 零基础到完整项目教程

> **设计原则：零跳跃学习**
>
> 传统路线的问题：知识点A → 知识点C（发现需要B，回头补B）→ 知识点D（发现需要前置知识X）
>
> 本路线的目标：知识点A → 知识点B（A的自然延伸）→ 知识点C（B的必然发展）→ 知识点D（C的合理进阶）

---

![echarts](./img/1.png)

![echarts](./img/2.png)

![echarts](./img/3.png)

![echarts](./img/4.png)

## 目录

- [第1章 从问题出发——为什么需要数据分析大屏](#第1章-从问题出发为什么需要数据分析大屏)
- [第2章 认识数据——理解我们的原材料](#第2章-认识数据理解我们的原材料)
- [第3章 系统架构——从全局看项目](#第3章-系统架构从全局看项目)
- [第4章 技术选型——为什么是这些工具](#第4章-技术选型为什么是这些工具)
- [第5章 后端基础——搭建数据服务](#第5章-后端基础搭建数据服务)
- [第6章 数据分析实战——从数据到洞察](#第6章-数据分析实战从数据到洞察)
- [第7章 前端基础——HTML与CSS](#第7章-前端基础html与css)
- [第8章 CSS组件化设计](#第8章-css组件化设计)
- [第9章 JavaScript组件化架构](#第9章-javascript组件化架构)
- [第10章 图表组件开发](#第10章-图表组件开发)
- [第11章 页面组装与集成](#第11章-页面组装与集成)
- [第12章 部署与运维](#第12章-部署与运维)

---

# 第1章 从问题出发——为什么需要数据分析大屏

## 1.1 什么是数据分析

想象你开了一家奶茶店。每天有几百个顾客来买奶茶，你脑子里会有很多问题：

- 今天卖了多少杯？
- 哪种口味最受欢迎？
- 什么时间段客人最多？
- 哪些客人经常来？

如果你只有一个小本子记录每天的订单，翻半天也找不到答案。**数据分析就是把杂乱的数据变成有用的信息的过程**。

在互联网时代，抖音每天产生海量的用户行为数据——谁看了什么视频、看了多久、有没有点赞、在哪个城市……这些数据如果只是一行行存在文件里，就像那本厚厚的订单本，毫无意义。只有通过**分析**和**可视化**，数据才能告诉我们：用户喜欢什么、什么时候最活跃、哪些内容质量高。

## 1.2 为什么需要可视化

看两组信息，哪个更容易理解？

**纯数字版本：**
```
北京用户数：285,432
上海用户数：243,567
广州用户数：198,234
深圳用户数：176,890
杭州用户数：145,678
```

**柱状图版本：**
一个简单的柱状图，北京最高，依次递减，一眼就能看出差距。

人类大脑处理图形的速度比处理文字快6万倍。**数据可视化就是把数字变成图形，让人类的大脑能"一眼看懂"**。

## 1.3 什么是数据大屏

你可能在公司大堂、指挥中心、商场见过那种超大屏幕，上面有各种图表、数字、地图在实时跳动——这就是**数据大屏**。

数据大屏的特点：
- **全屏展示**：占满整个屏幕，没有滚动条
- **多图表同时呈现**：一屏展示多个维度的数据
- **暗色主题**：深色背景减少视觉疲劳，适合长时间观看
- **实时或准实时更新**：数据变化时图表自动刷新

## 1.4 本项目要解决什么问题

本项目是一个**抖音数据分析大屏**，要回答以下核心问题：

| 问题 | 对应的分析维度 |
|------|---------------|
| 平台整体情况如何？ | 概览仪表盘（用户数、视频数、点赞数、完播率） |
| 用户有什么行为特征？ | 用户分析（活跃用户、完播行为、时间模式） |
| 内容质量怎么样？ | 内容质量（音乐热度、作者影响力、时长分布） |
| 用户和内容在空间时间上如何分布？ | 时空分布（城市地图、时间趋势、工作日vs周末） |

这四个问题，对应大屏的四个页面。每个页面包含多个图表，从不同角度回答同一个大问题。

```mermaid
graph TD
    A[抖音数据] --> B[概览仪表盘]
    A --> C[用户分析]
    A --> D[内容质量]
    A --> E[时空分布]
    
    B --> B1[KPI卡片]
    B --> B2[每日点赞趋势]
    B --> B3[热门音乐排行]
    B --> B4[作者活跃度]
    B --> B5[渠道分布]
    B --> B6[城市分布]
    B --> B7[小时趋势]
    B --> B8[一周模式]
    
    C --> C1[活跃用户排名]
    C --> C2[完播行为]
    C --> C3[城市热力]
    C --> C4[时间模式]
    C --> C5[渠道偏好]
    C --> C6[行为雷达]
    
    D --> D1[音乐词云]
    D --> D2[音乐参与度]
    D --> D3[作者影响力]
    D --> D4[时长分布]
    D --> D5[渠道质量]
    D --> D6[点赞分布]
    D --> D7[完播质量]
    
    E --> E1[城市地图]
    E --> E2[城市-音乐桑基图]
    E --> E3[分钟级趋势]
    E --> E4[工作日vs周末]
    E --> E5[时间-城市热力]
```

---

# 第2章 认识数据——理解我们的原材料

## 2.1 数据从哪里来

本项目的数据来自一个CSV文件：`data/douyin_dataset.csv`，包含约**173万条**用户行为记录。

CSV（Comma-Separated Values，逗号分隔值）是一种最简单的数据存储格式，就像一张Excel表格，每行一条记录，每列一个字段，列与列之间用逗号隔开。

## 2.2 CSV文件格式解析

打开CSV文件，你会看到类似这样的内容：

```csv
uid,user_city,item_id,author_id,item_city,channel,finish,like,music_id,duration_time,real_time,H,date
12345,110000,67890,54321,310000,1,1,0,88888,15,12.3,20,2024-01-15
67890,440100,11111,22222,110000,2,0,1,99999,8,7.5,14,2024-01-15
```

第一行是**表头**（字段名），后面的每一行是一条**记录**（一次用户行为）。

## 2.3 逐字段理解数据集

数据集有14个字段，我们逐个理解：

| 字段名 | 含义 | 数据类型 | 示例值 | 解读 |
|--------|------|---------|--------|------|
| `uid` | 用户ID | 整数 | 12345 | 唯一标识一个用户 |
| `user_city` | 用户所在城市编码 | 整数 | 110000 | 110000=北京，440100=广州 |
| `item_id` | 视频ID | 整数 | 67890 | 唯一标识一个视频 |
| `author_id` | 视频作者ID | 整数 | 54321 | 唯一标识一个作者 |
| `item_city` | 视频发布城市编码 | 整数 | 310000 | 视频作者所在城市 |
| `channel` | 渠道编号 | 整数 | 1 | 视频所属的内容渠道 |
| `finish` | 是否完播 | 0或1 | 1 | 1=看完整个视频，0=没看完 |
| `like` | 是否点赞 | 0或1 | 0 | 1=点了赞，0=没点赞 |
| `music_id` | 背景音乐ID | 整数 | 88888 | 视频使用的背景音乐 |
| `duration_time` | 视频时长（秒） | 整数 | 15 | 视频总时长15秒 |
| `real_time` | 实际观看时长（秒） | 浮点数 | 12.3 | 用户实际看了12.3秒 |
| `H` | 观看小时 | 整数 | 20 | 晚上8点观看 |
| `date` | 观看日期 | 字符串 | 2024-01-15 | 2024年1月15日 |

### 关键理解：每条记录代表什么？

每条记录代表**一个用户观看一个视频的行为**。它回答了：
- **谁**看了？（uid）
- **谁**发布的？（author_id）
- 看了**什么**？（item_id）
- 在**哪里**看的？（user_city）
- 视频来自**哪里**？（item_city）
- 通过什么**渠道**看到的？（channel）
- **看完**了吗？（finish）
- **点赞**了吗？（like）
- 什么**音乐**？（music_id）
- 视频多**长**？（duration_time）
- 实际看了多**久**？（real_time）
- 什么**时间**看的？（H、date）

## 2.4 数据能告诉我们什么

有了这些字段，我们可以回答很多问题：

```mermaid
graph LR
    subgraph 原始字段
        A1[uid]
        A2[user_city]
        A3[item_id]
        A4[author_id]
        A5[channel]
        A6[finish]
        A7[like]
        A8[music_id]
        A9[duration_time]
        A10[H]
        A11[date]
    end
    
    subgraph 可回答的问题
        B1[有多少独立用户?]
        B2[哪些城市用户最多?]
        B3[哪些作者最活跃?]
        B4[哪个渠道最受欢迎?]
        B5[完播率是多少?]
        B6[总点赞数是多少?]
        B7[哪首音乐最火?]
        B8[视频时长分布?]
        B9[几点最活跃?]
        B10[每日趋势?]
    end
    
    A1 --> B1
    A2 --> B2
    A4 --> B3
    A5 --> B4
    A6 --> B5
    A7 --> B6
    A8 --> B7
    A9 --> B8
    A10 --> B9
    A11 --> B10
```

**关键洞察**：数据分析的本质就是**对原始字段进行聚合运算**——计数（count）、求和（sum）、平均（mean）、分组（groupby）。

---

# 第3章 系统架构——从全局看项目

## 3.1 什么是前后端分离

在理解项目架构之前，先理解一个核心概念：**前后端分离**。

想象一家餐厅：
- **后厨**（后端）：负责处理食材，做出菜品。顾客看不到后厨的运作。
- **前厅**（前端）：负责展示菜品，让顾客看到和选择。顾客只和前厅打交道。
- **服务员**（API接口）：前厅告诉服务员要什么菜，服务员去后厨取，再端给前厅。

对应到我们的项目：
- **后端**：Python程序，读取CSV数据，计算分析结果
- **前端**：网页，展示图表和数字
- **API接口**：后端提供的URL地址，前端通过它获取数据

```mermaid
sequenceDiagram
    participant 浏览器 as 前端（浏览器）
    participant API as 后端API（FastAPI）
    participant CSV as 数据文件（CSV）

    浏览器->>API: 1. 请求 /api/overview
    API->>CSV: 2. 读取 douyin_dataset.csv
    CSV-->>API: 3. 返回原始数据
    API->>API: 4. Pandas聚合计算
    API-->>浏览器: 5. 返回JSON结果
    浏览器->>浏览器: 6. ECharts渲染图表
```

## 3.2 本项目的架构设计

本项目采用经典的**三层架构**：

```mermaid
graph TB
    subgraph 展示层["展示层（前端）"]
        direction TB
        HTML[HTML 页面结构]
        CSS[CSS 样式与布局]
        JS[JavaScript 交互逻辑]
        ECharts[ECharts 图表渲染]
    end
    
    subgraph 接口层["接口层（API）"]
        direction TB
        FastAPI[FastAPI 路由]
        CORS[CORS 跨域配置]
        Response[统一响应包装]
    end
    
    subgraph 数据层["数据层（后端）"]
        direction TB
        Pandas[Pandas 数据处理]
        CSV[CSV 文件存储]
    end
    
    展示层 -->|AJAX请求| 接口层
    接口层 -->|读取数据| 数据层
    数据层 -->|JSON响应| 接口层
    接口层 -->|JSON数据| 展示层
```

### 架构的关键决策

| 决策 | 选择 | 原因 |
|------|------|------|
| 数据存储 | CSV文件 | 无需数据库，简单直接 |
| 数据处理 | 每次请求实时读取 | 数据不变，无需缓存 |
| 前后端通信 | RESTful API + JSON | 标准化，前端易消费 |
| 页面模式 | SPA单页应用 | 切换流畅，无页面刷新 |

## 3.3 数据流转全过程

从用户打开网页到看到图表，数据经历了完整的流转：

```mermaid
flowchart TD
    A[用户打开浏览器] --> B[访问 http://localhost:8080]
    B --> C[FastAPI重定向到 /static/index.html]
    C --> D[浏览器加载HTML]
    D --> E[加载CSS样式文件]
    D --> F[加载JavaScript文件]
    E --> G[页面渲染完成]
    F --> G
    G --> H[PageNavigation初始化]
    H --> I[激活概览页面]
    I --> J[创建图表组件实例]
    J --> K[各组件发起AJAX请求]
    K --> L[FastAPI处理请求]
    L --> M[Pandas读取CSV]
    M --> N[Pandas聚合计算]
    N --> O[返回JSON数据]
    O --> P[前端接收数据]
    P --> Q[ECharts渲染图表]
    Q --> R[用户看到完整大屏]
    
    style A fill:#4d96ff,color:#fff
    style R fill:#6bcb77,color:#fff
    style K fill:#ffd93d,color:#333
    style O fill:#ffd93d,color:#333
```

## 3.4 目录结构详解

```
douyin-analytics/
├── src/                        # 后端代码目录
│   ├── __init__.py             # Python包标识文件（空文件）
│   └── main.py                 # 后端唯一入口：所有API路由
├── data/                       # 数据目录
│   └── douyin_dataset.csv      # 数据源文件（173万条记录）
├── static/                     # 前端静态资源目录
│   ├── index.html              # SPA唯一入口HTML
│   ├── css/                    # 样式文件
│   │   ├── base.css            # CSS变量、全局重置、动画
│   │   ├── layout.css          # Grid/Flexbox布局
│   │   ├── components/         # 组件样式
│   │   │   ├── nav.css         # 导航栏组件
│   │   │   └── loading.css     # 加载动画组件
│   │   └── pages/              # 页面样式
│   │       ├── overview.css    # 概览页
│   │       ├── user-analysis.css
│   │       ├── content-quality.css
│   │       └── spatiotemporal.css
│   ├── js/                     # JavaScript文件
│   │   ├── jquery.min.js       # jQuery 4.0.0
│   │   ├── echarts.min.js      # ECharts 6
│   │   ├── lib/                # 公共工具库
│   │   │   ├── page-navigation.js  # 页面导航管理器
│   │   │   ├── loading-manager.js  # 加载动画管理器
│   │   │   ├── resize-manager.js   # 尺寸管理器
│   │   │   └── echarts-config.js   # ECharts主题配置
│   │   ├── overview/           # 概览页图表
│   │   ├── user-analysis/      # 用户分析页图表
│   │   ├── content-quality/    # 内容质量页图表
│   │   └── spatiotemporal/     # 时空分布页图表
│   └── geo/                    # 地图数据
│       └── china_full.json     # 中国地图GeoJSON
├── douyin-analytics.service    # systemd服务文件
├── requirements.txt            # Python依赖清单
├── install.sh                  # 安装脚本
└── manage.sh                   # 管理脚本
```

**目录设计原则**：
- **按功能分层**：CSS分为base/layout/components/pages四层
- **按页面分模块**：JS图表按页面分目录，每个图表一个文件
- **公共代码抽取**：lib/存放所有页面共享的工具类

---

# 第4章 技术选型——为什么是这些工具

## 4.1 Python与FastAPI

**为什么用Python？**
- 数据分析领域最流行的语言
- Pandas库让数据处理变得简单
- 语法简洁，适合初学者

**为什么用FastAPI而不是Flask/Django？**
- 性能极高（基于异步ASGI）
- 自动生成API文档
- 代码量少，一个文件就能写完所有接口
- 原生支持异步，适合数据密集型应用

## 4.2 Pandas数据处理

Pandas是Python的数据分析库，核心概念是**DataFrame**——你可以把它想象成一张Excel表格：

```python
# 读取CSV → 得到DataFrame（就像打开Excel）
df = pd.read_csv('douyin_dataset.csv')

# DataFrame的操作就像Excel的公式：
df['uid'].nunique()           # = COUNTA(去重uid列)
df['like'].sum()              # = SUM(like列)
df.groupby('user_city').size() # = 数据透视表按城市计数
```

## 4.3 HTML/CSS/JavaScript

这是前端的三板斧：

| 技术 | 作用 | 类比 |
|------|------|------|
| HTML | 页面结构 | 房子的骨架（墙、门、窗） |
| CSS | 页面样式 | 房子的装修（颜色、大小、位置） |
| JavaScript | 页面交互 | 房子的电器（开关、遥控） |

## 4.4 ECharts可视化

ECharts是百度开源的图表库，提供几十种图表类型。选择它的原因：
- 中文文档完善
- 图表类型丰富（折线图、柱状图、饼图、地图、雷达图……）
- 主题可定制
- 性能优秀，能处理大数据量

## 4.5 jQuery与AJAX

**为什么用jQuery？**
- 简化DOM操作和AJAX请求
- 代码更简洁
- 本项目DOM操作不多，jQuery足够

**什么是AJAX？**
AJAX（Asynchronous JavaScript And XML）让网页**不刷新就能从服务器获取数据**。就像你在餐厅坐着，服务员把菜端到你桌上，你不需要站起来去厨房。

```mermaid
sequenceDiagram
    participant 页面 as 网页
    participant 服务器 as 后端服务器
    
    页面->>页面: 用户点击"用户分析"
    页面->>服务器: AJAX请求 /api/active_users
    Note over 页面: 页面不刷新，等待数据
    服务器-->>页面: 返回JSON数据
    页面->>页面: 用数据渲染图表
```

---

# 第5章 后端基础——搭建数据服务

## 5.1 FastAPI入门

FastAPI应用的最小骨架：

```python
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def home():
    return {"message": "Hello World"}
```

就这么简单！`@app.get("/")`定义了一个路由——当用户访问根路径时，执行`home()`函数，返回JSON数据。

## 5.2 第一个API：健康检查

健康检查是最简单的API，用于确认服务是否在运行：

```python
@app.get("/health")
async def health():
    return {"message": "ok"}
```

**执行流程**：
1. 浏览器请求 `GET /health`
2. FastAPI匹配到这个路由
3. 执行`health()`函数
4. 返回 `{"message": "ok"}`

## 5.3 数据读取函数

所有API都需要读取CSV数据，所以抽取一个公共函数：

```python
from pathlib import Path
import pandas as pd

def get_data():
    src_dir = Path(__file__).parent
    data_file = src_dir.parent / "data" / "douyin_dataset.csv"
    df = pd.read_csv(data_file)
    return df
```

**逐行解析**：
- `Path(__file__).parent`：获取当前文件（main.py）所在的目录（src/）
- `src_dir.parent`：获取src的父目录（项目根目录）
- `/ "data" / "douyin_dataset.csv"`：拼接路径到数据文件
- `pd.read_csv()`：Pandas读取CSV文件，返回DataFrame

## 5.4 统一响应格式

为了让前端处理更简单，所有API返回统一格式：

```python
def success_response(data=None):
    return {"code": 200, "data": data}
```

前端只需要检查：
```javascript
if (response.code === 200 && response.data) {
    // 使用 response.data
}
```

## 5.5 CORS跨域配置

**什么是跨域问题？**

浏览器有一个安全策略：网页只能请求同源（同协议、同域名、同端口）的API。如果前端在`localhost:8080`，API也在`localhost:8080`，就没有跨域问题。但如果前端和后端在不同端口，就需要CORS配置。

```python
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],    # 允许所有来源
    allow_credentials=True, # 允许携带凭证
    allow_methods=["*"],    # 允许所有HTTP方法
    allow_headers=["*"],    # 允许所有HTTP头部
)
```

## 5.6 静态文件服务

前端文件（HTML、CSS、JS）需要通过HTTP访问，FastAPI提供了静态文件挂载：

```python
from starlette.staticfiles import StaticFiles

app.mount("/static", StaticFiles(directory=BASE_DIR / "static"), name="static")
```

这样，`static/index.html`就可以通过`/static/index.html`访问。

## 5.7 首页重定向

用户访问根路径`/`时，自动跳转到静态首页：

```python
from starlette.responses import RedirectResponse

@app.get("/")
async def home():
    return RedirectResponse(url="/static/index.html")
```

## 5.8 后端完整骨架

把以上所有部分组合起来，就是后端的完整骨架：

```mermaid
graph TD
    A[FastAPI应用实例] --> B[CORS中间件]
    A --> C[静态文件挂载]
    A --> D[根路由重定向]
    A --> E[健康检查API]
    A --> F[数据读取函数]
    A --> G[统一响应函数]
    A --> H[业务API接口群]
    
    H --> H1["/api/overview"]
    H --> H2["/api/likes_by_date"]
    H --> H3["/api/user_city_distribution"]
    H --> H4["...更多接口"]
    
    F --> I["douyin_dataset.csv"]
```

---

# 第6章 数据分析实战——从数据到洞察

本章是整个教程的核心——我们从一个具体的分析问题出发，一步步写出后端API。

## 6.1 Pandas基础操作

在写API之前，先掌握5个最常用的Pandas操作：

| 操作 | 代码 | 含义 | 类比Excel |
|------|------|------|-----------|
| 读取 | `pd.read_csv()` | 读取CSV文件 | 打开文件 |
| 计数 | `len(df)` | 总行数 | 看行号 |
| 去重计数 | `df['uid'].nunique()` | 不重复的值有多少个 | 删除重复后计数 |
| 求和 | `df['like'].sum()` | 某列求和 | SUM函数 |
| 均值 | `df['finish'].mean()` | 某列平均值 | AVERAGE函数 |
| 分组计数 | `df.groupby('city').size()` | 按某列分组后计数 | 数据透视表 |
| 分组聚合 | `df.groupby('city').agg({...})` | 按某列分组后多种运算 | 数据透视表+公式 |

## 6.2 最简单的分析：24小时发布分布

**问题**：一天24个小时，每个小时有多少条视频被观看？

**思路**：按`H`字段（0-23）分组，统计每组的记录数。

```python
@app.get("/api/hourly_distribution")
async def hourly_distribution():
    df = get_data()
    
    # 按小时分组计数
    hourly = df.groupby('H').size()
    
    # 确保所有小时都有值（缺失的补0）
    hours = list(range(24))
    counts = [int(hourly.get(h, 0)) for h in hours]
    
    return success_response({"hours": hours, "counts": counts})
```

**执行流程**：

```mermaid
flowchart LR
    A[原始数据] --> B["groupby('H')"]
    B --> C[".size()"]
    C --> D[补全0-23小时]
    D --> E[返回JSON]
    
    style A fill:#ff6b6b,color:#fff
    style E fill:#6bcb77,color:#fff
```

**为什么需要补0？** 如果凌晨3点没有人看视频，`groupby`结果中就没有3这个键。但前端需要24个数据点来画图，所以必须补0。

## 6.3 聚合分析：概览KPI

**问题**：平台的核心指标是什么？

**思路**：4个KPI分别用不同的Pandas操作。

```python
@app.get("/api/overview")
async def overview():
    df = get_data()
    
    total_items = len(df)                    # 总记录数
    total_users = df['uid'].nunique()        # 去重用户数
    total_likes = df['like'].sum()           # 点赞总和
    finish_rate = df['finish'].mean() * 100  # 完播率均值×100
    
    return {
        "code": 200,
        "data": {
            "total_items": int(total_items),
            "total_videos": int(total_items),
            "total_users": int(total_users),
            "total_likes": int(total_likes),
            "finish_rate": round(finish_rate, 2)
        }
    }
```

**每个KPI的Pandas操作对应**：

```mermaid
graph LR
    subgraph DataFrame
        DF[173万行数据]
    end
    
    DF -->|len| KPI1[总记录数: 1730000]
    DF -->|nunique| KPI2[独立用户数: 523891]
    DF -->|sum| KPI3[总点赞数: 842156]
    DF -->|mean × 100| KPI4[完播率: 45.67%]
```

## 6.4 分组分析：城市分布

**问题**：哪些城市的用户最多？

**思路**：按`user_city`分组，统计每组的记录数，取Top10。

```python
@app.get("/api/user_city_distribution")
async def user_city_distribution():
    df = get_data()
    
    # 按城市分组 → 计数 → 降序排列 → 取前10
    city_data = df.groupby('user_city').size().sort_values(ascending=False).head(10)
    
    cities = []
    counts = []
    for city, count in city_data.items():
        cities.append(str(city))
        counts.append(int(count))
    
    return success_response({"cities": cities, "counts": counts})
```

**Pandas操作链**：

```mermaid
flowchart LR
    A[DataFrame] --> B["groupby('user_city')"]
    B --> C[".size()"]
    C --> D[".sort_values(ascending=False)"]
    D --> E[".head(10)"]
    E --> F[Top10城市数据]
    
    style A fill:#ff6b6b,color:#fff
    style F fill:#6bcb77,color:#fff
```

## 6.5 时间序列分析：每日点赞趋势

**问题**：每天的点赞数如何变化？

**思路**：将`date`列转为日期类型，按日期分组，对`like`列求和。

```python
@app.get("/api/likes_by_date")
async def likes_by_date():
    df = get_data()
    
    # 关键：指定format参数加速解析！
    df['date'] = pd.to_datetime(df['date'], format='%Y-%m-%d')
    
    likes_by_date = df.groupby('date')['like'].sum().sort_index()
    
    dates = []
    likes = []
    for date, like in likes_by_date.items():
        dates.append(date.strftime("%Y-%m-%d"))
        likes.append(int(like))
    
    return success_response({"dates": dates, "likes": likes})
```

**性能注意**：`pd.to_datetime`不指定`format`时，Pandas会逐行猜测日期格式，173万行数据会非常慢。指定`format='%Y-%m-%d'`后，解析速度提升10-100倍。

## 6.6 关联分析：城市-音乐关联

**问题**：不同城市的用户喜欢什么音乐？

**思路**：按城市和音乐组合分组，统计每组的记录数，取每个城市的Top5音乐。

```python
@app.get("/api/city_music_association")
async def city_music_association():
    df = get_data()
    
    # 取用户最多的Top10城市
    top_cities = df.groupby('user_city').size().nlargest(10).index.tolist()
    
    # 筛选Top10城市的数据
    df_top = df[df['user_city'].isin(top_cities)]
    
    # 按城市和音乐分组计数
    grouped = df_top.groupby(['user_city', 'music_id']).size().reset_index(name='count')
    
    # 每个城市取Top5音乐
    associations = []
    music_ids_set = set()
    for city in top_cities:
        city_data = grouped[grouped['user_city'] == city].nlargest(5, 'count')
        for _, row in city_data.iterrows():
            associations.append({
                "city": str(row['user_city']),
                "music_id": str(row['music_id']),
                "count": int(row['count'])
            })
            music_ids_set.add(str(row['music_id']))
    
    return success_response({
        "cities": [str(c) for c in top_cities],
        "music_ids": list(music_ids_set),
        "associations": associations
    })
```

**分析流程**：

```mermaid
flowchart TD
    A[173万条数据] --> B[取Top10城市]
    B --> C[筛选Top10城市数据]
    C --> D["groupby(city, music_id)"]
    D --> E[每个城市取Top5音乐]
    E --> F[构建关联数据]
    
    style A fill:#ff6b6b,color:#fff
    style F fill:#6bcb77,color:#fff
```

## 6.7 深度分析：渠道质量评估

**问题**：不同渠道的内容质量如何？

**思路**：按渠道分组，同时计算多个指标——视频数、平均点赞、完播率、平均时长。

```python
@app.get("/api/channel_quality_analysis")
async def channel_quality_analysis():
    df = get_data()
    
    # 使用agg一次性计算多个指标
    channel_stats = df.groupby('channel').agg({
        'item_id': 'count',       # 视频数
        'like': 'mean',           # 平均点赞
        'finish': 'mean',         # 完播率
        'duration_time': 'mean'   # 平均时长
    }).reset_index()
    
    channels = channel_stats['channel'].tolist()
    counts = channel_stats['item_id'].tolist()
    avg_likes = channel_stats['like'].tolist()
    finish_rates = channel_stats['finish'].tolist()
    avg_durations = channel_stats['duration_time'].tolist()
    
    return success_response({
        "channels": channels,
        "counts": [int(c) for c in counts],
        "avg_likes": [round(float(l), 4) for l in avg_likes],
        "finish_rates": [round(float(f), 4) for f in finish_rates],
        "avg_durations": [round(float(d), 2) for d in avg_durations]
    })
```

**agg的威力**：一次分组，多个指标，避免重复遍历数据。

## 6.8 所有API接口总览

| 接口 | Pandas核心操作 | 返回数据 |
|------|---------------|---------|
| `/api/overview` | len, nunique, sum, mean | 4个KPI数值 |
| `/api/likes_by_date` | groupby+sum | 日期-点赞数对 |
| `/api/user_city_distribution` | groupby+size+head | Top10城市 |
| `/api/item_city_distribution` | groupby+size+head | Top10视频城市 |
| `/api/channel_distribution` | groupby+size | 渠道占比 |
| `/api/duration_distribution` | pd.cut+groupby | 时长区间分布 |
| `/api/hourly_distribution` | groupby+size | 24小时分布 |
| `/api/music_popularity` | groupby+size+head | Top20音乐 |
| `/api/music_engagement` | groupby+agg | 音乐使用+点赞 |
| `/api/author_productivity` | groupby+nunique+head | Top20作者 |
| `/api/author_influence` | groupby+agg | 作者多维指标 |
| `/api/minute_trend` | pd.cut+groupby | 144个时段 |
| `/api/weekday_pattern` | groupby+size | 周一至周日 |
| `/api/active_users` | groupby+size+head | Top50用户 |
| `/api/user_completion_behavior` | groupby+agg | 用户完播行为 |
| `/api/city_music_association` | groupby+nlargest | 城市-音乐关联 |
| `/api/channel_quality_analysis` | groupby+agg | 渠道多维质量 |
| `/api/city_analysis_deep` | groupby+agg | 城市深度分析 |
| `/api/channel_quality_deep` | groupby+agg | 渠道深度分析 |

---

# 第7章 前端基础——HTML与CSS

## 7.1 HTML文档结构

HTML是网页的骨架。我们的`index.html`结构如下：

```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>
    
    <!-- CSS文件引入 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <!-- 页面内容 -->
    <div class="app-container">
        <header class="nav-bar">...</header>
        <div class="page-container">
            <section id="overview-section">...</section>
            <section id="user-analysis-section">...</section>
        </div>
    </div>
    
    <!-- JavaScript文件引入 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/lib/echarts-config.js"></script>
</body>
</html>
```

**关键理解**：
- `<head>`：不显示在页面上，定义元信息和引入资源
- `<body>`：页面可见内容
- `<section>`：每个页面是一个section，通过CSS控制显示/隐藏
- `<script>`：JS文件按依赖顺序加载（jQuery → ECharts → 工具库 → 图表组件）

## 7.2 CSS选择器与属性

CSS选择器决定"给谁加样式"，属性决定"加什么样式"：

```css
/* 选择器：.kpi-card 选中class为kpi-card的元素 */
.kpi-card {
    /* 属性：背景色 */
    background: var(--bg-card);
    /* 属性：圆角 */
    border-radius: var(--card-radius);
    /* 属性：内边距 */
    padding: 16px 20px;
}
```

## 7.3 CSS变量：主题系统的基础

CSS变量（也叫CSS自定义属性）是整个样式系统的基石。定义一次，到处使用：

```css
:root {
    --primary: #00d4ff;        /* 主色调：青蓝色 */
    --bg-primary: #0a0e27;     /* 主背景：深蓝黑 */
    --bg-card: #161b3d;        /* 卡片背景：稍浅的深蓝 */
    --text-primary: #ffffff;   /* 主文字：白色 */
    --text-muted: rgba(255, 255, 255, 0.45); /* 次要文字：半透明白 */
    --card-radius: 8px;        /* 卡片圆角 */
    --header-height: 56px;     /* 导航栏高度 */
}
```

**为什么用CSS变量？**
1. **一处修改，全局生效**：把`--primary`从`#00d4ff`改成`#ff6b6b`，所有用到主色调的地方都会变
2. **语义化**：`var(--primary)`比`#00d4ff`更容易理解
3. **可计算**：可以在JavaScript中动态修改CSS变量

## 7.4 Flexbox布局

Flexbox是一维布局（一行或一列），适合导航栏、卡片内部布局：

```css
.nav-bar {
    display: flex;                    /* 启用Flex布局 */
    align-items: center;             /* 垂直居中 */
    justify-content: space-between;  /* 水平两端对齐 */
    gap: 16px;                       /* 子元素间距 */
}
```

**Flex布局的三要素**：

```mermaid
graph LR
    A[display: flex] --> B[主轴方向排列]
    B --> C[justify-content: 主轴对齐]
    B --> D[align-items: 交叉轴对齐]
    
    style A fill:#00d4ff,color:#000
```

## 7.5 CSS Grid布局

Grid是二维布局（行和列），适合整个页面的网格划分：

```css
.page-overview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;  /* 4列等宽 */
    grid-template-rows: auto 1fr 1fr;         /* 3行 */
    grid-template-areas:
        "kpi1   kpi2    kpi3    kpi4"
        "trend  trend   music   author"
        "channel city    hourly  weekday";
    gap: 12px;    /* 网格间距 */
    padding: 12px;
}
```

**Grid Area命名**：每个区域取一个名字，然后在HTML元素上用`grid-area: kpi1`指定它属于哪个区域。

## 7.6 CSS动画

CSS动画让页面更生动。本项目定义了5个动画：

```css
/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 脉冲动画（状态指示灯） */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 旋转动画（加载圈） */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
```

**动画使用**：
```css
.status-dot {
    animation: pulse 2s infinite;  /* 脉冲动画，2秒循环，无限次 */
}

.loading-spinner {
    animation: spin 0.8s linear infinite;  /* 旋转动画，0.8秒一圈 */
}
```

---

# 第8章 CSS组件化设计

## 8.1 什么是组件化思维

**组件化**就是把页面拆分成独立、可复用的小块。就像乐高积木：

```mermaid
graph TD
    A[完整页面] --> B[导航栏组件]
    A --> C[KPI卡片组件]
    A --> D[图表卡片组件]
    A --> E[加载动画组件]
    
    D --> D1[卡片头部]
    D --> D2[卡片主体]
    D2 --> D3[图表实例]
    D2 --> D4[加载遮罩]
    
    style A fill:#4d96ff,color:#fff
    style B fill:#00d4ff,color:#000
    style C fill:#ffd93d,color:#333
    style D fill:#6bcb77,color:#000
    style E fill:#ff6b6b,color:#fff
```

**组件化的好处**：
1. **复用**：同一个组件可以在不同页面使用
2. **独立**：修改一个组件不影响其他组件
3. **清晰**：每个组件职责明确

## 8.2 CSS分层架构

本项目的CSS分为4层，从底层到顶层：

```mermaid
graph BT
    L1["第1层：base.css<br/>CSS变量 + 全局重置 + 动画"] 
    L2["第2层：layout.css<br/>Grid布局 + Flex布局 + 卡片容器"]
    L3["第3层：components/<br/>nav.css + loading.css"]
    L4["第4层：pages/<br/>overview.css + user-analysis.css + ..."]
    
    L4 --> L3 --> L2 --> L1
    
    style L1 fill:#0a0e27,color:#00d4ff
    style L2 fill:#111638,color:#fff
    style L3 fill:#161b3d,color:#fff
    style L4 fill:#1c2350,color:#fff
```

**加载顺序**：底层先加载，上层后加载，上层可以覆盖下层的样式。

## 8.3 第1层：base.css——主题与重置

### CSS变量定义

```css
:root {
    /* 颜色系统 */
    --primary: #00d4ff;           /* 主色：科技蓝 */
    --accent-1: #ff6b6b;         /* 辅色1：红色（警告/点赞） */
    --accent-2: #ffd93d;         /* 辅色2：黄色（高亮） */
    --accent-3: #6bcb77;         /* 辅色3：绿色（成功/完播） */
    --accent-4: #4d96ff;         /* 辅色4：蓝色（信息） */
    
    /* 背景系统（三层递进） */
    --bg-primary: #0a0e27;       /* 最深：页面背景 */
    --bg-secondary: #111638;     /* 中间：导航栏背景 */
    --bg-card: #161b3d;          /* 最浅：卡片背景 */
    
    /* 文字系统（三级层次） */
    --text-primary: #ffffff;                    /* 主要文字 */
    --text-secondary: rgba(255, 255, 255, 0.75); /* 次要文字 */
    --text-muted: rgba(255, 255, 255, 0.45);     /* 辅助文字 */
    
    /* 尺寸系统 */
    --header-height: 56px;       /* 导航栏高度 */
    --card-radius: 8px;          /* 卡片圆角 */
    --card-padding: 16px;        /* 卡片内边距 */
}
```

**设计原则**：暗色大屏的背景三层递进（最深→中间→最浅），文字三级层次（最亮→较亮→最暗），形成视觉纵深。

### 全局重置

```css
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;      /* 关键：消除滚动条 */
    font-family: var(--font-family);
    background: var(--bg-primary);
}

::-webkit-scrollbar {
    display: none;         /* 隐藏滚动条 */
}
```

**为什么overflow: hidden？** 数据大屏要求全屏展示，不能出现滚动条。所有内容必须在一屏内排列完成。

## 8.4 第2层：layout.css——页面骨架

### 应用容器

```css
.app-container {
    width: 100vw;          /* 视口宽度 */
    height: 100vh;         /* 视口高度 */
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 纵向排列：导航栏 + 页面区 */
}
```

**布局结构**：

```mermaid
graph TD
    subgraph app-container["app-container (100vw × 100vh)"]
        NAV["nav-bar (56px固定高度)"]
        PAGE["page-container (剩余空间)"]
    end
    
    style NAV fill:#111638,color:#fff
    style PAGE fill:#0a0e27,color:#fff
```

### 页面切换

```css
.page-section {
    position: absolute;    /* 绝对定位，所有页面叠在一起 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;           /* 默认透明 */
    visibility: hidden;   /* 默认不可见 */
    transition: opacity 0.3s ease;  /* 渐变切换 */
}

.page-section.active {
    opacity: 1;           /* 激活页面可见 */
    visibility: visible;
}
```

**切换原理**：所有页面用`position: absolute`叠在同一位置，通过`opacity`和`visibility`控制哪个页面可见。切换时添加/移除`active`类。

### Grid页面布局

每个页面用CSS Grid划分区域：

```css
/* 概览页：4列3行 */
.page-overview {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    grid-template-areas:
        "kpi1   kpi2    kpi3    kpi4"
        "trend  trend   music   author"
        "channel city    hourly  weekday";
}

/* 用户分析页：3列3行 */
.page-user-analysis {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "active    completion  heatmap"
        "active    channel     radar"
        "timepat   channel     radar";
}

/* 内容质量页：3列3行 */
.page-content-quality {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "wordcloud  engagement  influence"
        "wordcloud  channel-q   duration"
        "wordcloud  like-dist   finish-dist";
}

/* 时空分析页：2列2行 */
.page-spatiotemporal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "map     sankey"
        "minute  heatmap";
}
```

**Grid Area映射**：每个HTML元素通过`grid-area`属性指定位置：

```css
.grid-kpi1 { grid-area: kpi1; }
.grid-trend { grid-area: trend; }
.grid-map { grid-area: map; }
```

## 8.5 第3层：组件样式

### 导航栏组件（nav.css）

```css
.nav-bar {
    height: var(--header-height);     /* 固定56px */
    display: flex;
    align-items: center;
    justify-content: space-between;   /* 三段式布局 */
    padding: 0 24px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #0d1233 100%);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    flex-shrink: 0;                   /* 不被压缩 */
}
```

**导航栏三段式布局**：

```mermaid
graph LR
    subgraph nav-bar
        LEFT["左侧：Logo + 标题"]
        CENTER["中间：导航菜单"]
        RIGHT["右侧：时钟 + 状态"]
    end
    
    style LEFT fill:#00d4ff,color:#000
    style CENTER fill:#ffd93d,color:#333
    style RIGHT fill:#6bcb77,color:#000
```

导航项的激活状态：

```css
.nav-bar-item {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: var(--text-muted);         /* 默认灰色 */
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.nav-bar-item:hover {
    color: var(--text-secondary);     /* 悬浮变亮 */
    background: rgba(0, 212, 255, 0.03);
}

.nav-bar-item.active {
    color: var(--primary);            /* 激活变蓝 */
    border-bottom-color: var(--primary); /* 底部蓝色线 */
}
```

### 加载动画组件（loading.css）

提供4种加载样式：

```mermaid
graph TD
    A[LoadingManager] --> B[spinner 旋转环]
    A --> C[dots 脉冲点]
    A --> D[bar 进度条]
    A --> E[skeleton 骨架屏]
    
    style A fill:#00d4ff,color:#000
```

加载遮罩层的设计：

```css
.loading-overlay {
    position: absolute;     /* 覆盖在图表上方 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 39, 0.85);  /* 半透明深色遮罩 */
    z-index: 50;
    transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;   /* 隐藏时不拦截点击 */
}
```

### 图表卡片组件（layout.css）

```css
.chart-card {
    background: var(--bg-card);
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;  /* 纵向：标题 + 图表 */
    overflow: hidden;
    min-height: 0;           /* Grid子元素关键属性 */
}

.chart-card-header {
    flex-shrink: 0;          /* 标题不压缩 */
    margin-bottom: 8px;
}

.chart-card-body {
    flex: 1;                 /* 图表区域占满剩余空间 */
    min-height: 0;           /* 允许缩小 */
    position: relative;      /* 为加载遮罩提供定位基准 */
}
```

**为什么需要min-height: 0？** 在CSS Grid中，子元素默认`min-height: auto`，内容可能撑开容器导致溢出。设置`min-height: 0`允许子元素缩小到0，配合`flex: 1`实现图表区域自适应。

### KPI卡片组件（layout.css）

```css
.kpi-card {
    background: var(--bg-card);
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* 垂直居中 */
}

.kpi-value {
    font-size: 36px;          /* 超大数字 */
    font-weight: 700;
    font-family: 'Courier New', monospace;  /* 等宽字体 */
}

.kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
```

**KPI卡片与图表卡片的区别**：KPI卡片只显示数字，不需要图表区域，所以用`justify-content: center`垂直居中。

## 8.6 第4层：页面样式

每个页面有独立的CSS文件，定义该页面特有的样式。由于大部分样式已经在前三层定义，页面级CSS通常很少，主要是微调。

## 8.7 CSS组件化总结

```mermaid
flowchart TD
    A[页面需求] --> B{需要什么组件?}
    B --> C[导航栏]
    B --> D[KPI卡片]
    B --> E[图表卡片]
    B --> F[加载动画]
    
    C --> G[使用nav.css]
    D --> H[使用layout.css中的kpi-card]
    E --> I[使用layout.css中的chart-card]
    F --> J[使用loading.css]
    
    G --> K[组合到页面]
    H --> K
    I --> K
    J --> K
    
    style K fill:#6bcb77,color:#000
```

**核心原则**：先定义变量和基础样式，再定义布局和组件，最后组合页面。每一层只关注自己的职责，不越界。

---

# 第9章 JavaScript组件化架构

## 9.1 从过程式到面向对象

**过程式写法**（不推荐）：
```javascript
// 所有代码堆在一起，难以维护
let chart1 = echarts.init(document.getElementById('chart1'));
$.ajax({ url: '/api/data1', success: function(data) { chart1.setOption({...}); } });

let chart2 = echarts.init(document.getElementById('chart2'));
$.ajax({ url: '/api/data2', success: function(data) { chart2.setOption({...}); } });
```

**面向对象写法**（本项目的做法）：
```javascript
class DurationDistributionChart {
    constructor() { /* 初始化 */ }
    _loadData() { /* 加载数据 */ }
    _renderChart(data) { /* 渲染图表 */ }
    destroy() { /* 销毁图表 */ }
}
```

**面向对象的好处**：
1. **封装**：每个图表的DOM引用、ECharts实例、加载管理器都封装在类内部
2. **隔离**：修改一个图表不影响其他图表
3. **生命周期**：通过`constructor`和`destroy`管理资源的创建和释放

## 9.2 单例模式：全局管理器

**什么是单例模式？** 确保一个类只有一个实例，全局共享。

**为什么需要？** 页面导航管理器、尺寸管理器这些全局功能，只需要一个实例。如果创建多个，会导致事件重复绑定、状态不一致。

**单例模式的实现**：

```javascript
class PageNavigation {
    static getInstance() {
        if (!PageNavigation._instance) {
            PageNavigation._instance = new PageNavigation();
        }
        return PageNavigation._instance;
    }
    
    constructor() {
        if (PageNavigation._instance) {
            return PageNavigation._instance;
        }
        // 初始化代码...
        PageNavigation._instance = this;
    }
}
```

**使用方式**：
```javascript
const nav = PageNavigation.getInstance();  // 第一次调用：创建实例
const nav2 = PageNavigation.getInstance(); // 第二次调用：返回同一个实例
console.log(nav === nav2);  // true
```

## 9.3 PageNavigation：页面导航管理器

PageNavigation是整个SPA的核心，管理4个页面的切换和生命周期。

### 核心数据结构

```javascript
class PageNavigation {
    constructor() {
        this.currentPage = null;      // 当前激活的页面ID
        this.history = [];            // 导航历史
        this.pages = new Map();       // 所有页面配置
        this._callbacks = [];         // 页面切换回调
    }
}
```

### 页面注册

```javascript
nav.register('overview-section', {
    name: '概览仪表盘',
    onActivate: () => OverviewPage.init(),    // 激活时初始化图表
    onDeactivate: () => OverviewPage.destroy() // 失活时销毁图表
});
```

### 页面切换流程

```mermaid
sequenceDiagram
    participant User as 用户
    participant Nav as PageNavigation
    participant Old as 当前页面
    participant New as 目标页面
    participant Resize as ResizeManager

    User->>Nav: 点击导航项
    Nav->>Old: 调用 onDeactivate()
    Old->>Old: 销毁所有图表
    Nav->>Old: 移除 active 类
    Nav->>New: 添加 active 类
    Nav->>New: 调用 onActivate()
    New->>New: 创建所有图表
    Nav->>Resize: 触发 refreshAll()
    Nav->>Nav: 触发全局回调
```

### 切换核心代码

```javascript
navigateTo(pageId) {
    // 1. 验证目标页面
    const targetPage = this.pages.get(pageId);
    if (!targetPage || this.currentPage === pageId) return;
    
    // 2. 失活当前页面
    const currentPage = this.pages.get(this.currentPage);
    if (currentPage?.onDeactivate) {
        currentPage.onDeactivate();  // 销毁图表，释放资源
    }
    
    // 3. 隐藏所有页面
    this.pages.forEach((page) => {
        page.element.classList.remove('active');
    });
    
    // 4. 显示目标页面
    targetPage.element.classList.add('active');
    
    // 5. 激活目标页面
    if (targetPage.onActivate) {
        targetPage.onActivate();  // 创建图表，加载数据
    }
    
    // 6. 触发全局回调
    this._callbacks.forEach(cb => cb(this.currentPage, pageId));
    
    // 7. 延迟触发resize
    setTimeout(() => ResizeManager.getInstance().refreshAll(), 50);
}
```

## 9.4 ResizeManager：尺寸管理器

当浏览器窗口大小变化时，所有ECharts图表需要重新调整尺寸。

### 防抖策略

窗口resize事件在拖动时会高频触发（每秒几十次），如果每次都重绘所有图表，会导致严重卡顿。**防抖**就是等用户停止操作后再执行：

```mermaid
sequenceDiagram
    participant Window as 窗口resize事件
    participant Debounce as 防抖定时器
    participant Manager as ResizeManager

    Window->>Debounce: 触发（第1次）
    Note over Debounce: 启动150ms定时器
    Window->>Debounce: 触发（第2次，间隔50ms）
    Note over Debounce: 重置150ms定时器
    Window->>Debounce: 触发（第3次，间隔50ms）
    Note over Debounce: 重置150ms定时器
    Note over Debounce: 150ms内无新事件
    Debounce->>Manager: 执行resize
    Manager->>Manager: 遍历所有图表，逐个resize()
```

### 核心代码

```javascript
class ResizeManager {
    static getInstance() { /* 单例模式 */ }
    
    register(key, chartInstance) {
        this.charts.set(key, chartInstance);  // 注册图表
    }
    
    unregister(key) {
        this.charts.delete(key);  // 取消注册
    }
    
    _debouncedResize() {
        if (this._debounceTimer) clearTimeout(this._debounceTimer);
        this._debounceTimer = setTimeout(() => {
            this._handleResize();
        }, 150);  // 150ms防抖
    }
    
    _handleResize() {
        this.charts.forEach((chart, key) => {
            if (chart && !chart.isDisposed()) {
                chart.resize();  // 调用ECharts的resize方法
            } else {
                this.charts.delete(key);  // 清理已销毁的图表
            }
        });
    }
}
```

## 9.5 LoadingManager：加载管理器

每个图表在数据加载期间需要显示加载动画，数据到达后隐藏。

### 加载管理器的生命周期

```mermaid
stateDiagram-v2
    [*] --> 创建: new LoadingManager()
    创建 --> 显示: show()
    显示 --> 隐藏: hide()
    隐藏 --> 显示: show()
    隐藏 --> 销毁: destroy()
    显示 --> 销毁: destroy()
    销毁 --> [*]
```

### 核心代码

```javascript
class LoadingManager {
    constructor(containerSelector, options = {}) {
        this.container = document.querySelector(containerSelector);
        this.options = { type: 'spinner', text: '数据加载中...', useEcharts: true, ...options };
        this.echartsInstance = null;
        this._createOverlay();  // 创建DOM遮罩层
    }
    
    _createOverlay() {
        this.overlay = document.createElement('div');
        this.overlay.className = 'loading-overlay hidden';
        this.overlay.innerHTML = this._getLoaderHTML();
        this.container.appendChild(this.overlay);
    }
    
    setEChartsInstance(instance) {
        this.echartsInstance = instance;
    }
    
    show(customText) {
        this.overlay.classList.remove('hidden');
        if (this.options.useEcharts && this.echartsInstance) {
            this.echartsInstance.showLoading();
        }
    }
    
    hide() {
        this.overlay.classList.add('hidden');
        if (this.options.useEcharts && this.echartsInstance) {
            this.echartsInstance.hideLoading();
        }
    }
    
    destroy() {
        this.overlay.parentNode.removeChild(this.overlay);
        this.container = null;
        this.overlay = null;
        this.echartsInstance = null;
    }
}
```

## 9.6 ECharts配置：主题与工具函数

`echarts-config.js`定义了全局主题和6个工具函数，避免每个图表重复写配置。

### 主题配置

```javascript
const ECHARTS_THEME = {
    backgroundColor: 'transparent',  // 透明背景，使用CSS背景
    color: ['#00d4ff', '#ff6b6b', '#ffd93d', '#6bcb77', ...],  // 色板
    title: { textStyle: { color: '#ffffff', fontSize: 14 } },
    tooltip: { backgroundColor: 'rgba(10, 14, 39, 0.9)', ... },
    xAxis: { axisLabel: { color: 'rgba(255, 255, 255, 0.45)' } },
    yAxis: { axisLabel: { color: 'rgba(255, 255, 255, 0.45)' } }
};
```

### 6个工具函数

| 函数 | 用途 | 返回 |
|------|------|------|
| `initChart(dom)` | 初始化ECharts实例 | ECharts实例 |
| `disposeChart(chart)` | 销毁ECharts实例 | void |
| `getBarChartOption(options)` | 生成柱状图配置 | 配置对象 |
| `getLineChartOption(options)` | 生成折线图配置 | 配置对象 |
| `getPieChartOption(options)` | 生成饼图配置 | 配置对象 |
| `getRadarChartOption(options)` | 生成雷达图配置 | 配置对象 |

**工具函数的好处**：所有图表共享相同的主题和基础配置，只需传入数据即可。

```mermaid
graph TD
    A[getBarChartOption] --> B[ECHARTS_THEME]
    A --> C[自定义title/xData/yData]
    A --> D[返回完整配置]
    
    E[getLineChartOption] --> B
    E --> F[自定义title/xData/yData/smooth]
    E --> D
    
    style B fill:#00d4ff,color:#000
    style D fill:#6bcb77,color:#000
```

## 9.7 页面入口：对象字面量模式

每个页面有一个`main.js`作为入口，使用**对象字面量**模式协调所有图表：

```javascript
const OverviewPage = {
    charts: {},  // 存储所有图表实例
    
    init() {
        this.charts.kpi = new KPICards();
        this.charts.timeTrend = new TimeTrendChart();
        this.charts.musicPopularity = new MusicPopularityChart();
        // ...更多图表
    },
    
    destroy() {
        Object.values(this.charts).forEach(chart => {
            if (chart && typeof chart.destroy === 'function') {
                chart.destroy();
            }
        });
        this.charts = {};
    }
};
```

**为什么用对象字面量而不是类？** 页面入口不需要多实例，对象字面量更简洁。图表组件用类是因为每个图表有独立的状态和生命周期。

### JS文件加载顺序

```mermaid
flowchart TD
    A[jquery.min.js] --> B[echarts.min.js]
    B --> C[lib/loading-manager.js]
    B --> D[lib/echarts-config.js]
    B --> E[lib/resize-manager.js]
    C --> F[lib/page-navigation.js]
    D --> F
    E --> F
    
    F --> G[overview/chart-kpi.js]
    F --> H[overview/chart-time-trend.js]
    F --> I[...更多图表组件]
    
    G --> J[overview/main.js]
    H --> J
    I --> J
    
    J --> K[index.html中的初始化脚本]
    
    style A fill:#ff6b6b,color:#fff
    style B fill:#ffd93d,color:#333
    style F fill:#00d4ff,color:#000
    style K fill:#6bcb77,color:#000
```

**加载顺序原则**：被依赖的先加载。jQuery和ECharts是最底层，工具库依赖它们，图表组件依赖工具库，页面入口依赖图表组件。

---

# 第10章 图表组件开发

## 10.1 图表组件的统一生命周期

所有图表组件遵循统一的生命周期模式：

```mermaid
stateDiagram-v2
    [*] --> 构造: new ChartComponent()
    构造 --> 获取DOM: document.getElementById()
    获取DOM --> 创建LoadingManager: new LoadingManager()
    创建LoadingManager --> 初始化ECharts: initChart()
    初始化ECharts --> 注册ResizeManager: register()
    注册ResizeManager --> 显示加载: loadingManager.show()
    显示加载 --> 加载数据: _loadData()
    加载数据 --> 渲染图表: _renderChart()
    渲染图表 --> 隐藏加载: loadingManager.hide()
    隐藏加载 --> 活跃状态: 图表可交互
    
    活跃状态 --> 销毁: destroy()
    销毁 --> 销毁LoadingManager: loadingManager.destroy()
    销毁 --> 取消注册ResizeManager: unregister()
    销毁 --> 销毁ECharts: disposeChart()
    销毁 --> [*]
```

### 统一模板代码

每个图表组件都遵循这个模板：

```javascript
class XxxChart {
    constructor() {
        // 步骤1：获取DOM容器
        this.dom = document.getElementById('chart-xxx');
        if (!this.dom) return;  // 容器不存在则退出
        
        // 步骤2：创建加载管理器
        this.loadingManager = new LoadingManager(this.dom, {
            type: 'spinner',
            text: '数据加载中...',
            useEcharts: true
        });
        
        // 步骤3：初始化ECharts实例
        this.chart = initChart(this.dom);
        if (!this.chart) return;
        
        // 步骤4：关联加载管理器和ECharts实例
        this.loadingManager.setEChartsInstance(this.chart);
        
        // 步骤5：注册到尺寸管理器
        ResizeManager.getInstance().register('xxx', this.chart);
        
        // 步骤6：显示加载动画
        this.loadingManager.show();
        
        // 步骤7：开始加载数据
        this._loadData();
    }
    
    _loadData() {
        $.ajax({
            url: '/api/xxx',
            method: 'GET',
            dataType: 'json',
            success: (response) => {
                if (response && response.code === 200 && response.data) {
                    this._renderChart(response.data);
                }
                this.loadingManager.hide();
            },
            error: (xhr, status, error) => {
                console.error('[XxxChart] 请求失败:', error);
                this.loadingManager.hide();
            }
        });
    }
    
    _renderChart(data) {
        // 使用工具函数生成配置，然后自定义
        const option = getBarChartOption({...});
        this.chart.setOption(option, true);
    }
    
    destroy() {
        if (this.loadingManager) {
            this.loadingManager.destroy();
            this.loadingManager = null;
        }
        if (this.chart) {
            ResizeManager.getInstance().unregister('xxx');
            disposeChart(this.chart);
            this.chart = null;
        }
    }
}
```

## 10.2 柱状图：时长分布

**数据分析**：视频按时长分为5个区间（0-5s, 5-10s, 10-15s, 15-20s, 20s+），统计每个区间的视频数量。

**数据交互流程**：

```mermaid
sequenceDiagram
    participant Chart as DurationDistributionChart
    participant API as /api/duration_distribution
    participant Backend as FastAPI后端
    participant CSV as douyin_dataset.csv

    Chart->>Chart: constructor() 初始化
    Chart->>Chart: loadingManager.show()
    Chart->>API: AJAX GET请求
    API->>Backend: 路由处理
    Backend->>CSV: pd.read_csv()
    CSV-->>Backend: DataFrame
    Backend->>Backend: pd.cut() 分桶 + groupby()
    Backend-->>API: JSON响应
    API-->>Chart: {code:200, data:{ranges, counts}}
    Chart->>Chart: _renderChart(data)
    Chart->>Chart: chart.setOption(barOption)
    Chart->>Chart: loadingManager.hide()
```

**渲染代码**：

```javascript
_renderChart(data) {
    const ranges = data.ranges || [];
    const counts = data.counts || [];

    // 格式化时长范围显示
    const labels = ranges.map(r => {
        if (typeof r === 'string') return r;
        return `${r.start || 0}-${r.end || '∞'}s`;
    });

    // 使用工具函数生成柱状图配置
    const option = getBarChartOption({
        title: '视频时长分布',
        xData: labels,
        yData: counts,
        yName: '视频数'
    });

    // 自定义渐变色：从青绿到绿色
    option.series[0].itemStyle.color = {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,    // 从上到下的线性渐变
        colorStops: [
            { offset: 0, color: '#4db6ac' },   // 顶部：青绿色
            { offset: 1, color: '#6bcb77' }    // 底部：绿色
        ]
    };

    this.chart.setOption(option, true);
}
```

**代码逐行解析**：

1. `data.ranges` 和 `data.counts`：从API响应中解构出时长区间和对应的视频数量
2. `ranges.map(r => ...)`：将区间对象格式化为可读的标签，如"0-5s"
3. `getBarChartOption({...})`：调用工具函数生成基础柱状图配置，传入标题、X轴数据、Y轴数据、Y轴名称
4. `option.series[0].itemStyle.color`：覆盖默认颜色，设置从上到下的线性渐变
5. `this.chart.setOption(option, true)`：第二个参数`true`表示不合并之前的配置，完全替换

**完整的数据→渲染流程图**：

```mermaid
flowchart TD
    A["API返回数据<br/>{ranges: [...], counts: [...]}"] --> B["解构数据<br/>ranges, counts"]
    B --> C["格式化标签<br/>ranges → labels"]
    C --> D["生成基础配置<br/>getBarChartOption()"]
    D --> E["自定义渐变色<br/>itemStyle.color"]
    E --> F["应用配置<br/>chart.setOption()"]
    F --> G["图表渲染完成"]
    
    style A fill:#ff6b6b,color:#fff
    style G fill:#6bcb77,color:#fff
```

## 10.3 折线图：每日点赞趋势

**数据分析**：统计每天的点赞总数，观察点赞量的时间变化趋势。

**数据交互流程**：

```mermaid
sequenceDiagram
    participant Chart as TimeTrendChart
    participant API as /api/likes_by_date
    participant Backend as FastAPI后端
    participant CSV as douyin_dataset.csv

    Chart->>Chart: constructor() 初始化
    Chart->>Chart: loadingManager.show()
    Chart->>API: AJAX GET请求
    API->>Backend: 路由处理
    Backend->>CSV: pd.read_csv()
    CSV-->>Backend: DataFrame
    Backend->>Backend: pd.to_datetime() + groupby('date')['like'].sum()
    Backend-->>API: JSON响应
    API-->>Chart: {code:200, data:{dates, likes}}
    Chart->>Chart: _renderChart(data)
    Chart->>Chart: getLineChartOption() + 自定义颜色
    Chart->>Chart: chart.setOption()
    Chart->>Chart: loadingManager.hide()
```

**渲染代码**：

```javascript
_renderChart(data) {
    // 解构数据
    const { dates, likes } = data;

    // 使用工具函数生成折线图配置
    const option = getLineChartOption({
        title: '每日点赞趋势',
        xData: dates || [],
        yData: likes || [],
        xName: '日期',
        yName: '点赞数',
        smooth: true,       // 平滑曲线
        areaStyle: true     // 显示面积填充
    });

    this.chart.setOption(option, true);
}
```

**与柱状图的关键区别**：
- 使用 `getLineChartOption` 而非 `getBarChartOption`
- `smooth: true` 让曲线更平滑
- `areaStyle: true` 在曲线下方填充半透明渐变色，增强视觉效果
- 折线图的X轴使用 `boundaryGap: false`（从坐标轴起点开始），柱状图使用 `boundaryGap: true`（柱子居中在刻度上）

## 10.4 饼图：渠道分布

**数据分析**：统计各渠道的视频数量占比，使用南丁格尔玫瑰图增强视觉层次。

**数据交互流程**：

```mermaid
sequenceDiagram
    participant Chart as ChannelDistributionChart
    participant API as /api/channel_distribution
    participant Backend as FastAPI后端

    Chart->>Chart: constructor() 初始化
    Chart->>Chart: loadingManager.show()
    Chart->>API: AJAX GET请求
    API->>Backend: groupby('channel').size()
    Backend-->>API: JSON响应
    API-->>Chart: {code:200, data:{channels, counts}}
    Chart->>Chart: 数据转换：channels+counts → [{name, value}]
    Chart->>Chart: getPieChartOption(roseType: true)
    Chart->>Chart: chart.setOption()
    Chart->>Chart: loadingManager.hide()
```

**渲染代码**：

```javascript
_renderChart(data) {
    const channels = data.channels || [];
    const counts = data.counts || [];

    // 关键：将两个数组转换为饼图所需的 [{name, value}] 格式
    const pieData = channels.map((name, index) => ({
        name: name,
        value: counts[index] || 0
    }));

    const option = getPieChartOption({
        title: '渠道分布',
        data: pieData,
        roseType: true    // 启用南丁格尔玫瑰图
    });

    this.chart.setOption(option, true);
}
```

**数据格式转换**是饼图的关键步骤。API返回的是两个平行数组：
```json
{"channels": ["渠道1", "渠道2"], "counts": [5000, 3000]}
```
ECharts饼图需要的是：
```json
[{"name": "渠道1", "value": 5000}, {"name": "渠道2", "value": 3000}]
```

**南丁格尔玫瑰图**与普通饼图的区别：扇区半径按数据大小变化，数值越大扇区越长，视觉对比更强烈。

## 10.5 KPI卡片：数字指标展示

**数据分析**：展示4个核心KPI——用户数、视频数、点赞数、完播率。

**KPI卡片与图表的区别**：KPI卡片不需要ECharts，直接操作DOM显示数字。

**数据交互流程**：

```mermaid
sequenceDiagram
    participant KPI as KPICards
    participant API as /api/overview
    participant Backend as FastAPI后端

    KPI->>KPI: constructor() 初始化
    KPI->>KPI: 定义4个KPI配置（selector + formatter）
    KPI->>KPI: loadingManager.show()
    KPI->>API: AJAX GET请求
    API->>Backend: len + nunique + sum + mean
    Backend-->>API: JSON响应
    API-->>KPI: {code:200, data:{total_users, total_videos, total_likes, avg_finish_rate}}
    KPI->>KPI: 遍历kpiConfigs，逐个渲染
    KPI->>KPI: 格式化数值（千位分隔符/百分比）
    KPI->>KPI: jQuery .text() 写入DOM
    KPI->>KPI: loadingManager.hide()
```

**核心代码**：

```javascript
constructor() {
    // KPI配置列表：定义每个KPI的DOM映射和格式化方式
    this.kpiConfigs = [
        {
            key: 'total_users',
            selector: '#kpi-total-users .kpi-value',
            formatter: (val) => this._formatNumber(val)  // 千位分隔符
        },
        {
            key: 'total_likes',
            selector: '#kpi-total-likes .kpi-value',
            formatter: (val) => this._formatNumber(val)
        },
        {
            key: 'avg_finish_rate',
            selector: '#kpi-avg-finish .kpi-value',
            formatter: (val) => (parseFloat(val) * 100).toFixed(1) + '%'  // 百分比
        }
    ];
    // ...
}

_renderKPIs(data) {
    this.kpiConfigs.forEach(config => {
        const $el = $(config.selector);     // jQuery选择DOM
        if ($el.length > 0) {
            const rawValue = data[config.key];
            const formattedValue = config.formatter(rawValue);  // 格式化
            $el.text(formattedValue);       // 写入DOM
        }
    });
}
```

**设计亮点**：使用配置数组而非硬编码，新增KPI只需往数组里加一项。

## 10.6 横向柱状图：音乐排行

**数据分析**：统计使用次数最多的音乐，横向柱状图更适合展示长标签。

**渲染代码**：

```javascript
_renderChart(data) {
    const top10 = (data.music_ids || []).slice(0, 10);
    const counts = (data.counts || []).slice(0, 10);

    // 截断过长的ID显示
    const labels = top10.map(id => id.length > 8 ? id.substring(0, 8) + '...' : id);

    const option = getBarChartOption({
        title: '热门音乐排行 (Top10)',
        xData: labels,
        yData: counts,
        yName: '使用次数'
    });

    // 关键：交换X/Y轴，实现横向柱状图
    option.xAxis.type = 'value';           // X轴变为数值轴
    option.yAxis.type = 'category';        // Y轴变为类目轴
    option.yAxis.data = labels;            // 标签放在Y轴
    option.xAxis.data = undefined;         // 清除X轴的类目数据
    option.grid.left = 60;                 // 左侧留更多空间给标签

    this.chart.setOption(option, true);
}
```

**纵向→横向的转换原理**：

```mermaid
graph LR
    subgraph 纵向柱状图
        X1["X轴: category（标签）"]
        Y1["Y轴: value（数值）"]
    end
    
    subgraph 横向柱状图
        X2["X轴: value（数值）"]
        Y2["Y轴: category（标签）"]
    end
    
    X1 -->|交换| X2
    Y1 -->|交换| Y2
```

## 10.7 带标记的折线图：小时趋势

**数据分析**：24小时发布趋势，需要标注峰值和谷值。

**渲染代码**：

```javascript
_renderChart(data) {
    const hours = (data.hours || []).map(h => h + ':00');  // 格式化为"20:00"
    const counts = data.counts || [];

    const option = getLineChartOption({
        title: '小时级发布趋势',
        xData: hours,
        yData: counts,
        smooth: true,
        areaStyle: true
    });

    // 自定义线条颜色为黄色
    option.series[0].lineStyle.color = '#ffd93d';
    option.series[0].itemStyle.color = '#ffd93d';

    // 添加标记点：最大值和最小值
    option.series[0].markPoint = {
        data: [
            { type: 'max', name: '峰值' },
            { type: 'min', name: '谷值' }
        ],
        symbolSize: 36,
        label: { fontSize: 9, color: '#fff' }
    };

    this.chart.setOption(option, true);
}
```

**markPoint的原理**：ECharts自动计算数据中的最大值和最小值，在对应位置绘制标记点，无需手动查找。

## 10.8 条件着色柱状图：一周模式

**数据分析**：对比工作日和周末的发布量，用不同颜色区分。

**渲染代码**：

```javascript
_renderChart(data) {
    const { days, counts } = data;
    const dayMap = {
        'Monday': '周一', 'Tuesday': '周二', 'Wednesday': '周三',
        'Thursday': '周四', 'Friday': '周五', 'Saturday': '周六', 'Sunday': '周日'
    };
    const labels = (days || []).map(d => dayMap[d] || d);

    // 根据是否为周末设置不同颜色
    const colors = labels.map(d => {
        return (d === '周六' || d === '周日') ? '#ffd93d' : '#00d4ff';
    });

    const option = getBarChartOption({
        title: '一周发布模式',
        xData: labels,
        yData: counts || [],
        yName: '发布数'
    });

    // 使用函数动态设置每个柱子的颜色
    option.series[0].itemStyle = {
        color: function (params) {
            return colors[params.dataIndex];
        },
        borderRadius: [2, 2, 0, 0]
    };

    // 添加平均线
    const avg = counts.reduce((a, b) => a + b, 0) / counts.length;
    option.series[0].markLine = {
        silent: true,
        data: [{ yAxis: avg, name: '平均值' }],
        lineStyle: { color: 'rgba(255, 107, 107, 0.6)', type: 'dashed' },
        label: { formatter: '平均: {c}', color: 'rgba(255, 107, 107, 0.8)' }
    };

    this.chart.setOption(option, true);
}
```

**条件着色原理**：

```mermaid
flowchart TD
    A["labels = ['周一','周二',...,'周日']"] --> B["遍历每个标签"]
    B --> C{"是周六或周日?"}
    C -->|是| D["颜色 = #ffd93d（黄色）"]
    C -->|否| E["颜色 = #00d4ff（蓝色）"]
    D --> F["colors数组"]
    E --> F
    F --> G["itemStyle.color = function(params)"]
    G --> H["根据dataIndex返回对应颜色"]
```

## 10.9 多API组合图表：时空热力图

**数据分析**：展示城市与时间的交叉分布，需要同时请求两个API的数据。

**数据交互流程**：

```mermaid
sequenceDiagram
    participant Chart as TimeCityHeatmapChart
    participant API1 as /api/hourly_distribution
    participant API2 as /api/city_analysis_deep

    Chart->>Chart: constructor() 初始化
    Chart->>Chart: loadingManager.show()
    
    par 并行请求两个API
        Chart->>API1: AJAX GET请求
        Chart->>API2: AJAX GET请求
    end
    
    API1-->>Chart: 小时分布数据
    API2-->>Chart: 城市分析数据
    
    Chart->>Chart: $.when() 等待两个请求都完成
    Chart->>Chart: 合并数据，构建热力图矩阵
    Chart->>Chart: chart.setOption()
    Chart->>Chart: loadingManager.hide()
```

**核心代码**：

```javascript
_loadData() {
    // 同时发起两个AJAX请求
    const hourlyPromise = $.ajax({
        url: '/api/hourly_distribution',
        method: 'GET',
        dataType: 'json'
    });
    const cityPromise = $.ajax({
        url: '/api/city_analysis_deep',
        method: 'GET',
        dataType: 'json'
    });

    // 使用$.when()等待两个请求都完成
    $.when(hourlyPromise, cityPromise)
        .done((hourlyRes, cityRes) => {
            const hourlyData = hourlyRes[0]?.data;
            const cityData = cityRes[0]?.data;
            this._renderChart(hourlyData, cityData);
            this.loadingManager.hide();
        })
        .fail((error) => {
            console.error('[TimeCityHeatmapChart] 请求失败:', error);
            this.loadingManager.hide();
        });
}
```

**$.when()的作用**：当多个异步请求都完成后再执行回调，类似于`Promise.all()`。

## 10.10 图表组件开发总结

所有图表组件遵循统一模式，但有3个维度的变化：

```mermaid
graph TD
    A[图表组件统一模式] --> B[图表类型变化]
    A --> C[数据格式变化]
    A --> D[配置定制变化]
    
    B --> B1[柱状图: getBarChartOption]
    B --> B2[折线图: getLineChartOption]
    B --> B3[饼图: getPieChartOption]
    B --> B4[雷达图: getRadarChartOption]
    
    C --> C1[单API: 一个$.ajax]
    C --> C2[多API: $.when()组合]
    C --> C3[无API: KPI直接操作DOM]
    
    D --> D1[渐变色: itemStyle.color]
    D --> D2[标记点: markPoint]
    D --> D3[标记线: markLine]
    D --> D4[条件着色: color函数]
    D --> D5[横向: 交换X/Y轴]
    
    style A fill:#00d4ff,color:#000
```

**开发新图表的步骤**：
1. 确定图表类型 → 选择对应的工具函数
2. 确定数据来源 → 单API还是多API
3. 编写constructor → 获取DOM、创建LoadingManager、初始化ECharts、注册ResizeManager
4. 编写_loadData → AJAX请求，处理响应
5. 编写_renderChart → 调用工具函数 + 自定义配置
6. 编写destroy → 销毁LoadingManager、取消注册ResizeManager、销毁ECharts

---

# 第11章 页面组装与集成

## 11.1 从单个图表到完整页面

前面我们学会了开发单个图表组件，现在要把多个图表组装成一个完整的页面。这就像把一个个零件组装成一台机器。

**组装的核心问题**：
- 多个图表如何协调初始化？
- 页面切换时如何管理图表的生命周期？
- HTML中如何为每个图表预留位置？

## 11.2 HTML页面结构设计

每个页面是一个`<section>`元素，内部用CSS Grid划分区域：

```html
<!-- 概览页面 -->
<section id="overview-section" class="page-section page-overview">
    <!-- 第1行：4个KPI卡片 -->
    <div id="kpi-total-users" class="kpi-card grid-kpi1">
        <div class="kpi-value">--</div>
        <div class="kpi-label">累计用户数</div>
    </div>
    <div id="kpi-total-videos" class="kpi-card grid-kpi2">
        <div class="kpi-value">--</div>
        <div class="kpi-label">累计视频数</div>
    </div>
    <div id="kpi-total-likes" class="kpi-card grid-kpi3">
        <div class="kpi-value">--</div>
        <div class="kpi-label">累计点赞数</div>
    </div>
    <div id="kpi-avg-finish" class="kpi-card grid-kpi4">
        <div class="kpi-value">--</div>
        <div class="kpi-label">平均完播率</div>
    </div>

    <!-- 第2行：趋势图 + 音乐排行 + 作者排行 -->
    <div class="chart-card grid-trend">
        <div class="chart-card-body" id="chart-time-trend"></div>
    </div>
    <div class="chart-card grid-music">
        <div class="chart-card-body" id="chart-music-popularity"></div>
    </div>
    <div class="chart-card grid-author">
        <div class="chart-card-body" id="chart-author-productivity"></div>
    </div>

    <!-- 第3行：渠道 + 城市 + 小时 + 周模式 -->
    <div class="chart-card grid-channel">
        <div class="chart-card-body" id="chart-channel-distribution"></div>
    </div>
    <div class="chart-card grid-city">
        <div class="chart-card-body" id="chart-city-distribution"></div>
    </div>
    <div class="chart-card grid-hourly">
        <div class="chart-card-body" id="chart-hourly-trend"></div>
    </div>
    <div class="chart-card grid-weekday">
        <div class="chart-card-body" id="chart-weekday-pattern"></div>
    </div>
</section>
```

**HTML结构与CSS Grid的映射**：

```mermaid
graph TD
    subgraph "CSS Grid布局"
        R1C1["kpi1"] --- R1C2["kpi2"] --- R1C3["kpi3"] --- R1C4["kpi4"]
        R2C1["trend (跨2列)"] --- R2C1 --- R2C3["music"] --- R2C4["author"]
        R3C1["channel"] --- R3C2["city"] --- R3C3["hourly"] --- R3C4["weekday"]
    end
    
    subgraph "HTML元素"
        H1["div.grid-kpi1"] --> R1C1
        H2["div.grid-trend"] --> R2C1
        H3["div.grid-music"] --> R2C3
    end
```

**关键理解**：HTML中的`grid-kpi1`、`grid-trend`等类名，对应CSS中的`grid-area: kpi1`、`grid-area: trend`，实现了布局与内容的分离。

## 11.3 页面入口模块：OverviewPage

每个页面有一个`main.js`作为入口，使用对象字面量模式：

```javascript
const OverviewPage = {
    charts: {},  // 存储所有图表实例的引用

    init() {
        // 并行创建所有图表实例
        // 每个图表的constructor会自动发起AJAX请求
        this.charts.kpi = new KPICards();
        this.charts.timeTrend = new TimeTrendChart();
        this.charts.musicPopularity = new MusicPopularityChart();
        this.charts.authorProductivity = new AuthorProductivityChart();
        this.charts.channelDistribution = new ChannelDistributionChart();
        this.charts.cityDistribution = new CityDistributionChart();
        this.charts.hourlyTrend = new HourlyTrendChart();
        this.charts.weekdayPattern = new WeekdayPatternChart();
    },

    destroy() {
        // 遍历所有图表实例，逐个销毁
        Object.values(this.charts).forEach(chart => {
            if (chart && typeof chart.destroy === 'function') {
                chart.destroy();
            }
        });
        this.charts = {};  // 清空引用
    }
};
```

**为什么用对象字面量而不是类？**

| 对比项 | 对象字面量 | 类 |
|--------|-----------|-----|
| 实例数量 | 只需要一个 | 可以创建多个 |
| 代码量 | 更少 | 更多（需要constructor） |
| 适用场景 | 页面入口（全局唯一） | 图表组件（每页多个） |

**init()的执行流程**：

```mermaid
sequenceDiagram
    participant Nav as PageNavigation
    participant Page as OverviewPage
    participant KPI as KPICards
    participant Trend as TimeTrendChart
    participant Music as MusicPopularityChart

    Nav->>Page: onActivate() → init()
    Page->>KPI: new KPICards()
    KPI->>KPI: constructor → _loadData → AJAX
    Page->>Trend: new TimeTrendChart()
    Trend->>Trend: constructor → _loadData → AJAX
    Page->>Music: new MusicPopularityChart()
    Music->>Music: constructor → _loadData → AJAX
    
    Note over KPI,Music: 所有AJAX请求并行发出
    
    KPI-->>KPI: 数据返回 → _renderKPIs
    Trend-->>Trend: 数据返回 → _renderChart
    Music-->>Music: 数据返回 → _renderChart
```

**关键**：所有图表的AJAX请求是并行的，不会互相阻塞。哪个API先返回，哪个图表先渲染。

## 11.4 四个页面的完整组装

### 概览页（8个图表）

```javascript
// overview/main.js
const OverviewPage = {
    charts: {},
    init() {
        this.charts.kpi = new KPICards();
        this.charts.timeTrend = new TimeTrendChart();
        this.charts.musicPopularity = new MusicPopularityChart();
        this.charts.authorProductivity = new AuthorProductivityChart();
        this.charts.channelDistribution = new ChannelDistributionChart();
        this.charts.cityDistribution = new CityDistributionChart();
        this.charts.hourlyTrend = new HourlyTrendChart();
        this.charts.weekdayPattern = new WeekdayPatternChart();
    },
    destroy() {
        Object.values(this.charts).forEach(c => c?.destroy?.());
        this.charts = {};
    }
};
```

### 用户分析页（6个图表）

```javascript
// user-analysis/main.js
const UserAnalysisPage = {
    charts: {},
    init() {
        this.charts.activeUsers = new ActiveUsersChart();
        this.charts.completionBehavior = new CompletionBehaviorChart();
        this.charts.cityHeatmap = new CityHeatmapChart();
        this.charts.userTimePattern = new UserTimePatternChart();
        this.charts.userChannel = new UserChannelChart();
        this.charts.userRadar = new UserRadarChart();
    },
    destroy() {
        Object.values(this.charts).forEach(c => c?.destroy?.());
        this.charts = {};
    }
};
```

### 内容质量页（7个图表）

```javascript
// content-quality/main.js
const ContentQualityPage = {
    charts: {},
    init() {
        this.charts.musicWordcloud = new MusicWordcloudChart();
        this.charts.musicEngagement = new MusicEngagementChart();
        this.charts.authorInfluence = new AuthorInfluenceChart();
        this.charts.channelQuality = new ChannelQualityChart();
        this.charts.durationDistribution = new DurationDistributionChart();
        this.charts.likeDistribution = new LikeDistributionChart();
        this.charts.finishDistribution = new FinishDistributionChart();
    },
    destroy() {
        Object.values(this.charts).forEach(c => c?.destroy?.());
        this.charts = {};
    }
};
```

### 时空分布页（5个图表）

```javascript
// spatiotemporal/main.js
const SpatiotemporalPage = {
    charts: {},
    init() {
        this.charts.cityMap = new CityMapChart();
        this.charts.cityMusicSankey = new CityMusicSankeyChart();
        this.charts.minuteTrend = new MinuteTrendChart();
        this.charts.weekdayComparison = new WeekdayComparisonChart();
        this.charts.timeCityHeatmap = new TimeCityHeatmapChart();
    },
    destroy() {
        Object.values(this.charts).forEach(c => c?.destroy?.());
        this.charts = {};
    }
};
```

## 11.5 页面注册到导航系统

在`index.html`底部的初始化脚本中，将4个页面注册到PageNavigation：

```html
<script>
$(document).ready(function() {
    const nav = PageNavigation.getInstance();

    // 注册4个页面，配置激活/失活回调
    nav.register('overview-section', {
        name: '概览仪表盘',
        onActivate: () => OverviewPage.init(),
        onDeactivate: () => OverviewPage.destroy()
    });

    nav.register('user-analysis-section', {
        name: '用户分析',
        onActivate: () => UserAnalysisPage.init(),
        onDeactivate: () => UserAnalysisPage.destroy()
    });

    nav.register('content-quality-section', {
        name: '内容质量',
        onActivate: () => ContentQualityPage.init(),
        onDeactivate: () => ContentQualityPage.destroy()
    });

    nav.register('spatiotemporal-section', {
        name: '时空分布',
        onActivate: () => SpatiotemporalPage.init(),
        onDeactivate: () => SpatiotemporalPage.destroy()
    });

    // 默认激活概览页
    nav.navigateTo('overview-section', false);
});
</script>
```

**注册流程**：

```mermaid
sequenceDiagram
    participant HTML as index.html
    participant Nav as PageNavigation
    participant Page as 页面模块

    HTML->>Nav: PageNavigation.getInstance()
    HTML->>Nav: register('overview-section', {onActivate, onDeactivate})
    HTML->>Nav: register('user-analysis-section', {...})
    HTML->>Nav: register('content-quality-section', {...})
    HTML->>Nav: register('spatiotemporal-section', {...})
    HTML->>Nav: navigateTo('overview-section', false)
    Nav->>Page: OverviewPage.init()
    Note over Page: 创建8个图表，发起8个AJAX请求
```

## 11.6 导航栏点击事件绑定

导航栏的HTML结构：

```html
<header class="nav-bar">
    <div class="nav-bar-left">
        <span class="nav-bar-logo">📊</span>
        <span class="nav-bar-title">抖音数据分析大屏</span>
    </div>
    <nav class="nav-bar-center">
        <a class="nav-bar-item active" data-page="overview-section">概览仪表盘</a>
        <a class="nav-bar-item" data-page="user-analysis-section">用户分析</a>
        <a class="nav-bar-item" data-page="content-quality-section">内容质量</a>
        <a class="nav-bar-item" data-page="spatiotemporal-section">时空分布</a>
    </nav>
    <div class="nav-bar-right">
        <span class="status-dot"></span>
        <span id="clock"></span>
    </div>
</header>
```

**data-page属性**：每个导航项通过`data-page`属性关联到对应的页面section ID。

点击事件绑定：

```javascript
// 在PageNavigation构造函数中绑定
document.querySelectorAll('.nav-bar-item').forEach(item => {
    item.addEventListener('click', () => {
        const pageId = item.dataset.page;  // 读取data-page属性
        this.navigateTo(pageId);
    });
});
```

**导航切换完整流程**：

```mermaid
flowchart TD
    A[用户点击导航项] --> B[读取data-page属性]
    B --> C["PageNavigation.navigateTo(pageId)"]
    C --> D["当前页面.onDeactivate()"]
    D --> E["销毁当前页所有图表"]
    E --> F["移除所有页面active类"]
    F --> G["目标页面添加active类"]
    G --> H["目标页面.onActivate()"]
    H --> I["创建目标页所有图表"]
    I --> J["各图表并行发起AJAX"]
    J --> K["数据返回后渲染图表"]
    K --> L["延迟50ms触发ResizeManager.refreshAll()"]
    
    style A fill:#4d96ff,color:#fff
    style K fill:#6bcb77,color:#fff
```

## 11.7 JS文件加载顺序

在`index.html`中，所有JS文件按依赖顺序加载：

```html
<!-- 第1层：基础库 -->
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>

<!-- 第2层：工具库（依赖jQuery和ECharts） -->
<script src="js/lib/echarts-config.js"></script>
<script src="js/lib/loading-manager.js"></script>
<script src="js/lib/resize-manager.js"></script>
<script src="js/lib/page-navigation.js"></script>

<!-- 第3层：概览页图表组件 -->
<script src="js/overview/chart-kpi.js"></script>
<script src="js/overview/chart-time-trend.js"></script>
<script src="js/overview/chart-music-popularity.js"></script>
<script src="js/overview/chart-author-productivity.js"></script>
<script src="js/overview/chart-channel-distribution.js"></script>
<script src="js/overview/chart-city-distribution.js"></script>
<script src="js/overview/chart-hourly-trend.js"></script>
<script src="js/overview/chart-weekday-pattern.js"></script>
<script src="js/overview/main.js"></script>

<!-- 第3层：用户分析页图表组件 -->
<script src="js/user-analysis/chart-active-users.js"></script>
<!-- ... 更多图表 ... -->
<script src="js/user-analysis/main.js"></script>

<!-- 第3层：内容质量页图表组件 -->
<!-- ... -->
<!-- 第3层：时空分布页图表组件 -->
<!-- ... -->

<!-- 第4层：初始化脚本（依赖所有上述模块） -->
<script>
$(document).ready(function() {
    // 注册页面、默认导航
});
</script>
```

**加载顺序的依赖关系**：

```mermaid
flowchart TD
    subgraph 第1层["第1层：基础库"]
        jQuery[jquery.min.js]
        ECharts[echarts.min.js]
    end
    
    subgraph 第2层["第2层：工具库"]
        EC[echarts-config.js]
        LM[loading-manager.js]
        RM[resize-manager.js]
        PN[page-navigation.js]
    end
    
    subgraph 第3层["第3层：图表组件"]
        CK[chart-kpi.js]
        CT[chart-time-trend.js]
        CM[chart-music-popularity.js]
        OM[overview/main.js]
        UA[...user-analysis/...]
        CQ[...content-quality/...]
        ST[...spatiotemporal/...]
    end
    
    subgraph 第4层["第4层：初始化"]
        INIT["$(document).ready()"]
    end
    
    jQuery --> EC
    jQuery --> LM
    ECharts --> EC
    ECharts --> RM
    LM --> PN
    EC --> CK
    EC --> CT
    CK --> OM
    CT --> OM
    OM --> INIT
    
    style jQuery fill:#ff6b6b,color:#fff
    style ECharts fill:#ff6b6b,color:#fff
    style INIT fill:#6bcb77,color:#fff
```

## 11.8 完整集成流程

从用户打开浏览器到看到完整大屏的全过程：

```mermaid
sequenceDiagram
    participant User as 用户
    participant Browser as 浏览器
    participant Server as FastAPI服务器
    participant CSV as CSV文件

    User->>Browser: 输入 http://localhost:8080
    Browser->>Server: GET /
    Server-->>Browser: 302重定向到 /static/index.html
    Browser->>Server: GET /static/index.html
    Server-->>Browser: HTML文件
    
    par 并行加载资源
        Browser->>Server: GET /static/css/base.css
        Browser->>Server: GET /static/css/layout.css
        Browser->>Server: GET /static/js/jquery.min.js
        Browser->>Server: GET /static/js/echarts.min.js
    end
    
    Server-->>Browser: CSS和JS文件
    
    Note over Browser: 按顺序执行JS文件
    
    Browser->>Browser: PageNavigation初始化
    Browser->>Browser: 注册4个页面
    Browser->>Browser: navigateTo('overview-section')
    Browser->>Browser: OverviewPage.init()
    
    par 8个AJAX请求并行
        Browser->>Server: GET /api/overview
        Browser->>Server: GET /api/likes_by_date
        Browser->>Server: GET /api/music_popularity
        Browser->>Server: GET /api/author_productivity
        Browser->>Server: GET /api/channel_distribution
        Browser->>Server: GET /api/user_city_distribution
        Browser->>Server: GET /api/hourly_distribution
        Browser->>Server: GET /api/weekday_pattern
    end
    
    Server->>CSV: 每个请求读取CSV
    CSV-->>Server: DataFrame
    Server->>Server: Pandas聚合计算
    Server-->>Browser: 返回8组JSON数据
    
    Browser->>Browser: ECharts渲染8个图表
    Browser-->>User: 完整大屏展示
```

---

# 第12章 部署与运维

## 12.1 从开发到生产

开发环境和生产环境的区别：

| 对比项 | 开发环境 | 生产环境 |
|--------|---------|---------|
| 运行方式 | 手动uvicorn命令 | systemd服务自动管理 |
| 进程管理 | 前台运行，关闭终端即停止 | 后台守护，崩溃自动重启 |
| 日志 | 控制台输出 | journalctl系统日志 |
| 端口 | 8080 | 8080 |
| 工作目录 | 项目源码目录 | /opt/douyin-analytics |

## 12.2 安装脚本详解

`install.sh`是一键部署脚本，需要root权限执行：

```bash
#!/bin/bash

# 1. 创建安装目录
mkdir -p /opt/douyin-analytics

# 2. 复制项目文件
cp -r src/ /opt/douyin-analytics/
cp -r data/ /opt/douyin-analytics/
cp -r static/ /opt/douyin-analytics/

# 3. 创建Python虚拟环境
cd /opt/douyin-analytics
python3 -m venv .venv

# 4. 安装依赖
source .venv/bin/activate
pip install -r requirements.txt

# 5. 设置文件权限
chown -R www-data:www-data /opt/douyin-analytics

# 6. 安装systemd服务
cp douyin-analytics.service /etc/systemd/system/
systemctl daemon-reload
systemctl enable douyin-analytics
systemctl start douyin-analytics
```

**安装流程**：

```mermaid
flowchart TD
    A[执行 install.sh] --> B[创建 /opt/douyin-analytics]
    B --> C[复制项目文件]
    C --> D[创建Python虚拟环境]
    D --> E[pip安装依赖]
    E --> F[设置www-data权限]
    F --> G[安装systemd服务]
    G --> H[启用并启动服务]
    H --> I[部署完成]
    
    style A fill:#4d96ff,color:#fff
    style I fill:#6bcb77,color:#fff
```

## 12.3 systemd服务配置

`douyin-analytics.service`定义了服务运行参数：

```ini
[Unit]
Description=抖音数据分析大屏
After=network.target

[Service]
Type=simple
User=www-data
Group=www-data
WorkingDirectory=/opt/douyin-analytics
ExecStart=/opt/douyin-analytics/.venv/bin/uvicorn src.main:app --host 0.0.0.0 --port 8080 --workers 4
Restart=always
RestartSec=5

[Install]
WantedBy=multi-user.target
```

**关键配置解析**：

| 配置项 | 值 | 含义 |
|--------|-----|------|
| `User` | www-data | 以低权限用户运行，安全 |
| `WorkingDirectory` | /opt/douyin-analytics | 工作目录，影响相对路径 |
| `ExecStart` | uvicorn命令 | 启动命令，使用虚拟环境中的uvicorn |
| `--workers 4` | 4个工作进程 | 充分利用多核CPU |
| `Restart=always` | 总是重启 | 进程崩溃后自动重启 |
| `RestartSec=5` | 5秒后重启 | 避免频繁重启 |

## 12.4 服务管理

### 使用systemctl

```bash
# 启动服务
sudo systemctl start douyin-analytics

# 停止服务
sudo systemctl stop douyin-analytics

# 重启服务
sudo systemctl restart douyin-analytics

# 查看状态
sudo systemctl status douyin-analytics

# 查看日志
sudo journalctl -u douyin-analytics -f
```

### 使用manage.sh

```bash
sudo ./manage.sh start    # 启动
sudo ./manage.sh stop     # 停止
sudo ./manage.sh restart  # 重启
sudo ./manage.sh status   # 状态
sudo ./manage.sh log      # 查看日志
sudo ./manage.sh install  # 安装/更新Python依赖
```

## 12.5 验证部署

部署完成后，通过以下步骤验证：

```mermaid
flowchart TD
    A[部署完成] --> B[访问 http://host:8080/health]
    B --> C{返回 ok?}
    C -->|否| D[检查服务状态<br/>systemctl status]
    D --> E[检查日志<br/>journalctl -u]
    E --> F[修复问题后重启]
    C -->|是| G[访问 http://host:8080]
    G --> H{页面正常?}
    H -->|否| I[检查浏览器Console错误]
    I --> J[检查Network面板API请求]
    H -->|是| K[切换4个页面]
    K --> L{所有图表正常?}
    L -->|否| M[检查对应API返回数据]
    L -->|是| N[✅ 部署成功]
    
    style N fill:#6bcb77,color:#fff
```

## 12.6 常见问题排查

| 问题 | 可能原因 | 排查方法 |
|------|---------|---------|
| 页面无法访问 | 服务未启动 | `systemctl status douyin-analytics` |
| API返回500 | CSV文件路径错误 | 检查`/opt/douyin-analytics/data/`下是否有CSV |
| 图表不显示 | JS加载失败 | 浏览器Console查看错误 |
| 图表显示空白 | API数据格式错误 | Network面板查看API响应 |
| 页面切换卡顿 | 图表未销毁 | Console查看是否有内存泄漏警告 |
| 窗口缩放图表不适应 | ResizeManager未注册 | 检查图表组件是否调用了`register()` |

## 12.7 性能优化建议

1. **数据缓存**：CSV每次请求都重新读取，可使用`functools.lru_cache`缓存DataFrame
2. **日期解析优化**：`pd.to_datetime`始终指定`format`参数
3. **前端资源压缩**：生产环境可压缩CSS和JS文件
4. **CDN加速**：jQuery和ECharts可从CDN加载
5. **Nginx反向代理**：生产环境建议在uvicorn前加Nginx，处理静态文件和负载均衡

---

# 附录A：全项目知识图谱

```mermaid
graph TB
    subgraph 后端
        Python[Python语言] --> FastAPI[FastAPI框架]
        FastAPI --> Route[路由装饰器]
        FastAPI --> CORS[CORS中间件]
        FastAPI --> Static[静态文件挂载]
        Python --> Pandas[Pandas库]
        Pandas --> ReadCSV[read_csv]
        Pandas --> GroupBy[groupby]
        Pandas --> Agg[agg聚合]
        Pandas --> Cut[pd.cut分桶]
    end
    
    subgraph 前端基础
        HTML[HTML结构] --> Section[section页面]
        HTML --> Div[div容器]
        CSS[CSS样式] --> Variables[CSS变量]
        CSS --> Grid[CSS Grid]
        CSS --> Flex[Flexbox]
        CSS --> Animation[动画]
        JS[JavaScript] --> Class[类语法]
        JS --> Ajax[AJAX请求]
        JS --> Singleton[单例模式]
    end
    
    subgraph 前端组件
        Class --> Chart[图表组件类]
        Chart --> Constructor[constructor]
        Chart --> LoadData[_loadData]
        Chart --> Render[_renderChart]
        Chart --> Destroy[destroy]
        Singleton --> PageNav[PageNavigation]
        Singleton --> ResizeMgr[ResizeManager]
        Loading[LoadingManager] --> Show[show]
        Loading --> Hide[hide]
        EChartsConfig[echarts-config] --> InitChart[initChart]
        EChartsConfig --> BarOption[getBarChartOption]
        EChartsConfig --> LineOption[getLineChartOption]
        EChartsConfig --> PieOption[getPieChartOption]
    end
    
    subgraph 图表类型
        BarOption --> BarChart[柱状图]
        LineOption --> LineChart[折线图]
        PieOption --> PieChart[饼图]
        EChartsConfig --> RadarOption[getRadarChartOption]
        RadarOption --> RadarChart[雷达图]
    end
    
    subgraph 部署
        Linux[Linux系统] --> Systemd[systemd服务]
        Systemd --> Service[.service文件]
        Bash[Bash脚本] --> Install[install.sh]
        Bash --> Manage[manage.sh]
    end
    
    Route --> Ajax
    GroupBy --> LoadData
    Agg --> LoadData
    Grid --> Section
    Variables --> CSS
    Constructor --> Loading
    LoadData --> Ajax
    Render --> InitChart
    Destroy --> ResizeMgr
    
    style Python fill:#ff6b6b,color:#fff
    style CSS fill:#ffd93d,color:#333
    style JS fill:#4d96ff,color:#fff
    style EChartsConfig fill:#00d4ff,color:#000
```

# 附录B：零跳跃学习路线图

```mermaid
flowchart LR
    A["第1章<br/>为什么需要<br/>数据分析大屏"] --> B["第2章<br/>认识数据<br/>理解原材料"]
    B --> C["第3章<br/>系统架构<br/>从全局看项目"]
    C --> D["第4章<br/>技术选型<br/>为什么是这些工具"]
    D --> E["第5章<br/>后端基础<br/>搭建数据服务"]
    E --> F["第6章<br/>数据分析实战<br/>从数据到洞察"]
    F --> G["第7章<br/>前端基础<br/>HTML与CSS"]
    G --> H["第8章<br/>CSS组件化<br/>设计"]
    H --> I["第9章<br/>JS组件化<br/>架构"]
    I --> J["第10章<br/>图表组件<br/>开发"]
    J --> K["第11章<br/>页面组装<br/>与集成"]
    K --> L["第12章<br/>部署与<br/>运维"]
    
    style A fill:#ff6b6b,color:#fff
    style L fill:#6bcb77,color:#fff
```

**每章的前置知识依赖**：

| 章节 | 前置知识 | 来自哪章 |
|------|---------|---------|
| 第1章 | 无 | — |
| 第2章 | 知道什么是数据分析 | 第1章 |
| 第3章 | 理解数据字段 | 第2章 |
| 第4章 | 理解前后端分离 | 第3章 |
| 第5章 | 知道FastAPI是什么 | 第4章 |
| 第6章 | 会用FastAPI写路由 | 第5章 |
| 第7章 | 理解前后端如何通信 | 第3章 |
| 第8章 | 会写基础CSS | 第7章 |
| 第9章 | 理解CSS组件化 | 第8章 |
| 第10章 | 理解JS组件化架构 | 第9章 |
| 第11章 | 会开发图表组件 | 第10章 |
| 第12章 | 完成整个项目 | 第11章 |

---

> 🎉 **恭喜你完成了整个教程！** 从"什么是数据分析"到"部署一个完整的数据大屏"，你走过了零跳跃的学习路线，每一步都是上一步的自然延伸。