112-基于Flask的游戏行业销售数据可视化分析系统

基于 Flask 的游戏行业销售数据可视化分析系统技术文档

1. 文档说明

1.1 文档目的

本文档用于对"基于 Flask 的游戏行业销售数据可视化分析系统"进行完整的技术说明，覆盖以下内容：

项目建设目标
技术选型与架构设计
功能模块设计
数据库设计
核心代码结构说明
数据处理与分析流程
可视化图表设计
权限与安全控制
部署、初始化、运行方式
后续可扩展方向

本文档适用于以下场景：

课程设计或毕业设计答辩材料准备
项目交付说明
后续维护与二次开发
开发团队内部技术交接

1.2 项目名称

基于 Flask 的游戏行业销售数据可视化分析系统

1.3 项目定位

本项目是一个面向游戏销售数据分析场景的 Web 系统。系统以 data/vgsales.csv 为原始数据源，通过 MySQL 建立统一数据底座，再由 Flask 提供后台业务逻辑和页面渲染能力，前端使用 ECharts 实现多维度、多类型数据可视化。

项目既包含数据分析展示能力，也包含完整的后台管理能力，适合作为一个具备"数据管理 + 权限控制 + 可视化分析 + 大屏展示"的综合型课程设计项目。

1.4 技术特点

采用 Flask 轻量 Web 框架，结构清晰，适合课程项目和快速开发
使用 MySQL 统一管理分析数据，所有图表均从数据库聚合获取
支持用户认证、权限控制和管理员后台
支持从 CSV 一键导入销售数据到 MySQL
提供分析总览、维度分析页和可视化大屏
图表类型丰富，包含折线图、柱状图、玫瑰图、堆叠图、热力图、雷达图、漏斗图、桑基图、河流图、树图、气泡散点图等
管理后台支持用户管理和销售数据 CRUD
整体界面采用赛博朋克风格 UI，适合展示与答辩

2. 项目概述

2.1 建设背景

游戏行业具有典型的数据密集型特征，不同平台、类型、区域和发行商之间的销售差异明显。传统静态表格难以高效展示复杂的数据关系，因此需要借助可视化分析系统，对海量销售数据进行聚合、对比、钻取与图形化表达。

本项目围绕经典 vgsales 数据集展开，目标是构建一个具备以下能力的系统：

将原始 CSV 数据规范化导入数据库
提供多维度的统计分析与图形展示
支持管理员管理用户与销售数据
提供大屏展示模式用于课堂汇报和演示

2.2 建设目标

系统建设目标如下：

实现基于 Flask 的 Web 分析系统
将 CSV 数据导入 MySQL，并以数据库作为唯一分析来源
设计多种可视化图表展示销售趋势和市场结构
提供用户注册登录、个人中心、用户管理、数据管理
提供面向演示的赛博朋克风格可视化大屏

2.3 数据来源

项目原始数据文件：

路径：data/vgsales.csv

CSV 字段结构如下：

Rank
Name
Platform
Year
Genre
Publisher
NA_Sales
EU_Sales
JP_Sales
Other_Sales
Global_Sales

该数据集反映了游戏在不同地区与平台上的销量表现，是本系统分析模块的基础。

3. 技术架构设计

3.1 技术栈

后端技术

Flask
Flask-SQLAlchemy
Flask-Login
PyMySQL

前端技术

Jinja2 模板引擎
HTML5 / CSS3
JavaScript
ECharts 5

数据库

MySQL 8.x

开发与运行环境

Python 3.8 及以上
Windows PowerShell
本地 MySQL 服务

3.2 总体架构

系统采用典型的三层结构：

表现层
- Jinja2 模板
- ECharts 图表
- 赛博朋克风格 CSS 界面
业务层
- Flask 路由蓝图
- 服务层数据处理与统计分析
- 登录、权限、后台管理逻辑
数据层
- MySQL 数据库存储用户、销售记录、导入日志
- CSV 导入模块负责原始数据入库

3.3 系统运行流程

系统运行主流程如下：

