python+vue搭建中国电影票房数据可视化分析系统

Python+Vue实战：从零搭建中国电影票房数据可视化分析系统（附完整源码）

源码+数据：https://pan.quark.cn/s/06ef807834bc

更新日期：2026年7月 | 数据覆盖：2015-2025年中国电影市场 | 技术栈：Flask 3.x + Vue3 + ECharts 5.x

数据可视化分析系统是一种将结构化数据转化为图表、仪表盘等视觉形式的应用系统，旨在帮助用户快速发现数据规律、支持决策判断。本文介绍的中国电影票房数据可视化分析系统基于 Python Flask + Vue3 + ECharts 技术栈构建，覆盖 2,871 部电影、累计票房 5,262.55 亿元的 15 年市场数据，适用于全栈学习、毕业设计与技术作品集展示。

据国家电影局数据，2024 年中国电影总票房达 425.02 亿元，观影总人次 10.1 亿，年度总票房位列全球第二；2025 年在《哪吒之魔童闹海》（累计票房 154.46 亿元，打破 73 项纪录）带动下，年度总票房攀升至 518.32 亿元。面对如此规模的市场数据，搭建一套可交互的可视化分析系统具有显著的行业研究价值。

一、项目效果预览

1. 数据总览大屏

首页采用仪表盘布局，核心指标一目了然：

• 电影总数: 2,871 部
• 累计票房总额: ¥5,262.55 亿
• 平均评分: 6.06 分
• 最高票房电影: 哪吒之魔童闹海（154.46 亿，中国影史票房冠军）

同时集成年度票房趋势折线图、电影类型分布饼图、地区影片分布柱状图等多维度可视化。

2. 原始数据处理

项目基于真实的中国电影票房 Excel 数据进行处理，包含以下字段：

3. 电影信息管理

完整的CRUD 功能（创建、读取、更新、删除）：

• 多条件组合搜索（片名、类型、地区、上映年份）
• 评分区间筛选、票房区间筛选
• 实时统计卡片：总片数、高评分占比、高票房占比、平均票房
• 支持查看详情、编辑、删除操作

4. 票房深度分析

四大分析维度：

5. 电影详情页

以《哪吒之魔童闹海》为例，详情页包含：

• 基础信息卡片：海报、片名、上映时间、时长、导演、主演等
• 票房数据面板：累计票房、首日票房、首周票房、最高单日、分账票房
• 星级评分占比：环形图展示五星到一星的分布比例
• 票房构成柱状图：首日/首周/最高单日/预测/实际/分账对比

6. 类型多维度分析

三种可视化视角：

7. 地区分析

• 各地区影片数量分布：中国大陆以 1909 部遥遥领先
• 各地区票房与评分双轴图：柱状图表示平均票房，折线图表示平均评分
• 详细统计表：按地区汇总影片数、平均票房、平均评分

8. 年度趋势分析

综合趋势折线图 + 五维小图表矩阵：

二、技术架构

什么是 Flask、Vue3、ECharts？

Flask 是一个基于 Python 的轻量级 Web 框架，由 Armin Ronacher 开发，采用 WSGI 标准和 Jinja2 模板引擎，核心理念是保持框架本身最小化、通过扩展实现功能。截至 2025 年，Flask 在 GitHub 上拥有 69.3k 星标和 16.4k Fork，是 Python 开发者最常用的 Web 框架之一，适合中小型项目与 RESTful API 开发。

Vue.js 3（简称 Vue3）是由尤雨溪（Evan You）创建的渐进式 JavaScript 前端框架，于 2020 年正式发布，引入 Composition API、更高效的响应式系统和 Tree-shaking 支持。根据 Stack Overflow 开发者调查，Vue.js 已跻身最常用 Web 框架前五名；2025 年发布的《Vue.js 2025 状态报告》进一步展示了该框架的成熟度与生态活力。

Apache ECharts 是一个基于 JavaScript 的开源数据可视化图表库，由百度团队捐献给 Apache 基金会，现为 Apache 顶级项目。它提供开箱即用的 20 多种图表类型和十几种组件，支持任意组合。截至 2025 年 5 月，ECharts 最新版本为 6.1.0，GitHub 星标数达 66.6k，是开发者首选的 JavaScript 可视化库之一。

技术栈明细

为什么选择 Flask + Vue3 + ECharts 组合？

这一技术组合在数据可视化项目中具有以下优势：

三、核心功能模块

3.1 什么是数据层设计？

数据层设计是指定义数据在数据库中的存储结构、字段类型与表间关系。本项目使用 SQLAlchemy ORM 将 Python 类映射为数据库表，核心模型如下：

