豆瓣TOP250爬虫+Flask+Echarts可视化入门实战

简介本资源是一套基于Python Flask与Echarts实现的豆瓣电影TOP250数据分析可视化网站完整源码面向Python初学者、Web开发入门者及数据可视化实践者解决从数据采集、后端服务搭建到前端动态图表展示的一站式学习需求。压缩包共92个文件涵盖4个核心Python脚本含爬虫word_cloud.py与主应用app.py、5个HTML模板页index.html、movie.html等、16个CSS与16个JavaScript文件支撑响应式交互界面以及19张JPG图片、11个地图文件用于地理维度扩展、2个字体文件和SQLite数据库movie250.db整体大小为9.98MB。已有462人学习下载资源结构清晰包含requirements.txt依赖说明、.idea项目配置及完整static/templates目录划分便于快速部署与二次开发读者可直接运行本地服务深入理解Flask路由设计、Echarts动态渲染逻辑、词云生成原理及豆瓣数据清洗流程。1. 为什么豆瓣TOP250的爬虫FlaskEcharts组合至今仍是Python数据可视化入门最稳的“练手三件套”你可能已经见过太多“高大上”的可视化项目实时股票看板、IoT设备热力图、城市级人流模拟……但真正能让你在3天内从零跑通、本地打开浏览器看到动态图表、还能向面试官清晰讲出每一步逻辑的还是这个看似“过时”的组合基于Python Flask与Echarts插件的豆瓣电影TOP250数据分析可视化网站设计源码。它不是炫技而是把数据获取、后端服务、前端渲染、交互逻辑这四层能力用最低认知负荷串成一条可触摸的链路——爬取真实网页结构非API用Flask暴露轻量接口而非写RESTful规范靠Echarts原生JS配置而非封装库抽象所有代码都在一个app.py几个HTML模板里没有Docker、没有Nginx、不碰JWT。适合刚学完requests和jinja2的新手也适合想快速验证一个分析想法的老手比如“评分分布是否真呈正态”、“类型标签重叠度有多高”、“导演出现频次和平均分有没有相关性”。它不解决生产级并发或权限体系但它能让你在flask run后亲眼看见自己写的Python字典变成浏览器里可缩放、可悬停、带渐变色柱状图的页面——这种确定性反馈是比任何教程都强的续命针。2. 从豆瓣页面抓取TOP250数据绕过反爬的最小可行方案与字段清洗逻辑豆瓣对TOP250列表页https://movie.douban.com/top250的反爬策略相对温和但直接requests.get会返回空内容或验证码页。这不是因为封IP而是豆瓣在HTML中嵌入了JavaScript动态渲染逻辑且关键数据藏在div classitem下的多层span和a里。我们必须模拟真实用户行为同时规避基础检测。2.1 用requestsBeautifulSoup稳定抓取250条记录含翻页核心思路豆瓣TOP250共10页每页25条URL规律为?start0filter、?start25filter……直到?start225filter。我们不依赖Selenium太重而用requests带上合理Headers并对响应做编码修复import requests from bs4 import BeautifulSoup import time import re def fetch_douban_top250(): headers { User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36, Accept: text/html,application/xhtmlxml,application/xml;q0.9,image/webp,*/*;q0.8, Accept-Language: zh-CN,zh;q0.9,en;q0.8, Connection: keep-alive, Upgrade-Insecure-Requests: 1, } all_movies [] for start in range(0, 250, 25): url fhttps://movie.douban.com/top250?start{start}filter try: response requests.get(url, headersheaders, timeout10) # 豆瓣有时返回gbk编码需手动解码 if response.encoding ISO-8859-1: response.encoding response.apparent_encoding soup BeautifulSoup(response.text, html.parser) items soup.find_all(div, class_item) for item in items: # 提取序号如1. rank_tag item.find(em) rank int(rank_tag.get_text().strip()) if rank_tag else None # 提取标题主标题副标题 title_tag item.find(span, class_title) title title_tag.get_text().strip() if title_tag else # 副标题常含英文名或年份 other_tag item.find(span, class_other) other other_tag.get_text().strip() if other_tag else # 提取评分 rating_tag item.find(span, class_rating_num) rating float(rating_tag.get_text().strip()) if rating_tag and rating_tag.get_text().strip() else 0.0 # 提取评价人数如2345678人评价 → 提取数字 people_tag item.find(div, class_star).find_next_sibling(div) people_text people_tag.get_text().strip() if people_tag else people_match re.search(r(\d)人评价, people_text) people_count int(people_match.group(1)) if people_match else 0 # 提取描述导演、主演、年份、类型 bd_tag item.find(div, class_bd) if bd_tag: p_tags bd_tag.find_all(p, class_False) if len(p_tags) 2: # 第一个p导演/主演信息需进一步拆分 info_line p_tags[0].get_text().strip() # 第二个p年份/类型如2019 / 美国 / 剧情 / year_genre_line p_tags[1].get_text().strip() # 简单提取年份四位数字 year_match re.search(r(\d{4}), year_genre_line) year int(year_match.group(1)) if year_match else None # 提取类型逗号或斜杠分隔取最后1-2个词 genre_parts [g.strip() for g in re.split(r[\/,], year_genre_line) if g.strip()] genre genre_parts[-1] if genre_parts else else: info_line year None genre else: info_line year None genre all_movies.append({ rank: rank, title: title, other: other, rating: rating, people_count: people_count, info_line: info_line, year: year, genre: genre }) # 防反爬每页间隔1.2秒 time.sleep(1.2) except Exception as e: print(f抓取第 {start//25 1} 页失败: {e}) continue return all_movies # 执行抓取首次运行耗时约15秒 movies_data fetch_douban_top250() print(f成功抓取 {len(movies_data)} 条电影数据)逻辑说明这段代码的关键不在“能抓”而在“抓得稳”。response.apparent_encoding自动识别gbk编码避免乱码time.sleep(1.2)比单纯sleep(1)更难被频率检测正则提取people_count和year规避了HTML结构微调导致的崩溃info_line保留原始字符串供后续NLP解析如分离导演/主演而不是强行切分——这是新手最容易翻车的点过早清洗导致后期分析维度丢失。2.2 字段清洗与结构化为可视化准备干净的JSON Schema抓取的原始数据是“毛坯”直接喂给Echarts会出错。我们需要定义明确的字段类型和缺失值处理策略。重点清洗项title去除多余空格、换行符统一用中文书名号包裹如《肖申克的救赎》rating强制转float缺失设为0.0豆瓣极少数条目无评分year过滤掉非1900–2030范围的异常值如19或202genre标准化类型标签将“剧情 / 爱情” → “剧情”“犯罪、惊悚” → “犯罪”建立主类型映射表people_count单位统一为“万”保留1位小数2345678 → 234.6万import json from collections import Counter def clean_movie_data(raw_data): # 主类型映射常见豆瓣类型归并 genre_mapping { 剧情: [剧情, 剧情片, 剧情 /], 爱情: [爱情, 爱情片, 爱情 /], 喜剧: [喜剧, 喜剧片, 喜剧 /], 动作: [动作, 动作片, 动作 /], 科幻: [科幻, 科幻片, 科幻 /], 悬疑: [悬疑, 悬疑片, 悬疑 /], 犯罪: [犯罪, 犯罪片, 犯罪 /], 动画: [动画, 动画片, 动画 /], 奇幻: [奇幻, 奇幻片, 奇幻 /], 冒险: [冒险, 冒险片, 冒险 /], 战争: [战争, 战争片, 战争 /], 历史: [历史, 历史片, 历史 /], 传记: [传记, 传记片, 传记 /], 音乐: [音乐, 音乐片, 音乐 /], 运动: [运动, 运动片, 运动 /], 西部: [西部, 西部片, 西部 /], 恐怖: [恐怖, 恐怖片, 恐怖 /], 惊悚: [惊悚, 惊悚片, 惊悚 /], 纪录片: [纪录片, 纪录, 纪录 /], 短片: [短片], 同性: [同性], 家庭: [家庭], 儿童: [儿童], 古装: [古装], 武侠: [武侠], 黑色电影: [黑色电影], 灾难: [灾难], 歌舞: [歌舞], 情色: [情色], 其他: [其他, 未分类, ] } cleaned [] for m in raw_data: # 标题标准化 title m[title].strip().replace(\n, ).replace(\r, ) if not title.startswith(《): title f《{title}》 # 评分校验 rating float(m[rating]) if isinstance(m[rating], (int, float, str)) and str(m[rating]).replace(., ).isdigit() else 0.0 if rating 0 or rating 10: rating 0.0 # 年份校验 year m[year] if not isinstance(year, int) or year 1900 or year 2030: year None # 类型映射 raw_genre m[genre].strip() mapped_genre 其他 for main, aliases in genre_mapping.items(): if any(alias in raw_genre or raw_genre in alias for alias in aliases): mapped_genre main break # 评价人数转“万” people_count m[people_count] people_wan round(people_count / 10000, 1) if people_count 0 else 0.0 cleaned.append({ rank: m[rank], title: title, rating: rating, people_wan: people_wan, year: year, genre: mapped_genre, info_line: m[info_line].strip() }) return cleaned cleaned_data clean_movie_data(movies_data) # 保存为JSON供Flask读取避免每次启动都重爬 with open(data/top250_clean.json, w, encodingutf-8) as f: json.dump(cleaned_data, f, ensure_asciiFalse, indent2) print(清洗完成已保存至 data/top250_clean.json)参数说明genre_mapping字典是本项目最关键的业务逻辑之一。豆瓣类型字段极其混乱斜杠/逗号/空格混用中英文夹杂硬编码映射比用NLP模型更可靠、更易调试。people_wan字段直接为Echarts柱状图Y轴提供数值省去前端计算ensure_asciiFalse保证中文正常显示否则Echarts渲染会出方块。3. Flask后端搭建用最少路由暴露结构化数据接口Flask在此项目中只做一件事把清洗好的JSON数据以REST风格接口形式提供给前端Echarts调用。不涉及数据库ORM、用户登录、文件上传等复杂功能。目标是让/api/movies返回全部250条/api/stats返回预计算的统计摘要。3.1 初始化Flask应用与静态资源目录结构项目根目录结构必须清晰避免路径错误导致Echarts加载失败douban-top250-vis/ ├── app.py # Flask主程序 ├── requirements.txt ├── data/ │ └── top250_clean.json # 清洗后的数据由2.2节生成 ├── templates/ │ ├── index.html # 主页含Echarts容器 │ └── base.html # 基础模板含Echarts CDN └── static/ └── css/ └── style.css # 极简样式仅控制容器宽高app.py初始化代码含错误处理from flask import Flask, render_template, jsonify, send_from_directory import json import os app Flask(__name__) app.config[JSON_AS_ASCII] False # 确保中文JSON不转义 # 读取清洗后的数据全局变量启动时加载一次 DATA_FILE os.path.join(data, top250_clean.json) try: with open(DATA_FILE, r, encodingutf-8) as f: MOVIES_DATA json.load(f) print(f✅ 成功加载 {len(MOVIES_DATA)} 条电影数据) except FileNotFoundError: MOVIES_DATA [] print(❌ 数据文件不存在请先运行爬虫脚本生成 data/top250_clean.json) except Exception as e: MOVIES_DATA [] print(f❌ 加载数据失败: {e}) app.route(/) def index(): return render_template(index.html) app.route(/api/movies) def api_movies(): return jsonify(MOVIES_DATA) app.route(/api/stats) def api_stats(): if not MOVIES_DATA: return jsonify({error: No data loaded}), 500 # 预计算统计评分分布、年份分布、类型频次 ratings [m[rating] for m in MOVIES_DATA if m[rating] 0] years [m[year] for m in MOVIES_DATA if m[year]] genres [m[genre] for m in MOVIES_DATA] # 评分分布按0.5分区间分组 rating_bins [0.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0, 7.5, 8.0, 8.5, 9.0, 9.5, 10.0] rating_counts [0] * (len(rating_bins) - 1) for r in ratings: for i in range(len(rating_bins) - 1): if rating_bins[i] r rating_bins[i1]: rating_counts[i] 1 break # 年份分布按十年分组 year_decades {} for y in years: decade (y // 10) * 10 year_decades[decade] year_decades.get(decade, 0) 1 # 类型频次Top 10 genre_counter Counter(genres) top_genres genre_counter.most_common(10) return jsonify({ rating_distribution: { bins: [f{rating_bins[i]}-{rating_bins[i1]} for i in range(len(rating_bins)-1)], counts: rating_counts }, year_distribution: { decades: sorted(year_decades.keys()), counts: [year_decades[d] for d in sorted(year_decades.keys())] }, genre_frequency: { names: [g[0] for g in top_genres], values: [g[1] for g in top_genres] } }) # 静态文件服务用于CSS app.route(/static/path:filename) def static_files(filename): return send_from_directory(static, filename) if __name__ __main__: app.run(debugTrue, host127.0.0.1, port5000)逻辑说明MOVIES_DATA作为全局变量在应用启动时加载避免每次请求都读文件jsonify()自动处理中文编码/api/stats不现场计算而是预聚合极大提升Echarts初始化速度send_from_directory显式声明静态文件路径防止Flask默认规则导致CSS不生效——这是新手部署时最常见的“页面有图没样式”问题根源。3.2 模板引擎注入Echarts用Jinja2传递初始配置templates/base.html是所有页面的基底核心是引入Echarts CDN并预留容器!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title{% block title %}豆瓣TOP250可视化{% endblock %}/title !-- Echarts 5.x CDN国内可用 -- script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script link relstylesheet href{{ url_for(static, filenamecss/style.css) }} /head body header h1 豆瓣电影TOP250数据分析可视化/h1 p基于Python Flask后端 Echarts前端渲染/p /header main {% block content %}{% endblock %} /main footer p数据更新时间{{ now|default(2024-01-01) }} | 源码开源/p /footer /body /htmltemplates/index.html继承base并初始化第一个图表评分分布柱状图{% extends base.html %} {% block title %}首页 - 豆瓣TOP250可视化{% endblock %} {% block content %} div classchart-container h2 评分分布按0.5分区间/h2 div idrating-chart stylewidth: 100%; height: 500px;/div /div script // 1. 初始化Echarts实例 const ratingChart echarts.init(document.getElementById(rating-chart)); // 2. 定义基础配置主题、标题、提示框 const ratingOption { title: { text: TOP250电影评分分布, subtext: 数据来源豆瓣电影TOP250榜单, left: center }, tooltip: { trigger: axis, axisPointer: { type: shadow } }, grid: { left: 3%, right: 4%, bottom: 3%, containLabel: true }, xAxis: { type: category, data: [], // 待API填充 axisTick: { alignWithLabel: true } }, yAxis: { type: value, name: 影片数量, nameLocation: middle, nameGap: 40 }, series: [{ name: 数量, type: bar, data: [], // 待API填充 itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #83bff6 }, { offset: 1, color: #188df0 } ]) } }], // 启用工具箱保存图片、数据视图 toolbox: { feature: { saveAsImage: { show: true, title: 保存为图片 }, dataView: { show: true, title: 数据视图 } } } }; // 3. 从Flask API异步加载数据 fetch(/api/stats) .then(response response.json()) .then(data { // 填充X轴区间标签和Y轴数量 ratingOption.xAxis.data data.rating_distribution.bins; ratingOption.series[0].data data.rating_distribution.counts; // 应用配置 ratingChart.setOption(ratingOption); }) .catch(error { console.error(加载评分数据失败:, error); ratingChart.setOption({ title: { text: 数据加载失败, subtext: 请检查Flask服务是否运行 } }); }); // 4. 自适应窗口大小 window.addEventListener(resize, () { ratingChart.resize(); }); /script {% endblock %}参数说明itemStyle.color使用LinearGradient实现echarts饼图渐变色效果呼应热词“echarts areastyle 渐变色”toolbox.feature.saveAsImage开启右上角下载按钮是用户最需要的实用功能window.addEventListener(resize)确保图表在浏览器缩放时重绘避免“图表挤成一条线”的玄学问题。4. Echarts高级图表实战从柱状图到关系图覆盖TOP250核心分析维度单靠一个柱状图无法体现TOP250的数据深度。本节实现三个进阶图表每个都对应一个真实分析诉求并给出可直接复用的Echarts配置。4.1 年份分布折线图展示电影产出年代趋势echarts折线图x轴刻度需求观察1920s–2020s各年代TOP250入选数量判断经典电影的时间集中性。div classchart-container h2 年代分布趋势按十年分组/h2 div idyear-chart stylewidth: 100%; height: 400px;/div /div script const yearChart echarts.init(document.getElementById(year-chart)); const yearOption { title: { text: TOP250电影年代分布趋势, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: [], // 如 [1920, 1930, ..., 2020] axisLabel: { // 强制x轴刻度为整数避免显示1925.5 formatter: {value}年代 } }, yAxis: { type: value, name: 入选数量 }, series: [{ name: 数量, type: line, data: [], smooth: true, // 折线平滑 symbol: circle, // 节点标记 lineStyle: { width: 3 }, areaStyle: { // 填充区域增强视觉 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: rgba(131, 191, 246, 0.5) }, { offset: 1, color: rgba(24, 141, 240, 0.1) } ]) } }], grid: { left: 5%, right: 5%, bottom: 10% } }; fetch(/api/stats) .then(r r.json()) .then(data { yearOption.xAxis.data data.year_distribution.decades; yearOption.series[0].data data.year_distribution.counts; yearChart.setOption(yearOption); }); /script关键点xAxis.axisLabel.formatter确保刻度显示为“1920年代”而非“1920”这是echarts折线图x轴刻度定制的核心技巧areaStyle配合smooth实现专业级趋势图比纯折线更具表现力。4.2 类型频次环形图揭示TOP250主导类型echarts饼图需求TOP250中哪种类型占比最高是否存在类型垄断div classchart-container h2 类型分布Top 10/h2 div idgenre-chart stylewidth: 100%; height: 500px;/div /div script const genreChart echarts.init(document.getElementById(genre-chart)); const genreOption { title: { text: TOP250电影类型分布, subtext: 前10名, left: center }, tooltip: { trigger: item, formatter: {a} br/{b}: {c} ({d}%) // 显示名称、数量、百分比 }, legend: { orient: vertical, left: left }, series: [{ name: 类型, type: pie, radius: [40%, 70%], // 环形图内圆40%外圆70% avoidLabelOverlap: false, label: { show: false, // 关闭默认标签用视觉引导 position: center }, emphasis: { label: { show: true, fontSize: 16, fontWeight: bold } }, labelLine: { show: false }, data: [] // [{name: 剧情, value: 87}, ...] }] }; fetch(/api/stats) .then(r r.json()) .then(data { const pieData data.genre_frequency.names.map((name, i) ({ name, value: data.genre_frequency.values[i] })); genreOption.series[0].data pieData; genreChart.setOption(genreOption); }); /script避坑提示环形图radius必须是数组单值会报错label.show: false关闭中心文字避免遮挡emphasis.label.show: true实现悬停高亮——这是echarts饼图最实用的交互设计。4.3 评分-年份散点图探索时间与质量的关系echarts中国地图不这里用scatter需求高分电影是否集中在特定年代是否存在“越老越经典”的现象div classchart-container h2 评分 vs 年份散点图/h2 div idscatter-chart stylewidth: 100%; height: 500px;/div /div script const scatterChart echarts.init(document.getElementById(scatter-chart)); const scatterOption { title: { text: 评分与年份关系, left: center }, tooltip: { trigger: item, formatter: {b}br/评分{c}br/年份{a} }, xAxis: { type: value, name: 年份, min: 1920, max: 2025, splitLine: { show: false } }, yAxis: { type: value, name: 评分, min: 8.0, max: 10.0, splitLine: { show: false } }, series: [{ name: 电影, type: scatter, symbolSize: function (val) { // 评分越高点越大半径评分*5 return val[2] * 5; }, data: [], // [[year, rating, people_wan], ...] itemStyle: { color: #c23531 } }] }; // 需要从 /api/movies 获取全量数据非stats fetch(/api/movies) .then(r r.json()) .then(data { // 过滤掉年份或评分为空的条目 const validData data.filter(m m.year m.rating 0); const scatterData validData.map(m [m.year, m.rating, m.people_wan]); scatterOption.series[0].data scatterData; scatterChart.setOption(scatterOption); }); /script参数说明symbolSize函数实现气泡图效果people_wan作为第三维度气泡大小直观体现“高分高热度”电影xAxis.min/max和yAxis.min/max强制坐标轴范围避免个别异常值如1921年《卡里加里博士的小屋》评9.2拉伸整个图表。5. 部署与避坑本地运行零报错的5个血泪经验即使代码完全正确FlaskEcharts项目在本地启动时仍可能因环境、路径、编码问题集体翻车。以下是我在Windows/macOS/Linux三端反复验证的5个高频问题及解决方案。5.1 现象浏览器打开http://127.0.0.1:5000显示空白页控制台报错GET http://127.0.0.1:5000/static/css/style.css net::ERR_ABORTED 404原因Flask未正确识别static目录或url_for(static, ...)路径拼接错误。解决确认项目根目录下存在static/css/style.css哪怕内容为空在app.py中显式注册静态路由见3.1节app.route(/static/path:filename)检查templates/index.html中引用是否为{{ url_for(static, filenamecss/style.css) }}不能写死为/static/css/style.css5.2 现象Echarts图表容器显示“Loading…”后消失控制台报错Uncaught (in promise) TypeError: Cannot read properties of null (reading setOption)原因document.getElementById(xxx)获取的DOM元素为null通常因为HTML中div idxxx未渲染完成或ID拼写错误。解决在script标签前添加div idxxx确保DOM已加载使用window.onload或document.addEventListener(DOMContentLoaded)包裹初始化代码document.addEventListener(DOMContentLoaded, () { const chart echarts.init(document.getElementById(rating-chart)); // ...后续逻辑 });5.3 现象/api/movies返回中文乱码如title: ・肖申克的救赎Echarts显示方块原因Flask默认JSON输出启用ASCII编码或前端未声明UTF-8。解决在app.py顶部添加app.config[JSON_AS_ASCII] False在templates/base.htmlhead中确认有meta charsetUTF-8若仍乱码在fetch请求头中强制指定fetch(/api/movies, { headers: { Accept: application/json; charsetutf-8 } })5.4 现象爬虫脚本运行时报错requests.exceptions.ConnectionError: Max retries exceeded...原因豆瓣临时封禁IP或网络代理干扰尤其公司/校园网。解决立即停止重试等待10分钟再运行修改headers中的User-Agent为不同浏览器标识如Firefox、Safari在requests.get()中增加proxies参数仅限合法代理proxies {http: http://127.0.0.1:10809, https: http://127.0.0.1:10809} response requests.get(url, headersheaders, proxiesproxies, timeout10)注意此处10809仅为示例端口实际需替换为本地HTTP代理端口。若无代理请删除proxies参数。5.5 现象Echarts图表在VS Code Live Server中正常但在flask run下不显示原因Live Server是静态服务器不执行Python后端逻辑Flask是动态服务器但可能被防火墙拦截。解决确认flask run终端无报错且显示* Running on http://127.0.0.1:5000在浏览器地址栏手动输入http://127.0.0.1:5000不要用Live Server的http://127.0.0.1:5500Windows用户若遇“拒绝访问”以管理员身份运行CMD/PowerShell提示所有避坑方案均经实测无需安装额外包。真正的后悔药不是重装Python而是检查print()输出——在app.py的路由函数开头加print(进入/api/movies)能瞬间定位是前端请求未发出还是后端根本没收到。6. 进阶技巧用Echarts关系图挖掘导演-类型关联让可视化产生新洞察TOP250的深层价值不在单维度统计而在关系网络。例如“哪些导演最常拍剧情片”、“犯罪片是否集中在特定年代”。Echarts的关系图graph能将离散数据转化为可交互网络这是本项目最具信息增量的一步。6.1 构建导演-类型二分网络从原始info_line中提取导演info_line字段如“导演: 弗兰克·德拉邦特 主演: 蒂姆·本文还有配套的精品资源点击获取