启动 Flask 应用
读取配置文件中的 MySQL 连接信息
初始化 SQLAlchemy 和 Flask-Login
注册认证、仪表盘、用户管理、数据管理、个人中心等蓝图
用户通过登录进入系统
页面通过 /dashboard/api/dashboard-data 获取聚合分析结果
前端使用 ECharts 渲染图表
管理员可以在后台执行用户和数据管理操作

4. 系统功能设计

4.1 功能总览

系统主要分为以下五大模块：

认证模块
分析展示模块
可视化大屏模块
用户管理模块
数据管理模块

4.2 认证模块

4.2.1 功能说明

认证模块负责系统登录、注册、退出以及访问控制。

4.2.2 功能点

用户注册
用户登录
用户退出
未登录访问拦截
停用账号限制登录

4.2.3 业务规则

用户名和邮箱不能重复
密码与确认密码必须一致
被停用的用户无法登录
已登录用户访问登录/注册页时自动跳转至仪表盘

4.3 分析展示模块

4.3.1 功能说明

分析展示模块是系统核心，负责将 MySQL 中的销售数据以多图表形式进行可视化展示。

4.3.2 页面组成

分析总览页
时间维度分析页
类型维度分析页
平台维度分析页
发行商维度分析页
区域维度分析页

4.3.3 交互能力

按年份筛选
按游戏类型筛选
按游戏平台筛选
刷新当前分析
导出当前分析快照 JSON

4.4 可视化大屏模块

4.4.1 功能说明

可视化大屏面向演示场景，聚焦高视觉冲击力与大信息密度展示。

4.4.2 大屏特点

采用大尺寸图表布局
顶部实时系统时钟
指标卡汇总关键业务指标
展示最适合汇报的核心图表
风格更偏赛博朋克和展示型

4.5 用户管理模块

4.5.1 功能说明

仅管理员可访问，用于管理系统用户。

4.5.2 功能点

新增用户
编辑用户资料
搜索用户
按角色筛选用户
按状态筛选用户
切换管理员/普通用户角色
启用/停用账号
重置密码
删除用户

4.5.3 关键保护规则

当前登录管理员不能停用自己
当前登录管理员不能取消自己的管理员身份
当前登录管理员不能删除自己
系统至少保留一个管理员账号

4.6 个人中心模块

4.6.1 功能说明

用于用户查看与修改个人资料。

4.6.2 功能点

查看角色、用户名、邮箱、账号状态
修改姓名
修改邮箱
修改个人简介
修改头像主色
修改密码

4.6.3 业务规则

邮箱不能为空
新邮箱不能与其他用户重复
新密码长度至少 6 位
两次输入的新密码必须一致

4.7 数据管理模块

4.7.1 功能说明

仅管理员可访问，是后台数据维护中心。

4.7.2 功能点

查看销售数据总量和数据质量摘要
新增销售记录
编辑销售记录
删除销售记录
按名称/发行商关键词筛选
按类型筛选
按平台筛选
按年份筛选
导出当前筛选结果 CSV
重新从 CSV 导入 MySQL
查看导入日志

4.7.3 业务规则

名称、平台、类型、发行商不能为空
区域销量不能为负数
global_sales 由四个区域销量自动求和生成
不指定排名时自动追加到当前最大排名之后

5. 可视化设计说明

5.1 图表设计原则

系统图表设计遵循以下原则：

所有图表数据均来自 MySQL，保证数据口径一致
每类图表对应一个清晰的分析目标
总览页负责全景展示
维度页负责分主题深挖
大屏页负责展示与演示

5.2 图表类型与业务含义

5.2.1 折线图

图表名称：年度全球销量趋势
用途：观察游戏行业在时间维度上的整体销售变化

5.2.2 柱线组合图

图表名称：销量与发行数量联动
用途：同时观察年度销售额和年度发行数量，分析二者关系

5.2.3 河流图

图表名称：头部品类年度销售河流
用途：观察不同游戏类型在多年时间序列中的兴衰变化

5.2.4 玫瑰图

图表名称：游戏类型销量占比
用途：反映不同类型在整体市场中的占比结构

5.2.5 区域玫瑰图

图表名称：区域销量结构
用途：对比北美、欧洲、日本、其他地区的销售贡献

5.2.6 漏斗图

图表名称：市场层级漏斗
用途：展示长尾、潜力、主流、畅销、爆款作品在数量上的层级分布

