154-基于Flask的抖音短视频数据可视化分析系统

基于 Flask 的抖音短视频数据可视化分析系统 - 技术文档

1. 项目概述

1.1 项目背景

随着短视频行业的快速发展，抖音作为国内领先的短视频平台，每天产生海量的视频数据。如何对这些数据进行有效的采集、存储、分析和可视化展示，成为数据科学领域的重要课题。本系统基于 Flask 框架构建，采用 B/S 架构，实现了对抖音短视频数据的多维度分析与可视化展示。

1.2 系统功能

系统包含以下核心功能模块：

模块	功能说明
数据大屏	KPI 卡片、分类分布、月度趋势、城市分布、互动漏斗、仪表盘、热力图
视频内容分析	树状图、箱线图、桑基图、时长分布、互动雷达图
作者分析	Top 作者柱状图、气泡图、散点图、认证分布、雷达图
时间分析	每日趋势、24 小时分布、周度发布、互动趋势、日历热力图、累计面积图
地理分析	中国地图热力图、城市排名柱状图、城市气泡图
话题分析	话题词云、桑基图、话题关系网络图、话题柱状图
商业分析	商业类型分布、GMV 漏斗、转化率、商业趋势
对比分析	多视频搜索选择、雷达对比图、柱状对比图
趋势预测	线性回归预测未来 7 天趋势、R-squared 拟合度指标
作者画像	搜索作者、KPI 卡片、分类饼图、月度趋势、Top 视频
话题热度排行	Top20 横向柱状图、词云、详情表格
数据异常检测	IQR 算法检测、散点图标记、异常类型饼图、异常明细表
全屏数据大屏	暗色主题、实时刷新、KPI、月度趋势、城市饼图、漏斗、Top5、滚动播报
数据管理	分页表格、搜索筛选、排序、新增/编辑/删除/批量删除、导入/导出
用户中心	修改密码、更新资料

1.3 技术栈

层级	技术	版本
后端框架	Flask	3.0.x
ORM	Flask-SQLAlchemy	3.1.x
用户认证	Flask-Login	0.6.x
数据库	SQLite	内置
前端框架	Bootstrap	5.x
图标库	Bootstrap Icons	1.x
可视化	Apache ECharts	5.x
词云插件	echarts-wordcloud	2.x
Python	Python	3.8+

2. 系统架构

2.1 整体架构

系统采用经典的 MVC 架构模式：

Model（模型层）：models/ 目录，定义数据表结构和业务方法
View（视图层）：templates/ 目录，Jinja2 模板引擎渲染 HTML
Controller（控制层）：routes/ 目录，Flask Blueprint 路由处理请求

请求流程：

用户访问 URL
Flask 路由匹配 (@app.route)
@login_required 检查登录状态，未登录则重定向到 /login
渲染页面路由调用 render_template() 返回 HTML，或 API 路由通过 SQLAlchemy 查询后 jsonify() 返回 JSON
前端 fetch() 请求 API，ECharts 渲染图表

2.2 目录结构

3. 数据库设计

3.1 用户表 (user)

字段	类型	说明
id	Integer, PK	用户 ID
username	String(64), Unique	用户名
password_hash	String(256)	密码哈希值
email	String(120)	邮箱
role	String(16)	角色（admin / user）

3.2 视频表 (video)

字段	类型	索引	说明
id	Integer, PK	-	自增主键
video_id	String(64)	-	抖音视频唯一 ID
title	String(512)	-	视频标题
author	String(128)	-	作者昵称
uid	String(64)	-	作者 UID
douyin_id	String(64)	-	抖音号
likes	Integer	-	点赞数
comments	Integer	-	评论数
favorites	Integer	-	收藏数
shares	Integer	-	转发数
publish_date	String(32)	-	发布日期
duration	Float	-	视频时长（秒）
fans	Integer	-	作者粉丝数
author_likes	Integer	-	作者总获赞
certification	String(128)	-	认证信息
bio	String(512)	-	作者简介
music	String(256)	-	背景音乐
topics	String(512)	-	话题标签
category	String(256)	-	分类（完整路径）
category_l1	String(64)	Yes	一级分类
category_l2	String(64)	Yes	二级分类
category_l3	String(64)	-	三级分类
city	String(64)	Yes	城市
commerce_type	String(128)	-	小黄车类型
commerce_title	String(256)	-	小黄车标题
url	String(512)	-	视频分享链接
video_url	String(512)	-	视频播放地址
cover_url	String(512)	-	封面图地址
tags	String(512)	-	标签