# Movie模型 (核心字段)
class Movie(db.Model):
id = db.Column(db.Integer, primary_key=True)
movie_id = db.Column(db.String(50)) # 电影唯一标识
name = db.Column(db.String(200)) # 片名
english_name = db.Column(db.String(300)) # 英文名
genre = db.Column(db.String(100)) # 类型
region = db.Column(db.String(50)) # 地区
release_date = db.Column(db.String(100)) # 上映日期
total_box_office = db.Float) # 累计票房(万)
opening_day_box_office = db.Float) # 首日票房(万)
opening_week_box_office = db.Float) # 首周票房(万)
predicted_box_office = db.Float) # 预测票房(万)
rating = db.Float) # 评分
rating_count = db.Integer) # 评分人数
want_to_see_count = db.Integer) # 想看人数
release_year = db.Integer) # 上映年份
list_year = db.Integer) # 统计年份

3.2 API 接口设计

本项目采用 RESTful 风格设计 API，共分为 5 个资源模块、18 个接口端点：

/api/movies/
GET /list 获取电影列表（分页+筛选）
GET /:id 获取电影详情
PUT /:id 更新电影信息
DELETE /:id 删除电影

/api/box-office/
GET /overview 票房概览统计
GET /top10 票房TOP10
GET /comparison 首日/首周/累计对比
GET /ranking 票房排行榜

/api/rating/
GET /top10 评分TOP10
GET /distribution 评分分布
GET /vs-box-office 评分vs票房散点图
GET /want-to-see/top10 想看人数TOP10

/api/analysis/
GET /genre 类型分析
GET /region 地区分析
GET /yearly-trend 年度趋势

/api/auth/
POST /register 用户注册
POST /login 用户登录
GET /me 获取当前用户
PUT /profile 更新个人信息
POST /avatar 上传头像
POST /change-password 修改密码

3.3 数据去重策略：如何处理同一电影多次上榜？

由于同一电影在不同年份的票房榜单中会重复出现，本项目实现了智能去重策略：对同一 movie_id 只保留最新年份记录，通过子查询关联主表实现。

def get_deduped_query():
"""获取去重后的查询，同一movie_id只保留最新记录"""
subq = db.session.query(
func.max(Movie.id).label('max_id')
).group_by(Movie.movie_id).subquery()
return Movie.query.join(subq, Movie.id == subq.c.max_id)

这一策略确保 2,871 部电影中不出现重复统计，使票房总额（5,262.55 亿元）和平均评分（6.06 分）的计算结果准确可靠。

3.4 单位转换处理

后端统一进行单位转换，前端直接展示：

# 后端转换逻辑
'avg_total_box_office': round((stats.avg_total or 0) / 10000, 2) # 万元→亿元
'rating_count': round((d['rating_count'] or 0) / 10000, 2) # 人→万人
'want_to_see_count': round((d['want_to_see_count'] or 0) / 10000, 2) # 人→万人

四、项目目录结构

flask_project/
├── backend/ # 后端代码
│ ├── app/
│ │ ├── __init__.py # Flask应用工厂
│ │ ├── app.py # 入口文件
│ │ ├── models/
│ │ │ ├── movie.py # 电影模型
│ │ │ └── user.py # 用户模型
│ │ ├── routes/
│ │ │ ├── auth_routes.py # 认证路由
│ │ │ ├── dashboard_routes.py # 仪表盘
│ │ │ ├── movie_routes.py # 电影CRUD
│ │ │ ├── box_office_routes.py # 票房分析
│ │ │ ├── rating_routes.py # 评分分析
│ │ │ ├── analysis_routes.py # 分析接口
│ │ │ └── yearly_trend_routes.py # 年度趋势
│ │ └── utils/
│ │ └── data_cleaner.py # 数据清洗工具
│ ├── uploads/
│ │ └── avatars/ # 头像上传目录
│ ├── requirements.txt
│ └── data/
│ └── movies.db # SQLite数据库
│
├── frontend/ # 前端代码
│ ├── src/
│ │ ├── api/index.js # API封装
│ │ ├── components/ # 公共组件
│ │ │ └── Header.vue # 顶部导航
│ │ ├── views/ # 页面组件
│ │ │ ├── Dashboard.vue # 数据总览
│ │ │ ├── MovieList.vue # 电影列表
│ │ │ ├── MovieDetail.vue # 电影详情
│ │ │ ├── BoxOfficeAnalysis.vue # 票房分析
│ │ │ ├── RatingAnalysis.vue # 评分分析
│ │ │ ├── GenreAnalysis.vue # 类型分析
│ │ │ ├── RegionAnalysis.vue # 地区分析
│ │ │ ├── YearlyTrendAnalysis.vue# 年度趋势
│ │ │ ├── Login.vue # 登录注册
│ │ │ └── Profile.vue # 个人设置
│ │ ├── stores/auth.js # 认证状态
│ │ ├── router/index.js # 路由配置
│ │ └── main.js # 入口文件
│ ├── package.json
│ └── vite.config.js
│
├── data/
│ └── 电影票房完整数据v1.0.xlsx # 原始数据
└── 发布文案.md

五、快速开始

5.1 环境要求

• Python 3.9+
• Node.js 16+
• npm 或 pnpm

5.2 后端启动

cd backend