5.2.7 平台柱状图

图表名称：平台销量排行
用途：展示不同游戏平台的累计销量差异

5.2.8 发行商横向柱状图

图表名称：发行商销量排行
用途：展示头部发行商的市场贡献

5.2.9 区域堆叠面积图

图表名称：区域销量堆叠趋势
用途：观察各地区在不同年份的销售结构变化

5.2.10 热力图

图表名称：类型与平台热力矩阵
用途：展示游戏平台与游戏类型组合的销量热度

5.2.11 雷达图

图表名称：头部品类区域雷达、头部平台区域雷达
用途：比较不同类型或平台在各地区的强弱特征

5.2.12 桑基图

图表名称：发行商 → 类型 → 平台销售流向
用途：展示销售贡献在多个维度之间的流向关系

5.2.13 树图

图表名称：发行商类型树图
用途：从层级视角查看头部发行商和其主力类型

5.2.14 气泡散点图

图表名称：头部游戏北美/欧洲销售气泡图
用途：观察单个头部游戏在不同市场中的分布特征

5.2.15 集中度曲线

图表名称：发行商集中度曲线
用途：分析头部发行商累计贡献份额，衡量市场集中程度

5.3 多维度分析页设计

系统在总览基础上进一步拆分为五个维度页：

时间维度分析
- 重点关注行业周期、峰值年份、销量波动
类型维度分析
- 重点关注不同游戏类型的市场份额和区域偏好
平台维度分析
- 重点关注游戏平台竞争格局和平台-类型匹配度
发行商维度分析
- 重点关注发行商排名、集中度和主力品类
区域维度分析
- 重点关注各地区市场差异和区域结构变化

6. 数据库设计

6.1 数据库名称

数据库名：design_112_game

6.2 数据库字符集

utf8mb4
排序规则：utf8mb4_unicode_ci

6.3 表结构设计

系统核心包含三张业务表：

users
game_sales
import_logs

6.4 users 用户表

表名

users

字段说明

字段名	类型	说明
id	Integer	主键
username	String(64)	用户名，唯一
email	String(128)	邮箱，唯一
password_hash	String(255)	密码哈希
full_name	String(64)	用户姓名
bio	Text	用户简介
avatar_color	String(16)	头像主色
is_admin	Boolean	是否管理员
is_active_user	Boolean	是否启用
created_at	DateTime	创建时间
updated_at	DateTime	更新时间

设计说明

使用 password_hash 存储哈希密码，不明文存储
使用 is_admin 控制后台权限
使用 is_active_user 控制账号启停

6.5 game_sales 销售数据表

表名

game_sales

字段说明

字段名	类型	说明
id	Integer	主键
rank	Integer	原始排行
name	String(255)	游戏名称
platform	String(32)	平台
year	Integer	年份，可空
genre	String(64)	类型
publisher	String(128)	发行商
na_sales	Float	北美销量
eu_sales	Float	欧洲销量
jp_sales	Float	日本销量
other_sales	Float	其他地区销量
global_sales	Float	全球销量
created_at	DateTime	入库时间
updated_at	DateTime	更新时间

索引设计

已建立索引字段包括：

rank
name
platform
year
genre
publisher
global_sales

设计说明

该表是分析系统的核心事实表
所有图表统计均以此表为数据来源

6.6 import_logs 导入日志表

表名

import_logs

字段说明

字段名	类型	说明
id	Integer	主键
file_name	String(255)	导入文件名
rows_imported	Integer	成功导入条数
skipped_rows	Integer	跳过条数
status	String(32)	success / failed
note	String(255)	导入备注
imported_at	DateTime	导入时间
replace_mode	Boolean	是否覆盖导入

设计说明

用于记录每次 CSV 导入结果
管理员可在后台查看历史导入状态

6.7 SQL 快照文件

项目根目录提供了数据库快照文件：

design_112_game.sql

作用如下：

用于导出数据库结构与样例数据
可作为数据库备份或恢复依据
便于项目交付时直接恢复环境

7. 数据处理与分析流程设计

7.1 原始数据导入流程

CSV 导入由 app/services/csv_importer.py 负责。

处理步骤