3.3 分类拆分逻辑

category 字段格式为一级|二级|三级，通过 Video.split_category() 静态方法拆分为 (L1, L2, L3) 元组。

4. 功能模块详细设计

4.1 用户认证模块

路由文件：routes/auth.py

路由	方法	说明
/login	GET/POST	登录页面，验证用户名密码
/register	GET/POST	注册页面，创建新用户
/logout	GET	登出，清除会话

认证流程：

用户提交用户名和密码
User.query.filter_by(username=username).first() 查询用户
user.check_password(password) 验证密码哈希
login_user(user) 创建登录会话
更新 last_login 时间戳

4.2 数据大屏模块

路由文件：routes/dashboard.py

API 路由	说明
/api/kpi	返回视频总数、点赞/评论/转发/收藏总数
/api/category_dist	返回 Top15 一级分类分布
/api/monthly_trend	返回月度发布趋势（数量 + 平均点赞）
/api/duration_dist	返回视频时长分布（5 个区间）
/api/top_cities	返回 Top10 城市视频数
/api/funnel	返回互动漏斗数据
/api/gauge	返回平均点赞数
/api/heatmap	返回发布时间热力图数据

图表实现：使用 ECharts 5.x 渲染所有图表，全局主题 ECHARTS_THEME 统一配色风格，每个图表支持全屏切换。

4.3 视频内容分析模块

路由文件：routes/analysis_video.py

API 路由	说明
/api/treemap	分类树状图（一级到二级层级）
/api/top_l2	Top20 二级分类柱状图
/api/category_boxplot	分类点赞箱线图（Q1/中位数/Q3）
/api/category_duration	分类平均时长
/api/category_interaction	分类互动数据堆叠柱状图
/api/sankey	分类到子分类桑基图

4.4 作者分析模块

路由文件：routes/analysis_author.py

API 路由	说明
/api/top_authors	Top15 作者视频数柱状图
/api/author_bubble	粉丝数 vs 平均点赞气泡图
/api/author_scatter	粉丝数 vs 总获赞散点图
/api/author_radar	认证类型分布饼图

4.5 时间分析模块

路由文件：routes/analysis_time.py

API 路由	说明
/api/daily_trend	每日发布数量 + 平均点赞双轴图
/api/hourly	24 小时发布分布折线图
/api/weekday	周一到周日发布量柱状图
/api/interaction_trend	互动趋势多折线图
/api/calendar	日历热力图
/api/cumulative	累计视频数面积图

4.6 地理分析模块

路由文件：routes/analysis_geo.py

API 路由	说明
/api/city_map	中国地图热力图（省份维度）
/api/city_rank	城市排名柱状图
/api/city_scatter	城市气泡图（视频数 x 点赞数）

地图实现：加载 china.json 注册到 ECharts，使用 visualMap 组件实现热力映射。

4.7 话题分析模块

路由文件：routes/analysis_topic.py

API 路由	说明
/api/top_topics	Top20 话题柱状图
/api/topic_wordcloud	话题词云
/api/topic_sankey	话题到分类桑基图
/api/topic_graph	话题关系网络图（共现分析）

词云实现：使用 echarts-wordcloud 插件，字号按出现次数线性映射。

4.8 商业分析模块

路由文件：routes/analysis_commerce.py

API 路由	说明
/api/commerce_type	商业类型分布饼图
/api/commerce_gmv	商业互动漏斗（GMV 转化）
/api/commerce_trend	商业视频月度趋势
/api/commerce_convert	转化率指标

4.9 对比分析模块

路由文件：routes/data_ext.py

API 路由	说明
/api/compare/search?q=keyword	搜索视频（标题/作者模糊匹配）
/api/compare/detail?ids=1,2,3	获取多视频详情（最多 6 个）

前端实现：搜索结果以可点击卡片展示，点击添加到选择列表；选择列表以标签形式展示，支持点击移除；对比结果渲染为雷达图（5 维：点赞/评论/收藏/转发/粉丝）+ 柱状图。

