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

xintgong

1311人浏览 · 2026-07-20 09:52:51

xintgong · 2026-07-20 09:52:51 发布

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. 票房深度分析

在这里插入图片描述

四大分析维度：

票房 TOP10 排行 - 柱状图展示 Top10 电影累计票房（亿元单位）
首日/首周/累计对比 - 堆叠柱状图，支持横向滚动浏览全部电影
预测 vs 实际偏差 - 双柱+折线组合图，直观展示预测准确度
关键指标卡片 - 平均票房、日均票房、偏差率等

5. 电影详情页

在这里插入图片描述

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

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

6. 类型多维度分析

在这里插入图片描述

三种可视化视角：

图表	用途
类型数量分布饼图	了解各类型影片占比
各类型平均票房柱状图	发现高票房类型（动画 12.91 亿领先）
类型综合雷达图	从影片数/票房/评分多角度评估

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 可视化库之一。

技术栈明细

层级	技术	版本	用途
前端框架	Vue.js	3.x	SPA 应用
UI 组件库	Element Plus	2.x	企业级组件
状态管理	Pinia	2.x	全局状态
图表库	ECharts	5.x	数据可视化
HTTP 客户端	Axios	1.x	API 请求
后端框架	Flask	3.x	Web 服务
ORM	SQLAlchemy	3.x	数据库操作
数据库	SQLite	3.x	数据存储
认证	Flask-JWT	4.x	JWT 令牌认证
跨域	Flask-CORS	4.x	CORS 支持

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

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

维度	Flask + Vue3 + ECharts	Django + React + D3	Express + Angular + Chart.js
学习曲线	低（Flask 极简，Vue3 文档完善）	中高（Django 全家桶较重）	中（Angular 概念多）
灵活性	高（按需引入扩展）	中（遵循 Django 约定）	中
图表丰富度	高（20+ 图表类型，Apache 维护）	高（D3 灵活但学习成本高）	中（Chart.js 图表类型有限）
适合场景	中小型数据可视化、毕业设计、原型	大型企业应用、内容管理	实时应用、SPA
部署复杂度	低（SQLite 零配置）	中（需配置数据库）	中

三、核心功能模块

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 默认账号

角色	用户名	密码
管理员	admin	admin123

六、关键技术点解析

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 报告
权限细化：不同角色看到不同的数据和功能
数据预警：设置阈值，异常数据自动告警
移动端适配：响应式布局支持手机访问
国际化：中英文切换支持

九、总结

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

技能领域	收获
Python 后端	Flask RESTful API 设计、ORM 操作、JWT 认证
Vue 前端	Composition API、Pinia 状态管理、ECharts 可视化
数据处理	Excel 数据清洗、去重策略、单位转换
工程实践	项目结构组织、前后端分离、部署运维

参考资料

国家电影局. 2024 年中国电影总票房 425.02 亿元，观影总人次 10.1 亿. 2025 年 1 月发布.
猫眼专业版. 《哪吒之魔童闹海》累计票房 154.46 亿元，打破 73 项纪录，登顶中国影史票房榜. 2025.
Apache ECharts 官方文档. https://echarts.apache.org/
Vue.js 官方文档. https://vuejs.org/
Flask 官方文档. https://flask.palletsprojects.com/
Stack Overflow Developer Survey. Vue.js 跻身最常用 Web 框架前五.

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

龙虾开发者社区

小龙虾开发者社区是 CSDN 旗下专注 OpenClaw 生态的官方阵地，聚焦技能开发、插件实践与部署教程，为开发者提供可直接落地的方案、工具与交流平台，助力高效构建与落地 AI 应用

更多推荐

我用 NVIDIA SkillSpector 纯静态扫了一遍 GitHub 最火的 agent skills：能挖出多少注入？0 个

龙虾开发者社区

周榜换血九成，Agent Skills 星数翻倍

龙虾开发者社区

一键搭建OpenClaw本地AI环境，联想AI主机Mini开箱即用

联想AI主机Mini的思路截然不同：出厂预装天禧Claw，做到开箱即用，一键养虾，零门槛配置，用户无需写代码、无需调试依赖，简单操作即可完成整机部署。部署门槛从"会写代码"降到"会开电脑"，这一跨越使本地AI得以从极客圈层走向更广泛的用户群体，一键搭建OpenClaw本地AI环境也因此成为推动本地AI普及的关键一步。部署便捷不代表功能缩减。联想AI主机Mini完整继承联想AI主机四大核心能力，支持

龙虾开发者社区

所有评论(0)

查看更多评论

xintgong

@xintgong

已为社区贡献2条内容

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

xintgong

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

一、项目效果预览

1. 数据总览大屏

2. 原始数据处理

3. 电影信息管理

4. 票房深度分析

5. 电影详情页

6. 类型多维度分析

7. 地区分析

8. 年度趋势分析

二、技术架构

什么是 Flask、Vue3、ECharts？

技术栈明细

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

三、核心功能模块

3.1 什么是数据层设计？

3.2 API 接口设计

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

3.4 单位转换处理

四、项目目录结构

五、快速开始

5.1 环境要求

5.2 后端启动

5.3 前端启动

5.4 默认账号

六、关键技术点解析

6.1 ECharts 图表优化

6.2 前端状态管理

6.3 文件上传处理

七、常见问题（FAQ）

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

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

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

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

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

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

八、扩展方向

九、总结

参考资料

所有评论(0)

温馨提示：您尚未绑定手机号

xintgong