PythonVue实战从零搭建中国电影票房数据可视化分析系统附完整源码本文将带你从零开始使用Python Flask Vue3 ECharts搭建一个完整的中国电影票房数据可视化分析系统。包含数据清洗、后端API开发、前端可视化大屏等全流程实现适合作为全栈学习项目或技术作品集展示。一、项目效果预览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. 年度趋势分析综合趋势折线图五维小图表矩阵维度图表类型分析价值年度综合趋势多系列折线图同时观察数量/票房/评分变化影片数量变化面积图行业发展趋势票房总额变化面积图市场规模演变平均评分变化面积图质量趋势判断平均票价变化面积图消费能力参考想看人数变化面积图受众热度指标二、技术架构技术栈明细层级技术版本用途前端框架Vue.js3.xSPA应用UI组件库Element Plus2.x企业级组件状态管理Pinia2.x全局状态图表库ECharts5.x数据可视化HTTP客户端Axios1.xAPI请求后端框架Flask3.xWeb服务ORMSQLAlchemy3.x数据库操作数据库SQLite3.x数据存储认证Flask-JWT4.xJWT令牌认证跨域Flask-CORS4.xCORS支持三、核心功能模块3.1 数据层设计# Movie模型 (核心字段)classMovie(db.Model):iddb.Column(db.Integer,primary_keyTrue)movie_iddb.Column(db.String(50))# 电影唯一标识namedb.Column(db.String(200))# 片名english_namedb.Column(db.String(300))# 英文名genredb.Column(db.String(100))# 类型regiondb.Column(db.String(50))# 地区release_datedb.Column(db.String(100))# 上映日期total_box_officedb.Float)# 累计票房(万)opening_day_box_officedb.Float)# 首日票房(万)opening_week_box_officedb.Float)# 首周票房(万)predicted_box_officedb.Float)# 预测票房(万)ratingdb.Float)# 评分rating_countdb.Integer)# 评分人数want_to_see_countdb.Integer)# 想看人数release_yeardb.Integer)# 上映年份list_yeardb.Integer)# 统计年份3.2 API接口设计/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 数据去重策略针对同一电影可能多次上榜的问题实现了智能去重defget_deduped_query():获取去重后的查询同一movie_id只保留最新记录subqdb.session.query(func.max(Movie.id).label(max_id)).group_by(Movie.movie_id).subquery()returnMovie.query.join(subq,Movie.idsubq.c.max_id)3.4 单位转换处理后端统一进行单位转换前端直接展示# 后端转换逻辑avg_total_box_office:round((stats.avg_totalor0)/10000,2)# 万元→亿元rating_count:round((d[rating_count]or0)/10000,2)# 人→万人want_to_see_count:round((d[want_to_see_count]or0)/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.9Node.js 16npm 或 pnpm5.2 后端启动cdbackend# 创建虚拟环境python-mvenv venv venv\Scripts\activate# 安装依赖pipinstall-rrequirements.txt# 导入数据首次运行flask import-data# 启动服务python app.py访问http://localhost:50005.3 前端启动cdfrontend# 安装依赖npminstall# 启动开发服务器npmrun dev访问http://localhost:30005.4 默认账号角色用户名密码管理员adminadmin123六、关键技术点解析6.1 ECharts图表优化滚动条初始位置修复dataZoom:[{type:slider,show:true,start:0,// 关键从0开始不是计算值end:data.length15?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管理全局认证状态// stores/auth.jsexportconstuseAuthStoredefineStore(auth,(){consttokenref(localStorage.getItem(token)||)constuserref(JSON.parse(localStorage.getItem(user)||null))constisAdmincomputed(()user.value?.roleadmin)return{token,user,isAdmin,logout,fetchUser}})6.3 文件上传处理auth_bp.route(/avatar,methods[POST])jwt_required()defupload_avatar():filerequest.files[avatar]# 格式校验allowed_extensions{png,jpg,jpeg,gif,webp}# 大小限制 2MB# UUID命名防冲突filenamef{uuid4().hex}.{ext}returnjsonify({code:200,data:{avatar:f/uploads/avatars/{filename}}})七、扩展方向本项目还可以进一步扩展实时数据接入对接猫眼/淘票票API获取实时票房数据导出功能支持导出Excel/PDF报告权限细化不同角色看到不同的数据和功能数据预警设置阈值异常数据自动告警移动端适配响应式布局支持手机访问国际化中英文切换支持八、总结通过这个项目你可以学到技能领域收获Python后端Flask RESTful API设计、ORM操作、JWT认证Vue前端Composition API、Pinia状态管理、ECharts可视化数据处理Excel数据清洗、去重策略、单位转换工程实践项目结构组织、前后端分离、部署运维源码已整理完毕如有需要可关注私信获取~如果觉得有帮助欢迎点赞收藏关注有问题评论区交流~