4.10 趋势预测模块

路由文件：routes/data_ext.py

API 路由	说明
/api/predict/trend	线性回归预测 + 历史数据

预测算法：最小二乘法线性回归

y = slope * x + intercept
slope = Sum((xi-mx)*(yi-my)) / Sum((xi-mx)^2)
intercept = my - slope * mx
预测未来 7 天：predicted = $slope \* i + intercept for i in range(n, n+7)$

返回指标：

slope：斜率（正=上升趋势，负=下降趋势）
r2：R-squared 决定系数（越接近 1 拟合越好）
trend：趋势方向（rising / falling / stable）

4.11 数据异常检测模块

路由文件：routes/data_ext.py

API 路由	说明
/api/anomaly/detect	IQR 算法检测异常数据

检测算法：四分位距法（IQR）

Q1 = likes_list $n/4$ （第一四分位数）
Q3 = likes_list $3n/4$ （第三四分位数）
IQR = Q3 - Q1（四分位距）
upper = Q3 + 1.5 * IQR（上界）
lower = Q1 - 1.5 * IQR（下界）
点赞数 > upper 或 < lower 视为异常

可视化：散点图标记正常/异常数据，饼图展示异常类型分布，明细表格列出异常数据完整信息。

4.12 作者画像模块

路由文件：routes/data_ext.py

API 路由	说明
/api/author_profile/search?q=keyword	搜索作者（聚合统计）
/api/author_profile/detail?name=xxx	作者详情（KPI、分类、月度、Top 视频）

4.13 话题热度排行模块

路由文件：routes/data_ext.py

API 路由	说明
/api/topic_rank/list	Top20 话题排行

实现逻辑：遍历所有视频的 topics 字段，按 # 分割提取话题标签，聚合统计每个话题的视频数/总点赞/总评论，按视频数降序排列取 Top20。

4.14 全屏数据大屏

路由文件：routes/data_ext.py

API 路由	说明
/api/screen/realtime	大屏实时数据

设计特点：

独立页面，无侧边栏和导航栏
深蓝渐变背景 + 径向光晕效果
KPI 卡片带图标 + 顶部渐变线 + 悬浮动画
图表：面积折线图、玫瑰饼图、渐变漏斗、环形进度条、彩色柱状图
底部滚动播报条（ticker）
每 10 秒自动刷新数据
数字动画（从 0 递增到目标值）

4.15 数据管理模块

路由文件：routes/data_manage.py + routes/data_ext.py

API 路由	方法	说明
/api/data/list	GET	分页列表（支持搜索、排序）
/api/data/detail/	GET	单条详情
/api/data/add	POST	新增记录
/api/data/update/	POST	更新记录
/api/data/delete/	POST	删除记录
/api/data/batch_delete	POST	批量删除
/api/data/import	POST	CSV/Excel 批量导入
/api/data/export/csv	GET	导出 CSV
/api/data/export/excel	GET	导出 Excel
/api/video/detail/	GET	视频详情弹窗数据

导入功能：支持 CSV 和 Excel (.xlsx) 格式，自动匹配字段别名（如 likes/digg_count/点赞数），按 video_id 去重，自动拆分分类层级。

导出功能：CSV 带 BOM 的 UTF-8 编码（Excel 直接打开不乱码），Excel 红色表头 + 白色粗体 + 居中对齐。

5. 前端设计

5.1 布局结构

页面由三部分组成：左侧固定侧边栏（260px）、顶部导航栏（面包屑 + 用户信息）、右侧内容区（图表 + 表格 + 表单）。全屏大屏为独立页面，无侧边栏和导航栏。

5.2 样式系统

全局样式文件：static/css/style.css

CSS 变量：

--primary: #fe2c55（抖音红）

--primary-light: #ff6a81

--accent: #ff6a00（橙色强调）

--sidebar-width: 260px

--card-bg: #ffffff

--card-shadow: 0 2px 12px rgba(0,0,0,0.06)

组件样式：

.stat-card：KPI 统计卡片（4 种配色变体：红、橙、绿、青）
.chart-card：图表容器卡片
.data-table：数据表格
.sidebar：侧边栏导航
.animate-in：入场动画（淡入上移）

5.3 图表主题

