Flask+Echarts豆瓣电影TOP250数据可视化实战教程

简介一份基于Python Flask与Echarts的豆瓣电影TOP250数据分析可视化网站源码适合Python学习者、爬虫开发者和数据可视化初学者参考。项目包含完整前后端前端由HTML、CSS、JavaScript构建交互页面后端由Flask提供接口并借助Echarts生成图表、WordCloud生成词云实现电影评分、评论等数据的抓取与直观展示。压缩包共92个文件约9.98MB含4个Python脚本、5个HTML页面、16个CSS、16个JS、11个地图文件及图片、字体、XML配置等static目录下按js、css、img、vendor分类结构清晰。目前已有462人学习下载。读者可从中获得爬虫数据入库、Flask路由设计、Echarts动态图表配置、词云生成等完整思路并可直接运行或二次开发为课程设计、毕业设计项目。1. 为什么选 Flask Echarts 做豆瓣电影 TOP250 可视化豆瓣电影 TOP250 是数据分析项目里最经典的数据集数据量只有 250 条但片名、评分、评论数、年份、国家、类型这些字段一个不少做出来的图表也容易出效果。用 Flask 做后端、Echarts 做前端图表是这个方向最轻的组合Flask 不强制项目结构十分钟能把数据接口跑起来Echarts 的交互图表比 Matplotlib 更适合放在网页上做完可以直接发给别人看。这个项目解决的核心问题是“数据分析结果怎么展示给非技术人”抓取热门电影数据清洗成结构化表格通过 Flask 提供数据接口再用 Echarts 渲染成交互式页面。适合刚学完 Python 基础、准备课设或作品集的人也适合想从脚本开发转到 Web 开发的读者。文章后面所有代码都按“能跑通”的标准写你可以直接复现。2. 抓豆瓣 TOP250先用 requests 拿到本地再谈清洗和可视化2.1 数据源分析为什么选豆瓣 TOP250 而不是更复杂的榜单做数据分析最怕的不是算法不会而是数据拿到手之后结构一团糟。常见的数据分析案例要么太规整要么数据量大到需要 Spark 集群比如网约车大数据综合项目一看就要折腾 Hive。豆瓣 TOP250 是一个折中选择250 条数据手动复制太蠢但用纯 Python 爬虫完全够用不需要上分布式框架。另一个重要原因是页面是静态 HTML服务端直接渲染用 requests 就能拿到完整内容不需要 Selenium 等待 JS 执行。如果你想走通“python 数据分析与可视化实践”这条路这个数据集能让你把正则、pandas、Flask、Echarts 整条链路走通而不是在某一个环节被大型基建卡住。2.2 抓取脚本与字段设计用 requests BeautifulSoup 提取 7 个字段写爬虫之前先花五分钟打开开发者工具看 HTML 结构比直接写正则省力得多。豆瓣 TOP250 每个条目是一个 classitem 的 div内部有稳定的 span.title、span.rating_num、span.people 和 div.bd p 节点。下面这段代码是完整可运行的抓取脚本重点不是快而是稳。# crawler.py import re import time import requests import pandas as pd from bs4 import BeautifulSoup BASE_URL https://movie.douban.com/top250 HEADERS { User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) , Accept-Language: zh-CN,zh;q0.9, } SLEEP_SECONDS 2 def parse_item(item): title_node item.select_one(span.title) title title_node.get_text() if title_node else None rating_node item.select_one(span.rating_num) rating float(rating_node.get_text()) if rating_node else 0.0 people_node item.select_one(span.people) if people_node: comment_num int(re.sub(r\D, , people_node.get_text())) else: comment_num 0 info_node item.select_one(div.bd p) info_lines [line.strip() for line in info_node.get_text().splitlines() if line.strip()] # 第一行通常是“导演: xxx 主演: xxx”第二行才是“年份 / 国家 / 类型” detail_line info_lines[-1] if info_lines else parts detail_line.split( / ) year int(parts[0]) if len(parts) 0 and parts[0].strip().isdigit() else -1 country parts[1].strip() if len(parts) 1 else genre parts[2].strip() if len(parts) 2 else quote_node item.select_one(span.inq) quote quote_node.get_text() if quote_node else return { title: title, rating: rating, comment_num: comment_num, year: year, country: country, genre: genre, quote: quote, } def fetch_top250(): movies [] for start in range(0, 250, 25): resp requests.get(BASE_URL, params{start: start}, headersHEADERS, timeout10) try: resp.raise_for_status() except requests.HTTPError as exc: print(f请求失败: {exc}, 等待后重试当前页) time.sleep(5) continue soup BeautifulSoup(resp.text, html.parser) for item in soup.select(div.item): movies.append(parse_item(item)) time.sleep(SLEEP_SECONDS) return movies if __name__ __main__: df pd.DataFrame(fetch_top250()) df.to_csv(douban_top250.csv, indexFalse, encodingutf-8-sig) print(df.head())为什么用select_one而不是正则因为 BeautifulSoup 是按 DOM 结构解析比正则一次匹配所有字段要稳定得多。这里最关键的逻辑是info_lines[-1]因为导演、主演和年份国家类型被放在同一个 p 标签里盲目按/切分会把“主演: 蒂姆·罗宾斯 / 摩根·弗里曼”当成国家字段。还有一个风险点影片没有简介时span.inq不存在必须返回空字符串否则后面 pandas 读到的就是 NaN。comment_num用正则去掉所有非数字这样能吃掉“ 1234567人评价 ”里的空格和中文。SLEEP_SECONDS设置为 2 秒是速度和反爬之间的平衡想快点就改成 1但风险也变大。抓完 250 条后CSV 使用utf-8-sig编码保存而不是默认utf-8。utf-8-sig会在文件开头写入 BOMExcel 打开时中文不会乱码这是爬虫落地最容易被忽视的细节之一。注意豆瓣数据仅供学习交流保持低频抓取不要用于商业项目。2.3 数据清洗展开国家和类型生成三种可视化专用数据抓下来的字段还不能直接画图。country 可能是“美国 / 英国”genre 可能是“剧情 / 冒险”如果整行作为饼图的一项数据维度就被浪费了。另外 year 需要从字符串转成数值评分最好保留一位小数。下面的 clean.py 会把清洗结果拆成三个 CSV每个对应后面 Echarts 的一种图表。# clean.py import pandas as pd df pd.read_csv(douban_top250.csv, encodingutf-8-sig) df df.dropna(subset[title, rating]) df[quote] df[quote].fillna() df[year] pd.to_numeric(df[year], errorscoerce).fillna(-1) def expand_field(text): if isinstance(text, str): return [item.strip() for item in text.split(/) if item.strip()] return [] # 国家/地区分布 country_pairs [] for _, row in df.iterrows(): for country in expand_field(row[country]): country_pairs.append({name: country, value: 1}) country_df pd.DataFrame(country_pairs) if len(country_df): country_df country_df.groupby(name, as_indexFalse)[value].sum() country_df country_df.sort_values(value, ascendingFalse) # 年份分布 year_df df[year].astype(int).value_counts().sort_index().reset_index() year_df.columns [year, count] # 评分分布 df[rating_round] df[rating].round(1) score_df df[rating_round].value_counts().sort_index().reset_index() score_df.columns [score, count] country_df.to_csv(country_summary.csv, indexFalse, encodingutf-8-sig) year_df.to_csv(year_summary.csv, indexFalse, encodingutf-8-sig) score_df.to_csv(score_summary.csv, indexFalse, encodingutf-8-sig) print(country_df.head(10)) print(year_df.head(10)) print(score_df.head(10))这里用iterrows()逐行拆国家效果直观250 条数据性能可以忽略。如果换到上万条再考虑用explode()。注意df[year].astype(int)之前已经 fillna(-1)否则遇到异常年份时转换会报错。评分分桶到一位小数可以让柱状图横轴从 8.0 到 9.7 分布更清晰如果直接用原始评分250 条数据会有太多散点。清洗完成后项目根目录会出现四个 CSV主表douban_top250.csv、country_summary.csv、year_summary.csv、score_summary.csv。之后 Flask 只读这几个文件不需要每次启动都爬豆瓣。这种“爬虫和网站分离”的结构也让部署变得更安全网站服务任何时刻都只访问本地文件不会因豆瓣反爬而挂掉。2.4 常见误用把 HTML 块全量切分、不设编码、忽略空值整理这些数据时我见过不少翻车现场。一种是把info_node.get_text()的所有行用/切分后直接取索引结果把导演姓名当成国家另一种是保存 CSV 时用utf-8Excel 打开乱码后怀疑是数据源问题还有一种是爬虫阶段对缺失字段不处理到清洗阶段dropna把整行电影删掉250 条变 200 条。解决这些问题的原则只有一个在每个字段提取时都做一次空值兜底。数据清洗永远要比后续图表多走一步别等到前端图例出现“undefined”再回头查。3. 用 Flask 把清洗后的数据变成接口路由设计与模板注入3.1 项目结构设计与 Flask 选型拿到任何 Flask 源码第一步都不是看代码而是恢复目录结构。这个项目按下面的目录划分后续扩展会非常顺手。douban_top250/ ├── app.py ├── crawler.py ├── clean.py ├── data/ │ ├── douban_top250.csv │ ├── country_summary.csv │ ├── year_summary.csv │ └── score_summary.csv ├── templates/ │ ├── base.html │ └── dashboard.html └── static/ ├── css/ │ └── style.css └── js/ └── echarts.min.js这个结构不需要创建 Flask 蓝图因为整体只有三四个图表接口单个 app.py 足够维护。有人总会问 Flask 和 FastAPI 怎么选我的判断标准是如果你核心业务是给前端提供 APIFastAPI 的 Pydantic 校验和自动 Swagger 文档更省事但数据分析可视化网站需要直接渲染模板和托管静态资源Flask 的 render_template 和 static 目录是默认能力不需要额外配置。对于这个源码Flask 是更稳的选择。3.2 数据读取与 API 封装让前端拿到干净的 JSON接口设计上我习惯把数据分成两类全量电影记录和概览聚合数据。全量记录给表格或详情用概览数据给初始化图表用避免每次图表刷新都传 250 条大 JSON。下面的 app.py 实现了三个路由。# app.py import pandas as pd from flask import Flask, render_template, jsonify app Flask(__name__) DATA_DIR ./data def load_csv(filename): return pd.read_csv(f{DATA_DIR}/{filename}) app.route(/) def index(): return render_template(dashboard.html, page_title豆瓣TOP250可视化) app.route(/api/movies) def api_movies(): df load_csv(douban_top250.csv).fillna() records df.to_dict(orientrecords) return jsonify(records) app.route(/api/overview) def api_overview(): country_df load_csv(country_summary.csv).fillna() year_df load_csv(year_summary.csv).fillna() score_df load_csv(score_summary.csv).fillna() return jsonify({ country: country_df.to_dict(orientrecords), year: year_df.to_dict(orientrecords), score: score_df.to_dict(orientrecords), })load_csv把读取动作集中在一个函数里后续改文件路径只改一处。注意fillna()必须放在to_dict之前因为 pandas 的空值在 DataFrame 中是NaNjsonify遇到裸 NaN 很可能序列化失败。DATA_DIR这里写的是相对路径 ./data如果你从项目根目录运行是没有问题的但在 PyCharm 里经常出现工作目录是根目录的上一级这时可以把路径改成基于__file__的绝对路径这是血泪经验。3.3 用 Jinja2 把概览数据注入页面替代 fetch 的开局方式除了用 fetch 拉接口Flask 还支持在渲染模板时把概览数据直接注入给 Echarts。这样首屏图表加载更快也方便后端做数据兜底。app.route(/dashboard) def dashboard(): df load_csv(douban_top250.csv).fillna() year_df df[year].value_counts().sort_index().reset_index() year_df.columns [year, count] score_df df[rating].round(1).value_counts().sort_index().reset_index() score_df.columns [score, count] return render_template( dashboard.html, year_countyear_df[year].tolist(), year_datayear_df[count].tolist(), score_countscore_df[score].tolist(), score_datascore_df[count].tolist(), )对应的模板里这样使用script const yearCount {{ year_count | tojson }}; const yearData {{ year_data | tojson }}; /scripttojson是 Jinja2 的内置过滤器它会把 Python 列表转成 JSON并且自动处理 HTML 转义。如果在视图里直接传df.to_dict里面可能会出现 numpy 类型导致前端拿到字符串所以上面的代码把列先转成了原生 Python 列表。这个细节在清洗小数据时不会暴露但换数据源后很容易踩到。3.4 启动参数与开发调试host、port、debug 怎么配本地开发用 Flask 内置服务器完全够。为了省去每次都敲环境变量可以在 app.py 最后加一段if __name__ __main__: app.run(host0.0.0.0, port8000, debugTrue)debugTrue会自动重载代码但生产环境一定不能开。host0.0.0.0的意义是让局域网内其他设备也能访问做可视化演示时手机可以直接打开同一个页面。启动后打开http://127.0.0.1:8000/api/overview如果返回中文 JSON 而不是 500 错误说明从 CSV 到接口的链路已经通。此时再访问首页把 Echarts 的静态资源和接口拼起来整个网站就能看见了。4. 用 Echarts 把接口数据变成可视化大屏饼图、柱状图与折线图配置4.1 引入 Echarts下载到 static 比 CDN 更靠谱Echarts 是纯前端图表库CDN 引入虽然简单但课程设计现场一旦断网整个页面就只剩接口 JSON。常见做法是提前下载 echarts.min.js 放进static/js然后在 base.html 中引用本地文件。script src{{ url_for(static, filenamejs/echarts.min.js) }}/scripturl_for会按 Flask 的静态目录自动生成正确路径避免手写/static/js/...时因为部署到子路径而失效。前端初始化 Echarts 之前要确保容器 div 已有宽度和高度否则图表会显示 0 px。这也是很多项目“看似没问题但图表不显示”的常见原因之一。4.2 国家分布饼图环形饼图和 tooltip 格式化国家分布是 TOP250 项目里最直观的一张图。后端已经生成了{name: 美国, value: 129}这样的记录数组前端可以直接塞给 Echarts。下面的代码放在 dashboard.html 的 script 标签中。const countryChart echarts.init(document.getElementById(countryChart)); fetch(/api/overview) .then((resp) resp.json()) .then((data) { countryChart.setOption({ title: { text: TOP250 国家/地区分布, left: center }, tooltip: { trigger: item, formatter: {b}: {c}部 ({d}%) }, legend: { orient: vertical, left: left }, series: [{ name: 国家/地区, type: pie, radius: [40%, 70%], center: [50%, 55%], label: { formatter: {b}: {c} }, data: data.country }] }); });radius: [40%, 70%]给的是一个内径和外径的数组效果是环形饼图。{d}%是 Echarts 内置的百分比变量不需要自己在后端算。为什么用环形饼图而不是实心饼图因为当美国、英国、中国大陆、日本等主要地区之外还有一堆小国家时环形中间可以留白放总数视觉更清晰。想让饼图中间显示“250”个电影总数可以再加一个 graphic 文本元素。4.3 年份柱状图与评分折线图xAxis 数据映射和渐变色年份分布用柱状图是常规做法但要注意 Echarts 的 xAxis data 必须是一个数组如果你直接传data.year它会用每个对象的某个字段名而不是year属性因此需要 map。const yearChart echarts.init(document.getElementById(yearChart)); fetch(/api/overview) .then((resp) resp.json()) .then((data) { yearChart.setOption({ xAxis: { type: category, data: data.year.map((item) item.year), name: 年份 }, yAxis: { type: value, name: 影片数量 }, series: [{ name: 影片数量, type: bar, data: data.year.map((item) item.count), itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #5b8ff9 }, { offset: 1, color: #61dd7c } ]) } }] }); });这个例子里的渐变色LinearGradient(0, 0, 0, 1, ...)是 Echarts 5 里给柱状图加立体感的常用写法四个参数分别代表渐变方向起点的 x、y 和终点的 x、y。0,0,0,1就是垂直从上到下。如果想做横向柱状图把 xAxis 和 yAxis 互换即可。折线图的配置思路一样只要把type: bar改成type: line再把 data 换成评分序列就能看到“评分随排名波动”的曲线。4.4 多个图表组合成大屏布局做可视化大屏时很多人习惯把图片堆在一起结果卡片没有间距、标题重叠。我会用 CSS Grid 或 flex 让每个图表卡片固定高度并且给卡片设置独立背景形成“百度可视化大屏”那种深色风格。div classchart-card idcountryChart stylewidth: 100%; height: 400px;/div div classchart-card idyearChart stylewidth: 100%; height: 400px;/div深色大屏下需要额外设置 Echarts 的全局文本颜色。默认的深灰文字在深蓝背景上几乎看不见可以把textStyle统一设置成浅色例如countryChart.setOption({ textStyle: { color: #eee }, legend: { textStyle: { color: #eee } } });每个图表初始化后要绑定window.addEventListener(resize, () chart.resize())否则浏览器缩窗口后图表会保持比例变形。如果担心数据不更新可以加一个 30 秒的定时器重新setOption但要注意切页面后及时clearInterval这个细节很容易被忽略。5. 常见问题排查从爬虫到图表最容易翻车的 5 个坑现象、原因、解决5.1 豆瓣反爬抓几页后被 403 或验证码拦截现象抓取第一页没问题到第三页开始出现“检测到有异常请求”或 HTTP 418/403 状态码。原因requests 的默认指纹太明显请求频率超过豆瓣阈值IP 被临时限制。解决给请求头补全User-Agent、Accept-Language、Referer并保持time.sleep(2)以上。个人学习项目不要开多线程并发抓取。如果仍然被限制可以先在浏览器手动访问一次豆瓣把请求里的 Cookie 贴到 HEADERS 配置中有效期通常几小时到几天。需要注意的是Cookie 不要写死在源码里读取环境变量更好。5.2 JSON 序列化时的 NaN接口报错或前端拿到 null现象/api/overview接口返回 500浏览器控制台响应内容里出现 NaN或者 Echarts 数据里有一堆空值。原因pandas 用NaN表示空字符串但 JSON 标准不支持裸 NaNjsonify在序列化时会失败。解决在视图函数里对所有 DataFrame 做fillna()数值列用fillna(0)。如果仍然报错就改用df.to_json(orientrecords)生成字符串再交给jsonify返回值。注意fillna返回的是新对象不是原地修改一定要把返回值赋回去否则你会发现前端还是拿到 NaN。5.3 Echarts 中文字体方块和 HTML 编码有关现象网页标题中文正常图表里片名变成方块。原因Jinja2 渲染的 HTML 没有声明utf-8或者 Echarts 默认字体不包含中文字形。解决在模板 head 里显式写meta charsetutf-8同时给 Echarts 全局textStyle设置fontFamily: Microsoft YaHei, PingFang SC, sans-serif。此外CSV 保存为utf-8-sig后前端读取到的文本也会带 BOM用fillna后记得strip()一次这是小概率事件但遇到一次会查很久。5.4 模板找不到、静态文件 404工作目录和路径大小写现象运行python app.py后首页报TemplateNotFound: dashboard.html或者浏览器 Console 里/static/js/echarts.min.js404。原因Flask 默认在当前工作目录下寻找templates和static。如果app.py在/home/user/project/app.py但你在/home/user下启动Flask 找不到目录。解决进入项目根目录再启动或者在创建应用时显式指定Flask(__name__, template_foldertemplates, static_folderstatic)。静态文件 404 还要检查文件名大小写Linux 服务器对大小写敏感echarts.min.js和Echarts.min.js是不同文件。5.5 部署后图表空白DOM 未就绪与路径问题现象本地用 Flask 开发服务器一切正常部署到 Nginx gunicorn 后接口能返回 JSON但页面图表区域空白。原因Echarts 初始化执行时DOM 容器还没有被浏览器解析完另外 Nginx 如果没有把/static路径代理给 Flask静态文件加载失败。解决把所有 Echarts 初始化代码放到window.onload回调里确保容器 ready。部署后用curl -I http://服务器地址/static/js/echarts.min.js检查静态文件状态码。如果静态文件由 Nginx 负责服务需要在 Nginx 配置中透传/static/到项目目录。6. 部署与验证把源码跑通并改成自己的数据分析项目6.1 三分钟验证完整链路代码写完不要急着部署先用三条命令自查。启动 Flask 后分别请求首页、概览接口和静态资源能快速定位问题在数据层还是展示层。curl -s http://127.0.0.1:8000/api/overview | python -m json.tool curl -s -o /dev/null -w %{http_code} http://127.0.0.1:8000/static/js/echarts.min.js curl -s -o /dev/null -w %{http_code} http://127.0.0.1:8000/第一条命令验证接口返回的 JSON 是否能被 Python 正确解析没有 NaN 就说明清洗合格第二条和第三条分别验证静态资源和首页状态码。给我的习惯是每次改动数据源后都会跑一遍这条命令它比浏览器刷新更快。6.2 部署到 Linuxgunicorn 加 systemd 的最小配置Flask 自带的开发服务器只适合调试生产环境我一般用 gunicorn。安装后一行命令启动pip install gunicorn gunicorn -w 2 -b 0.0.0.0:8000 app:app-w 2表示 2 个 worker对这个项目足够250 条数据的内存占用非常低。如果想让服务开机自启就在 systemd 单元文件里指向 gunicorn 的绝对路径。实际落地的时候建议把 Nginx 放在前面代理静态文件和反向代理动态接口Echarts 的 js 文件约 1MB让 Flask 去读有点浪费。6.3 二次改造把豆瓣换成你自己的榜单这个源码的价值在于数据层和展示层之间只依赖 CSV 文件所以换数据源很方便。比如你想抓猫眼电影某个榜单只需要改crawler.py里的选择器让输出字段保持title, rating, comment_num, year, country, genre, quote的结构后面 Flask 和 Echarts 一行都不用动。免费 Python 源码大全里这类可视化代码不少但能改造成自己项目的才是值得投入的。我拿到这类开源项目时习惯先把抓取频率改为配置项把 CSV 路径改为绝对路径再验证相关接口避免 demo 能跑、换数据就翻车。不要为了做大屏而把所有图表塞进一页先保证数据真实再做花架子。这个方向值得投入希望帮到你。本文还有配套的精品资源点击获取