检查 CSV 文件是否存在
在覆盖模式下清空 game_sales 表
逐行读取 CSV
对字段进行清洗和类型转换
将脏值如 N/A、空值转换为 None 或 0.0
批量写入数据库，每批 1000 条
记录导入日志到 import_logs

清洗规则

Year 为空或 N/A 时记为 None
销量字段为空或 N/A 时记为 0.0
名称、平台、类型、发行商为空时跳过该行

7.2 数据初始化流程

初始化由以下两个位置负责：

Flask CLI：app/cli.py
一键脚本：scripts/bootstrap.py

初始化步骤

创建数据库（若不存在）
创建数据表
创建默认管理员账号
如销售数据为空，则自动导入 CSV

7.3 分析数据生成流程

所有分析数据统一由 app/services/analytics.py 生成。

流程说明

前端请求 /dashboard/api/dashboard-data
后端读取筛选参数
服务层通过 SQLAlchemy 聚合查询数据
将统计结果拼装为统一 JSON
前端使用 ECharts 渲染

支持的筛选参数

year_start
year_end
genre
platform

7.4 分析输出内容

build_dashboard_payload() 会构建完整的仪表盘数据包，包含：

概览指标
筛选器选项
筛选摘要
年度趋势
类型占比
平台排行
发行商排行
区域结构
区域趋势
热力矩阵
双雷达
漏斗
河流图
桑基图
树图
散点图
集中度分析
Top 游戏列表
数据质量摘要
洞察文案

8. 系统目录结构设计

8.1 根目录结构

text 复制代码

game/
├─ app/
├─ data/
├─ scripts/
├─ design_112_game.sql
├─ README.md
├─ requirements.txt
├─ run.py
└─ 项目技术文档.md

8.2 app 目录说明

text 复制代码

app/
├─ __init__.py
├─ cli.py
├─ config.py
├─ extensions.py
├─ models.py
├─ utils.py
├─ routes/
│  ├─ __init__.py
│  ├─ auth.py
│  ├─ dashboard.py
│  ├─ profile.py
│  ├─ admin.py
│  └─ data.py
├─ services/
│  ├─ __init__.py
│  ├─ analytics.py
│  ├─ csv_importer.py
│  └─ db_bootstrap.py
├─ static/
│  ├─ css/
│  │  └─ main.css
│  └─ js/
│     └─ dashboard.js
└─ templates/
   ├─ base.html
   ├─ error.html
   ├─ auth/
   ├─ dashboard/
   ├─ data/
   ├─ admin/
   └─ profile/

8.3 各目录职责说明

`app/routes/`

负责 HTTP 路由定义和请求分发。

`app/services/`

负责分析逻辑、CSV 导入逻辑和数据库初始化逻辑。

`app/templates/`

负责页面结构与前端模板渲染。

`app/static/css/`

负责全局 UI 样式、赛博朋克风格视觉和后台控制台样式。

`app/static/js/`

负责前端图表渲染、筛选器联动、快照导出等行为逻辑。

9. 核心代码模块说明

9.1 应用工厂 `app/init.py`

作用：

创建 Flask 应用实例
加载配置
初始化数据库与登录管理器
注册蓝图
注册 CLI 命令
注册错误处理器

错误处理器覆盖：

403
404
500

其中数据库异常时会返回更明确的数据库错误提示。

9.2 配置模块 `app/config.py`

负责集中管理：

SECRET_KEY
MySQL 连接配置
SQLAlchemy 配置
CSV 文件路径
默认管理员账号配置

默认数据库配置：

Host：localhost
Port：3306
User：root
Password：123456
Database：design_112_game

9.3 扩展模块 `app/extensions.py`

定义全局扩展对象：

db = SQLAlchemy()
login_manager = LoginManager()

并配置：

未登录默认跳转到 auth.login
未登录提示语

9.4 权限工具 `app/utils.py`

定义 admin_required 装饰器：

先要求登录
再校验当前用户是否管理员
非管理员直接返回 403

9.5 模型模块 `app/models.py`

定义如下模型：

TimestampMixin
User
GameSale
ImportLog

其中：

User 继承 UserMixin
User 提供密码哈希读写方法
GameSale 提供 to_dict() 供前端列表和接口使用