全局 ECharts 主题 ECHARTS_THEME 定义了统一配色方案：

color: $#fe2c55, #ff6a00, #ffd200, #38ef7d, #6366f1, #ec4899$

所有图表共享此主题，确保视觉风格一致。

6. 部署与运行

6.1 环境要求

Python 3.8+
pip 包管理器

6.2 安装依赖

pip install Flask3.0.* Flask-SQLAlchemy3.1.* Flask-Login0.6.* Werkzeug3.0.*

6.3 启动应用

cd tiktok

python app.py

应用将在 http://127.0.0.1:5003 启动。

6.4 默认账号

首次运行时系统自动创建管理员账号：

用户名：admin
密码：admin123

6.5 数据库

使用 SQLite，数据库文件为 instance/tiktok.db
首次运行自动创建表结构（db.create_all()）
数据库路径可在 config.py 中修改

7. 项目统计

7.1 代码规模

类型	文件数	说明
Python 路由	11	各功能模块路由文件
Python 模型	2	User + Video
HTML 模板	18+	页面模板
JavaScript	10+	图表和交互逻辑
CSS	1	全局样式

7.2 图表统计

系统共包含 36+ 种可视化图表，涵盖：柱状图、折线图、饼图、散点图、气泡图、树状图、桑基图、雷达图、漏斗图、仪表盘、热力图、词云、地图、网络关系图、箱线图、面积图、玫瑰图、环形进度条等。

8. API 接口汇总

8.1 认证相关

接口	方法	说明
/login	GET/POST	登录
/register	GET/POST	注册
/logout	GET	登出

8.2 数据大屏

接口	方法	说明
/api/kpi	GET	KPI 指标
/api/category_dist	GET	分类分布
/api/monthly_trend	GET	月度趋势
/api/duration_dist	GET	时长分布
/api/top_cities	GET	城市排名
/api/funnel	GET	互动漏斗
/api/gauge	GET	仪表盘
/api/heatmap	GET	热力图

8.3 分析模块

接口	方法	说明
/api/treemap	GET	树状图
/api/top_l2	GET	二级分类排名
/api/category_boxplot	GET	箱线图
/api/category_duration	GET	分类时长
/api/category_interaction	GET	分类互动
/api/sankey	GET	桑基图
/api/top_authors	GET	Top 作者
/api/author_bubble	GET	作者气泡图
/api/author_scatter	GET	作者散点图
/api/author_radar	GET	作者雷达图
/api/daily_trend	GET	每日趋势
/api/hourly	GET	小时分布
/api/weekday	GET	周度分布
/api/interaction_trend	GET	互动趋势
/api/calendar	GET	日历热力图
/api/cumulative	GET	累计面积图
/api/city_map	GET	地图热力图
/api/city_rank	GET	城市排名
/api/city_scatter	GET	城市气泡图
/api/top_topics	GET	话题排名
/api/topic_wordcloud	GET	话题词云
/api/topic_sankey	GET	话题桑基图
/api/topic_graph	GET	话题关系图
/api/commerce_type	GET	商业类型
/api/commerce_gmv	GET	商业漏斗
/api/commerce_trend	GET	商业趋势
/api/commerce_convert	GET	转化率

8.4 扩展功能

接口	方法	说明
/api/data/import	POST	数据导入
/api/data/export/csv	GET	CSV 导出
/api/data/export/excel	GET	Excel 导出
/api/compare/search	GET	对比搜索
/api/compare/detail	GET	对比详情
/api/predict/trend	GET	趋势预测
/api/author_profile/search	GET	作者搜索
/api/author_profile/detail	GET	作者详情
/api/topic_rank/list	GET	话题排行
/api/anomaly/detect	GET	异常检测
/api/video/detail/	GET	视频详情
/api/screen/realtime	GET	大屏数据
/api/dashboard/stats	GET	统计数据

8.5 数据管理

接口	方法	说明
/api/data/list	GET	分页列表
/api/data/detail/	GET	详情
/api/data/add	POST	新增
/api/data/update/	POST	更新
/api/data/delete/	POST	删除
/api/data/batch_delete	POST	批量删除

8.6 用户中心

接口	方法	说明
/user/api/update_profile	POST	更新资料
/user/api/change_password	POST	修改密码