# 创建虚拟环境
python -m venv venv
venv\\Scripts\\activate

# 安装依赖
pip install -r requirements.txt

# 导入数据（首次运行）
flask import-data

# 启动服务
python app.py

访问：http://localhost:5000

5.3 前端启动

cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问：http://localhost:3000

5.4 默认账号

六、关键技术点解析

6.1 ECharts 图表优化

滚动条初始位置修复：

dataZoom: [
{
type: 'slider',
show: true,
start: 0, // 关键：从0开始，不是计算值
end: data.length > 15 ? Math.ceil(15 / data.length * 100) : 100
}
]

Tooltip 格式化：

tooltip: {
formatter: function(params) {
return `${params[0].name}<br/>累计票房：<b>${params[0].value}</b> 亿元`
}
}

6.2 前端状态管理

使用 Pinia 管理全局认证状态。Pinia 是 Vue 官方推荐的状态管理库，相比 Vuex 具备更好的 TypeScript 支持和更简洁的 API：

// stores/auth.js
export const useAuthStore = defineStore('auth', () => {
const token = ref(localStorage.getItem('token') || '')
const user = ref(JSON.parse(localStorage.getItem('user') || 'null'))

const isAdmin = computed(() => user.value?.role === 'admin')

return { token, user, isAdmin, logout, fetchUser }
})

6.3 文件上传处理

@auth_bp.route('/avatar', methods=['POST'])
@jwt_required()
def upload_avatar():
file = request.files['avatar']

# 格式校验
allowed_extensions = {'png', 'jpg', 'jpeg', 'gif', 'webp'}

# 大小限制 2MB

# UUID命名防冲突
filename = f"{uuid4().hex}.{ext}"

return jsonify({'code': 200, 'data': {'avatar': f"/uploads/avatars/{filename}"}})

七、常见问题（FAQ）

Q1：Python Flask 和 Django 有什么区别？为什么本项目选 Flask？

Flask 是轻量级微框架，核心仅提供路由和请求处理，其他功能（ORM、认证、表单）通过扩展按需引入；Django 是全栈框架，内置 ORM、Admin、认证、模板等开箱即用功能。本项目选择 Flask 的原因有三：一是数据可视化项目功能边界清晰，无需 Django 的全套全家桶；二是 Flask 学习曲线低，适合教学演示；三是 SQLite 零配置，与 Flask 搭配可快速启动。

Q2：Vue3 相比 Vue2 有哪些核心改进？

Vue3 的核心改进包括：Composition API（逻辑复用更灵活）、更高效的响应式系统（基于 Proxy，性能提升约 1.3-2 倍）、Tree-shaking 支持（按需引入，减小打包体积）、更好的 TypeScript 集成。此外，Vue3 的 Teleport、Suspense 等新特性更适合复杂交互场景。

Q3：ECharts 适合哪些数据可视化场景？

ECharts 适合需要丰富图表类型和交互效果的数据可视化场景，包括：柱状图/折线图/饼图等基础图表、雷达图/散点图/箱线图等专业图表、地理地图与热力图、大数据量渲染（百万级数据点）。本项目使用 ECharts 实现了票房 TOP10 柱状图、类型雷达图、年度趋势多系列折线图等 15+ 图表。

Q4：SQLite 能支撑多大数据量？本项目为什么用 SQLite？

SQLite 单数据库文件可支撑 TB 级数据量和亿级行记录，对于本项目的 2,871 部电影数据绰绰有余。选择 SQLite 的原因：零配置、无需安装数据库服务、单文件便于分发、与 Flask 无缝集成。若需扩展到生产环境，可将 SQLALCHEMY_DATABASE_URI 改为 MySQL 或 PostgreSQL 连接串即可。

Q5：如何将本项目数据替换为实时票房数据？

可通过对接猫眼专业版、淘票票等第三方票房 API 获取实时数据。需要注意的是，这些平台大多未开放公开 API，需通过爬虫采集或购买商业数据服务。本项目已预留 data_cleaner.py 数据清洗模块，替换数据源后只需调整字段映射即可。

Q6：前后端分离架构的优势是什么？

前后端分离的优势包括：开发效率高（前后端可并行开发）、可维护性强（职责清晰）、扩展灵活（后端可同时服务 Web、App、小程序）、部署独立（前端可 CDN 加速）。本项目通过 Flask 提供 RESTful API、Vue3 + Axios 调用接口、Flask-CORS 处理跨域，实现了标准的前后端分离架构。

八、扩展方向

本项目还可以进一步扩展：

• 实时数据接入：对接猫眼/淘票票 API 获取实时票房
• 数据导出功能：支持导出 Excel/PDF 报告
• 权限细化：不同角色看到不同的数据和功能
• 数据预警：设置阈值，异常数据自动告警
• 移动端适配：响应式布局支持手机访问
• 国际化：中英文切换支持

九、总结

通过这个项目，你可以学到：

参考资料

如果觉得有帮助，欢迎点赞收藏关注！有问题评论区交流~