9.6 CLI 模块 `app/cli.py`

提供以下命令：

flask init-db
flask create-admin
flask import-sales --replace
flask bootstrap-system --replace

作用：

初始化数据库
创建管理员
单独导入销售数据
一键完成系统初始化

9.7 分析服务模块 `app/services/analytics.py`

该模块是系统的分析核心，负责：

筛选条件解析
数据聚合
各类图表数据构建
洞察摘要生成

主要函数包括：

get_filter_options
parse_dashboard_filters
get_overview_metrics
get_yearly_trend
get_genre_share
get_platform_top
get_publisher_top
get_region_share
get_region_stack_trend
get_genre_platform_matrix
get_genre_region_radar
get_platform_region_radar
get_sales_funnel
get_theme_river
get_sankey_flow
get_publisher_treemap
get_market_scatter
get_sales_concentration
build_dashboard_payload

9.8 CSV 导入服务 `app/services/csv_importer.py`

负责将 vgsales.csv 转换为结构化数据库记录。

关键点：

自动识别 N/A
支持覆盖导入
支持批量写入
自动写入导入日志

9.9 数据库引导服务 `app/services/db_bootstrap.py`

功能：

创建数据库
创建默认管理员

特点：

对数据库名做合法性校验
使用原生 PyMySQL 创建数据库

10. 路由与接口设计

10.1 页面路由

路径	方法	说明
`/`	GET	根路径，未登录跳转登录，已登录跳转总览
`/login`	GET/POST	登录页
`/register`	GET/POST	注册页
`/logout`	GET	退出登录
`/dashboard`	GET	分析总览页
`/dashboard/analysis/<dimension>`	GET	分维度分析页
`/dashboard/big-screen`	GET	可视化大屏
`/profile`	GET/POST	个人中心
`/admin/users`	GET	用户管理页
`/data/manage`	GET	数据管理页

10.2 数据接口

路径	方法	说明
`/dashboard/api/dashboard-data`	GET	获取仪表盘聚合分析数据
`/data/export`	GET	导出当前筛选结果 CSV

10.3 用户管理接口

路径	方法	说明
`/admin/users/create`	POST	创建用户
`/admin/users/<id>/update`	POST	更新用户资料
`/admin/users/<id>/toggle-admin`	POST	切换用户角色
`/admin/users/<id>/toggle-active`	POST	启停账号
`/admin/users/<id>/reset-password`	POST	重置密码
`/admin/users/<id>/delete`	POST	删除用户

10.4 数据管理接口

路径	方法	说明
`/data/import`	POST	从 CSV 导入或重导数据
`/data/records/create`	POST	新增销售记录
`/data/records/<id>/update`	POST	更新销售记录
`/data/records/<id>/delete`	POST	删除销售记录

11. 前端页面设计说明

11.1 页面基座

所有登录后页面都继承 templates/base.html。

其主要职责：

定义统一布局
渲染侧边栏导航
显示顶部标题栏
显示闪现消息
引入公共 CSS 和 ECharts

11.2 侧边导航设计

侧边栏导航包含两组内容：

分析导航
- 分析总览
- 时间维度
- 类型维度
- 平台维度
- 发行商维度
- 区域维度
- 可视化大屏
系统模块
- 数据管理
- 用户管理
- 个人中心
- 退出登录

11.3 界面风格设计

整体采用赛博朋克风格：

主色：青色、粉色、黄色
背景：深蓝到黑色渐变
卡片：毛玻璃效果
字体：Orbitron + Rajdhani
页面元素：圆角、发光、描边、层次阴影

11.4 前端脚本 `app/static/js/dashboard.js`

主要职责：

请求 /dashboard/api/dashboard-data
动态填充筛选器
渲染指标卡
渲染所有 ECharts 图表
刷新图表数据
导出 JSON 快照
自适应浏览器尺寸变化

12. 权限控制与安全设计

12.1 角色划分

系统有两类角色：

普通用户
管理员

12.2 访问控制

普通用户可访问

登录注册
分析总览
维度分析页
可视化大屏
个人中心

管理员额外可访问

用户管理
数据管理

12.3 安全设计

密码采用 Werkzeug 哈希方式存储
使用 Flask-Login 维护会话
未登录用户访问受保护页面会被重定向
管理员接口由 admin_required 二次保护
对最后一个管理员账号做保护
对当前登录管理员账号做自保护

13. 项目启动与部署说明

13.1 安装依赖

bash 复制代码

pip install -r requirements.txt

依赖如下：

Flask
Flask-Login
Flask-SQLAlchemy
PyMySQL

13.2 初始化数据库

推荐方式：

bash 复制代码

python scripts/bootstrap.py

如需覆盖重导数据：

bash 复制代码

python scripts/bootstrap.py --replace

13.3 CLI 初始化方式

powershell 复制代码

$env:FLASK_APP = "run.py"
flask bootstrap-system --replace

13.4 启动项目

bash 复制代码

python run.py

13.5 默认管理员账号

用户名：admin
密码：admin123

13.6 浏览器访问地址

登录页：http://127.0.0.1:5000/login
分析总览：http://127.0.0.1:5000/dashboard
大屏：http://127.0.0.1:5000/dashboard/big-screen
用户管理：http://127.0.0.1:5000/admin/users
数据管理：http://127.0.0.1:5000/data/manage

14. 部署注意事项

14.1 数据库连接

确保本地或目标服务器已正确启动 MySQL，并允许以下配置连接：

Host：localhost
Port：3306
User：root
Password：123456

也可通过环境变量覆盖：

MYSQL_HOST
MYSQL_PORT
MYSQL_USER
MYSQL_PASSWORD
MYSQL_DB
DATABASE_URL

14.2 ECharts 资源

当前默认通过 CDN 引入：

https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js

若部署环境不能联网，建议将 echarts.min.js 下载到本地静态目录并改用本地引用。

14.3 Python 版本

项目已兼容 Python 3.8 运行环境，不依赖 Python 3.10 以上的新语法特性。

15. 测试与验证说明

项目开发过程中已验证以下关键能力：

Flask 应用工厂可正常导入
Python 3.8 环境可正常运行
登录、注册、退出流程正常
分析总览页、维度分析页、大屏页可渲染
管理员可访问用户管理与数据管理
数据管理新增、编辑、删除、导出功能可用
用户管理新增、编辑、重置密码、删除功能可用
权限保护规则生效
仪表盘 API 可正确返回聚合分析数据

16. 项目亮点总结

本项目的主要亮点包括：

架构完整
- 覆盖了认证、权限、管理、分析、展示、数据导入等完整链路
图表丰富
- 不局限于常规柱状图、折线图，还包含桑基图、河流图、漏斗图、树图、雷达图、热力图、散点图等
数据来源统一
- 所有分析结果均从 MySQL 实时聚合，保证图表口径一致
后台可维护
- 管理员不仅能看数据，还能对用户和销售记录进行真正的管理
展示效果强
- 赛博朋克风格界面适合课程设计演示、课堂答辩和系统展示

17. 后续优化建议

虽然当前系统已经可以完整运行，但后续还可继续扩展：

17.1 功能扩展方向

图表点击联动到对应维度页
批量导入多个数据文件
用户操作日志
批量删除或批量编辑数据
仪表盘图表导出 PNG
自动生成分析报告

17.2 技术优化方向

将 ECharts 改为本地静态资源，降低 CDN 依赖
将部分查询进一步封装为更细粒度服务
引入分页组件或前端交互增强
补充单元测试与接口测试
使用 Alembic 管理数据库迁移

17.3 数据分析扩展方向

平台世代分析
类型生命周期分析
区域偏好画像
发行商竞争格局变化趋势
爆款游戏判别模型

18. 结论

本项目已经完成从原始数据接入、数据库建模、业务功能开发到可视化大屏展示的完整建设流程。系统具备较好的结构化程度、可维护性和展示效果，能够满足课程设计、项目展示与基础二次开发的需求。

从技术实现角度看，本系统实现了以下目标：

使用 Flask 完成 Web 业务框架搭建
使用 MySQL 建立统一数据底座
使用 ECharts 构建多维度可视化分析体系
使用权限体系实现用户与管理员分级管理
使用后台管理模块支撑系统长期维护