簡(jiǎn)介基于Python Flask與Echarts插件構(gòu)建的豆瓣電影TOP250數(shù)據(jù)分析可視化網(wǎng)站完整源碼適合有一定Python基礎(chǔ)、希望系統(tǒng)學(xué)習(xí)Flask Web開(kāi)發(fā)與數(shù)據(jù)可視化應(yīng)用的開(kāi)發(fā)者。項(xiàng)目綜合運(yùn)用爬蟲(chóng)采集豆瓣電影數(shù)據(jù)并通過(guò)Echarts生成交互式圖表輔以WordCloud詞云、地圖文件等增強(qiáng)展示效果可作為課程設(shè)計(jì)或畢業(yè)設(shè)計(jì)的參考藍(lán)本。整個(gè)壓縮包共92個(gè)文件主要包含4個(gè)Python腳本、5個(gè)HTML模板、16個(gè)CSS樣式、16個(gè)JavaScript腳本及11個(gè)地圖文件另有圖片、字體、數(shù)據(jù)庫(kù)與配置文件等整體大小9.98MB目錄結(jié)構(gòu)清晰前端靜態(tài)資源與后端邏輯劃分明確。目前已有462人學(xué)習(xí)下載。通過(guò)學(xué)習(xí)這份源碼可掌握基于Flask搭建動(dòng)態(tài)網(wǎng)站、使用Echarts繪制評(píng)分與評(píng)論分布圖表、利用WordCloud分析文本關(guān)鍵詞以及爬蟲(chóng)數(shù)據(jù)入庫(kù)的完整實(shí)現(xiàn)思路便于后續(xù)遷移到其他數(shù)據(jù)分析場(chǎng)景。1. 基于Python Flask與Echarts插件的豆瓣電影TOP250數(shù)據(jù)分析可視化網(wǎng)站從小工具到完整項(xiàng)目你是不是也有過(guò)這種經(jīng)歷想研究豆瓣TOP250到底被哪些年份、哪些地區(qū)的電影霸榜手動(dòng)一頁(yè)頁(yè)翻網(wǎng)頁(yè)、復(fù)制表格到Excel折騰一晚上只得到一份亂七八糟的數(shù)據(jù)。這正是我做這個(gè)項(xiàng)目的起點(diǎn)——與其人工扒數(shù)據(jù)不如寫一個(gè)把抓取、存儲(chǔ)、分析和可視化串起來(lái)的小網(wǎng)站?；赑ython Flask與Echarts插件的豆瓣電影TOP250數(shù)據(jù)分析可視化網(wǎng)站本質(zhì)上就是一條完整的數(shù)據(jù)流水線requests抓頁(yè)面BeautifulSoup解析SQLite存數(shù)據(jù)Flask提供后端接口和頁(yè)面渲染Echarts在瀏覽器里畫出柱狀圖、餅圖和排行表。這套方案不挑機(jī)器、不挑系統(tǒng)Windows和Mac都能跑適合剛學(xué)完P(guān)ython基礎(chǔ)想做一個(gè)能拿得出手的“數(shù)據(jù)類項(xiàng)目”的人也適合已經(jīng)在做爬蟲(chóng)但想補(bǔ)上可視化這一環(huán)的開(kāi)發(fā)者。2. 先把數(shù)據(jù)抓到本地豆瓣TOP250的頁(yè)面解析與字段清洗2.1 目標(biāo)數(shù)據(jù)長(zhǎng)什么樣列表頁(yè)結(jié)構(gòu)、翻頁(yè)規(guī)律與字段清單豆瓣TOP250的列表頁(yè)是出了名的簡(jiǎn)單規(guī)整每頁(yè)固定25條電影一共10頁(yè)。它的翻頁(yè)參數(shù)就是URL里的start從0開(kāi)始步長(zhǎng)25也就是說(shuō)第1頁(yè)是start0第2頁(yè)是start25一直到最后start225。每個(gè)電影條目被包裹在ol.grid_view列表的li.item節(jié)點(diǎn)里你要的信息基本都在這個(gè)節(jié)點(diǎn)內(nèi)部。我一般會(huì)先打開(kāi)頁(yè)面源碼確認(rèn)字段節(jié)點(diǎn)而不是憑經(jīng)驗(yàn)寫死選擇器。每個(gè)li.item里能拿到的字段包括排名em標(biāo)簽、片名span.title、導(dǎo)演和主演p里的第一行文本以換行分隔、年份和地區(qū)同一段p里的第二行、評(píng)分span.rating_num、評(píng)價(jià)人數(shù)span.pl、一句話短評(píng)span.inq。這些字段的結(jié)構(gòu)經(jīng)年累月基本穩(wěn)定但文字排版偶爾會(huì)變化所以清洗邏輯一定要寫得抗造。字段解析節(jié)點(diǎn)清洗后格式備注排名li.item div.pic em整數(shù)全局唯一可作主鍵片名span.title第一個(gè)字符串中文名別名不要導(dǎo)演/主演p第一行文本按/拆分字符串取第一位可得到導(dǎo)演年份p第二行文本正則提取四位整數(shù)如“1994”地區(qū)p第二行文本按/拆分字符串可能多地區(qū)取第一個(gè)評(píng)分span.rating_num浮點(diǎn)數(shù)保留一位小數(shù)評(píng)價(jià)人數(shù)span.pl去括號(hào)整數(shù)常見(jiàn)寫法“1513423人評(píng)價(jià)”短評(píng)span.inq字符串有的片子沒(méi)有需判空2.2 抓取腳本requests加BeautifulSoup的最小實(shí)現(xiàn)爬蟲(chóng)這部分我習(xí)慣用requests做HTTP請(qǐng)求BeautifulSoup做頁(yè)面解析而不是直接用Scrapy。原因很簡(jiǎn)單總共只有10個(gè)頁(yè)面不需要調(diào)度器、中間件那一套重武器單文件腳本足夠清爽出了問(wèn)題也好定位。下面這個(gè)腳本就是整個(gè)項(xiàng)目的“數(shù)據(jù)入口”。import requests import time from bs4 import BeautifulSoup 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 } def fetch_page(start): 抓取單個(gè)列表頁(yè)返回解析后的電影字典列表 url fhttps://movie.douban.com/top250?start{start}filter resp requests.get(url, headersHEADERS, timeout10) resp.raise_for_status() soup BeautifulSoup(resp.text, html.parser) movies [] for item in soup.select(ol.grid_view li.item): # 節(jié)點(diǎn)缺失時(shí)用 try 兜底避免整頁(yè)解析中斷 rank int(item.select_one(div.pic em).get_text()) title item.select_one(span.title).get_text() rating float(item.select_one(span.rating_num).get_text()) quote_node item.select_one(span.inq) quote quote_node.get_text() if quote_node else info_lines item.select_one(div.bd p).get_text(\n, stripTrue).split(\n) # info_lines[0] 是導(dǎo)演/主演info_lines[1] 是年份/地區(qū)/類型 year_line info_lines[1] if len(info_lines) 1 else movies.append({ rank: rank, title: title, rating: rating, quote: quote, year_raw: year_line, }) return movies def main(): all_movies [] for start in range(0, 250, 25): all_movies.extend(fetch_page(start)) time.sleep(1) # 控制請(qǐng)求頻率降低被封概率 # 后續(xù)把 all_movies 寫入數(shù)據(jù)文件見(jiàn)下一節(jié) print(f共抓到 {len(all_movies)} 條)我特意用select_one而不是find因?yàn)閟elect_one配合CSS選擇器寫起來(lái)更像寫選擇器而且天然返回單個(gè)節(jié)點(diǎn)或None適合判空。resp.raise_for_status()的作用是狀態(tài)碼非200時(shí)直接拋異常避免拿到錯(cuò)誤頁(yè)面還繼續(xù)解析造成假數(shù)據(jù)。time.sleep(1)在本地抓250條時(shí)不算慢但對(duì)豆瓣這種有反爬機(jī)制的站點(diǎn)來(lái)說(shuō)這個(gè)間隔是保命的。2.3 數(shù)據(jù)清洗與落地年份、地區(qū)、評(píng)分區(qū)間怎么處理抓下來(lái)的year_raw是類似“1994 / 美國(guó) / 犯罪 劇情”這種混合文本不能直接用。我通常用正則提取年份再按分隔符拆分地區(qū)和類型最后把結(jié)果規(guī)整成一行一條的結(jié)構(gòu)化數(shù)據(jù)。清洗邏輯放在解析函數(shù)之后、入庫(kù)之前單獨(dú)寫一個(gè)函數(shù)方便后續(xù)換了數(shù)據(jù)源還能復(fù)用。import re def clean_movie(movie): 從原始字段里提取年份和地區(qū)補(bǔ)全結(jié)構(gòu)化字段 raw movie.pop(year_raw, ) parts [p.strip() for p in raw.split(/) if p.strip()] year None region 未知 for part in parts: # 年份優(yōu)先匹配四位數(shù)字 m re.search(r(\d{4}), part) if m: year int(m.group(1)) continue # 非年份且非類型詞視為地區(qū) if part not in (劇情, 喜劇, 動(dòng)作, 愛(ài)情, 科幻, 動(dòng)畫, 懸疑, 犯罪, 冒險(xiǎn), 奇幻, 驚悚, 恐怖, 紀(jì)錄片, 音樂(lè), 歌舞, 戰(zhàn)爭(zhēng), 歷史, 傳記, 運(yùn)動(dòng)): region part movie[year] year movie[region] region return movie注意這里的類型詞表是我按TOP250常出現(xiàn)的類型整理出來(lái)的實(shí)際拿到的頁(yè)面數(shù)據(jù)如果有新的類型詞就會(huì)誤判成地區(qū)。這是小型爬蟲(chóng)項(xiàng)目里典型的“硬編碼字典風(fēng)險(xiǎn)”代碼夠用但不完美遇到漏網(wǎng)之魚時(shí)只需要往集合里補(bǔ)詞。清洗后的數(shù)據(jù)我一般存成兩路一是movies.json方便調(diào)試時(shí)直接看二是SQLite數(shù)據(jù)庫(kù)供Flask后端查詢下一章會(huì)用到。寫入JSON時(shí)別忘了一個(gè)關(guān)鍵參數(shù)with open(movies.json, w, encodingutf-8) as f: json.dump(all_movies, f, ensure_asciiFalse, indent2)ensure_asciiFalse必須加否則中文片名和地區(qū)全部會(huì)變成\u4f60這種轉(zhuǎn)義序列打開(kāi)文件根本沒(méi)法看。這一步我在早期項(xiàng)目里翻過(guò)車當(dāng)時(shí)還以為是爬蟲(chóng)解析出了問(wèn)題排查了半天才發(fā)現(xiàn)是序列化參數(shù)沒(méi)設(shè)對(duì)。3. Flask后端與API設(shè)計(jì)動(dòng)態(tài)頁(yè)面渲染和數(shù)據(jù)接口兩條路線3.1 為什么選Flask而不選FastAPI輕量、模板生態(tài)和上手成本做這種規(guī)模的個(gè)人項(xiàng)目Flask和FastAPI其實(shí)都能勝任但它們的氣質(zhì)完全不同。FastAPI的異步支持、自動(dòng)OpenAPI文檔和Pydantic校驗(yàn)都很現(xiàn)代適合前后端分離、接口文檔需求明確的生產(chǎn)級(jí)應(yīng)用。但我的場(chǎng)景是單機(jī)自用、帶頁(yè)面模板、需要快速跑起來(lái)Flask的render_template配合Jinja2模板直接一個(gè)函數(shù)出頁(yè)面省掉了“前端單獨(dú)部署”這一步。更重要的一點(diǎn)是Flask的資料和踩坑記錄遍地都是新手遇到問(wèn)題很容易搜到同款報(bào)錯(cuò)。如果有朝一日項(xiàng)目要加實(shí)時(shí)推送、要做高并發(fā)接口那時(shí)候再遷移到FastAPI也不遲那是“數(shù)據(jù)量真大了”的問(wèn)題不是“還沒(méi)跑起來(lái)”的問(wèn)題。做這個(gè)TOP250項(xiàng)目我不建議在框架選型上過(guò)度糾結(jié)先跑通再優(yōu)化比什么都強(qiáng)。3.2 源碼工程的目錄結(jié)構(gòu)一個(gè)Flask應(yīng)用的標(biāo)準(zhǔn)打開(kāi)方式拿到這類“設(shè)計(jì)源碼”時(shí)最常見(jiàn)的目錄組織方式是這樣的不管源碼作者怎么命名核心就這幾個(gè)部分project_root/ ├── app.py # Flask主程序路由和API都在這 ├── spider.py # 爬蟲(chóng)腳本獨(dú)立運(yùn)行 ├── data/ │ ├── movies.json # 爬蟲(chóng)輸出的原始數(shù)據(jù) │ └── movies.db # SQLite數(shù)據(jù)庫(kù) ├── templates/ │ └── index.html # Echarts圖表容器頁(yè)面 └── static/ ├── echarts.min.js # Echarts庫(kù)文件本地引入 └── style.css # 頁(yè)面樣式app.py和spider.py分開(kāi)寫是因?yàn)榕老x(chóng)部分和網(wǎng)站服務(wù)部分是兩條生命周期爬蟲(chóng)是“偶爾跑一次”的采集任務(wù)而Flask應(yīng)用是“持續(xù)掛著”的服務(wù)。如果把兩者寫進(jìn)同一個(gè)文件每次啟動(dòng)網(wǎng)站都會(huì)執(zhí)行一遍爬蟲(chóng)邏輯既慢又容易觸發(fā)反爬。templates和static是Flask約定的目錄名不要改動(dòng)否則框架找不到文件。3.3 兩條渲染路線render_template服務(wù)端渲染與/api接口前端取數(shù)Flask寫頁(yè)面有兩條路。一條是服務(wù)端渲染在app.py里讀數(shù)據(jù)庫(kù)把數(shù)據(jù)整理成列表或字典直接傳給模板模板里的Jinja2語(yǔ)法把它嵌入頁(yè)面。另一條是API取數(shù)后端只提供JSON接口前端頁(yè)面加載后用JavaScript的fetch去拿數(shù)據(jù)再由Echarts把數(shù)據(jù)畫成圖表。我在這類項(xiàng)目里的經(jīng)驗(yàn)是靜態(tài)頁(yè)面上做模板渲染沒(méi)問(wèn)題但圖表數(shù)據(jù)一定要走API接口。原因是Echarts的setOption需要接收一個(gè)JavaScript對(duì)象服務(wù)端渲染出來(lái)的數(shù)據(jù)要先塞進(jìn)tojson過(guò)濾器再交給前端形態(tài)別扭而API天然返回JSON前端拿過(guò)來(lái)直接用代碼心智負(fù)擔(dān)小得多。from flask import Flask, render_template, jsonify, g import sqlite3 app Flask(__name__) DB_PATH data/movies.db def query_db(sql, args()): conn sqlite3.connect(DB_PATH) conn.row_factory sqlite3.Row cur conn.execute(sql, args) rows cur.fetchall() conn.close() return rows app.route(/) def index(): # 頁(yè)面首次訪問(wèn)時(shí)渲染空殼圖表由前端JS拉取數(shù)據(jù)后繪制 return render_template(index.html) app.route(/api/year-distribution) def year_distribution(): 按年份統(tǒng)計(jì)電影數(shù)量返回柱狀圖數(shù)據(jù) rows query_db( SELECT year, COUNT(*) AS cnt FROM movies WHERE year IS NOT NULL GROUP BY year ORDER BY year ) return jsonify([{year: r[year], count: r[cnt]} for r in rows]) app.route(/api/rating-distribution) def rating_distribution(): 按評(píng)分區(qū)間統(tǒng)計(jì)電影數(shù)量返回餅圖數(shù)據(jù) rows query_db(SELECT rating FROM movies) buckets {9分以上: 0, 8.5-9分: 0, 8-8.5分: 0, 8分以下: 0} for r in rows: rating r[rating] if rating 9: buckets[9分以上] 1 elif rating 8.5: buckets[8.5-9分] 1 elif rating 8: buckets[8-8.5分] 1 else: buckets[8分以下] 1 return jsonify([{name: k, value: v} for k, v in buckets.items()])要注意jsonify在Flask里會(huì)自動(dòng)把響應(yīng)Content-Type設(shè)成application/json前端fetch拿到的res.json()可以直接解析不需要額外處理編碼。sqlite3.Row的作用是讓查出來(lái)的每一行能通過(guò)r[year]這種字典式訪問(wèn)拿值比默認(rèn)的元組形式可讀性強(qiáng)很多。我在query_db里每次查詢都新建連接項(xiàng)目規(guī)模小所以無(wú)所謂如果數(shù)據(jù)量大到上百M(fèi)B你再考慮連接池也不遲。3.4 中文編碼、JSON序列化與排序的邊界問(wèn)題Flask的jsonify在返回中文時(shí)不需要擔(dān)心亂碼框架默認(rèn)會(huì)處理UTF-8編碼。真正會(huì)翻車的點(diǎn)是如果你不用jsonify而是手動(dòng)json.dumps一定要帶上ensure_asciiFalse否則你辛辛苦苦抓來(lái)的“肖申克的救贖”就變成了\u8096瀏覽器里展示出來(lái)的就是一串亂碼。另外還有一個(gè)排序問(wèn)題。jsonify默認(rèn)按字典的Key排序輸出也就是count會(huì)跑到y(tǒng)ear前面。這也就算了關(guān)鍵是某些Echarts配置對(duì)數(shù)據(jù)順序敏感比如年份柱狀圖橫軸期望按年份升序排如果后端沒(méi)加ORDER BY year圖表上的柱子順序就會(huì)是亂的。我一般會(huì)在SQL層就把排序做掉別指望前端再去排序——減少一個(gè)出錯(cuò)環(huán)節(jié)就少一次排查。4. Echarts圖表怎么接從后端JSON到柱狀圖、餅圖與排行的完整配置4.1 引入方式本地靜態(tài)文件優(yōu)先CDN不是不可以但要有備選Echarts的引入方式直接決定項(xiàng)目在無(wú)外網(wǎng)環(huán)境還能不能跑。用bootcdn或jsdelivr的CDN地址確實(shí)省事但這類個(gè)人項(xiàng)目經(jīng)常要拿到別人的電腦上演示對(duì)方一旦沒(méi)聯(lián)網(wǎng)或者CDN被解析異常頁(yè)面就是一片空白。我的慣例是把echarts.min.js下載后放進(jìn)static/目錄用本地路徑引用。代價(jià)是工程目錄里多一個(gè)約1MB的靜態(tài)文件換來(lái)的卻是絕對(duì)的可移植性。4.2 頁(yè)面骨架與基礎(chǔ)配置容器高度、寬度與初始化時(shí)序Echarts圖表不渲染十次有九次是容器高度為0。div默認(rèn)高度由內(nèi)容撐開(kāi)而Echarts的init方法要求容器必須有明確的寬高。所以頁(yè)面里每個(gè)圖表容器都要顯式指定高度哪怕是一行styleheight:400px也比不給強(qiáng)。!doctype html html langzh-cn head meta charsetutf-8 title豆瓣電影TOP250數(shù)據(jù)分析/title script src{{ url_for(static, filenameecharts.min.js) }}/script style .chart { width: 90%; height: 420px; margin: 20px auto; } .chart-row { display: flex; gap: 16px; } .chart-row .chart { flex: 1; } /style /head body h2豆瓣電影TOP250 · 可視化看板/h2 div idyearChart classchart/div div classchart-row div idratingChart classchart/div div idregionChart classchart/div /div script src{{ url_for(static, filenamemain.js) }}/script /body /html這里有個(gè)值得注意的細(xì)節(jié)main.js必須放在/body之前而不是head里。因?yàn)閳D表初始化需要DOM節(jié)點(diǎn)已經(jīng)存在腳本放前面會(huì)找不到y(tǒng)earChart這個(gè)id。如果你非要放頭部那就得包一層window.onload或DOMContentLoaded沒(méi)必要。模板里的url_for(static, filename...)是Flask的標(biāo)準(zhǔn)靜態(tài)資源路徑生成方式換成寫死的/static/...也能用但前者在項(xiàng)目換目錄部署時(shí)不用改代碼。4.3 年份分布柱狀圖坐標(biāo)軸、標(biāo)簽旋轉(zhuǎn)與漸變色柱狀圖是這個(gè)項(xiàng)目里信息量最大的圖表橫軸是年份1980到2024縱軸是該年份入圍的電影數(shù)量。年份跨度大橫軸標(biāo)簽如果不做處理每根柱子下面擠滿數(shù)字根本看不清。我一般會(huì)把a(bǔ)xisLabel的rotate設(shè)為45并開(kāi)啟interval自動(dòng)抽稀讓Echarts自己決定每幾個(gè)年份顯示一個(gè)標(biāo)簽。另外可以做一個(gè)隱藏的細(xì)節(jié)優(yōu)化用itemStyle.color配合linearGradient做漸變色柱體視覺(jué)上會(huì)更有“數(shù)據(jù)看板”的氣質(zhì)。// 這個(gè)文件是 static/main.js fetch(/api/year-distribution) .then(res res.json()) .then(data { const chart echarts.init(document.getElementById(yearChart)); chart.setOption({ title: { text: 豆瓣TOP250電影年份分布, left: center }, tooltip: { trigger: axis }, grid: { left: 50, right: 20, bottom: 60 }, xAxis: { type: category, data: data.map(item item.year), axisLabel: { rotate: 45, interval: auto } }, yAxis: { type: value, name: 影片數(shù)量 }, series: [{ type: bar, data: data.map(item item.count), itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #ff6b35 }, { offset: 1, color: #ffd166 } ]) }, barMaxWidth: 30 }] }); }) .catch(err console.error(年份數(shù)據(jù)加載失敗, err));這段配置里grid的bottom留了60像素不是隨手寫的——因?yàn)閞otate:45后的年份標(biāo)簽會(huì)向下探出40到50像素底部空間不夠的話標(biāo)簽會(huì)被裁掉。barMaxWidth:30是為了防止某個(gè)年份數(shù)量特別大時(shí)單根柱子過(guò)寬把其他年份擠得顯示不下。這些都是實(shí)踐里一點(diǎn)一點(diǎn)試出來(lái)的參數(shù)先抄下來(lái)用后面再按自己的審美微調(diào)。4.4 評(píng)分分布環(huán)形圖餅圖中間的文字和顏色列表評(píng)分分布的餅圖適合用環(huán)形圖展示視覺(jué)上比實(shí)心餅圖輕巧。Echarts里只需要在series里加一個(gè)radius: [40%, 70%]內(nèi)徑外徑一設(shè)餅圖就變成了環(huán)。環(huán)中間默認(rèn)是空的很多人想在那里放一個(gè)總數(shù)這就涉及一個(gè)常見(jiàn)問(wèn)題——餅圖中間的字怎么加。做法是在series平級(jí)的位置添一個(gè)graphic組件用text元素定位到畫布中心。fetch(/api/rating-distribution) .then(res res.json()) .then(data { const chart echarts.init(document.getElementById(ratingChart)); const total data.reduce((sum, item) sum item.value, 0); chart.setOption({ title: { text: 評(píng)分區(qū)間分布, left: center }, tooltip: { trigger: item }, legend: { orient: vertical, right: 10, top: middle }, series: [{ type: pie, radius: [40%, 70%], data: data, label: { show: false }, color: [#5470c6, #fac858, #ee6666, #73c0de] }], graphic: [{ type: text, left: center, top: 45%, style: { text: 總計(jì)\n${total} 部, textAlign: center, fontSize: 18, fontWeight: bold } }] }); });graphic組件是Echarts里容易被忽略但很好用的能力它能在canvas上疊加任意圖形或文字而且不參與圖表的數(shù)據(jù)體系。設(shè)置left:center和top:45%時(shí)Echarts會(huì)自動(dòng)換算成百分比坐標(biāo)效果大致是文字垂直居中于環(huán)形區(qū)域。color數(shù)組的順序?qū)?yīng)data數(shù)組的順序注意餅圖扇區(qū)的默認(rèn)排序會(huì)把數(shù)據(jù)從大到小排顏色可能和你預(yù)期的分組順序?qū)Σ簧先绻Ｍ伾珖?yán)格對(duì)應(yīng)可以在series里加sort: (a, b) a.value - b.value控制。4.5 地區(qū)分布橫向條形圖解決國(guó)家名過(guò)長(zhǎng)的問(wèn)題地區(qū)分布我習(xí)慣用橫向條形圖而不是縱向柱狀圖。原因是有些地區(qū)名稱很長(zhǎng)“中國(guó)大陸 / 中國(guó)香港”這種組合在縱向柱狀圖的橫軸下面會(huì)被壓縮成斜著的省略號(hào)根本讀不出來(lái)。橫向條形圖的Y軸天然適合放長(zhǎng)文本。實(shí)現(xiàn)上只需要把xAxis和yAxis對(duì)調(diào)series類型仍然是bar。這個(gè)圖表的接口/api/region-distribution在上一章沒(méi)寫你可以照著year-distribution的寫法自己補(bǔ)一個(gè)核心就是GROUP BY region ORDER BY cnt DESC LIMIT 10重點(diǎn)在前十名地區(qū)后面的地區(qū)數(shù)量少畫出來(lái)沒(méi)意義。圖的渲染順序也值得注意頁(yè)面上一共有三個(gè)圖表三個(gè)fetch是并行發(fā)出的互不等待。如果某個(gè)接口偶發(fā)超時(shí)對(duì)應(yīng)圖表會(huì)保持空白而其他圖表正常渲染。這不是框架問(wèn)題是異步加載的正常表現(xiàn)。如果你希望“要么全出要么給個(gè)錯(cuò)誤提示”可以用Promise.all統(tǒng)一加載但那通常不是必要優(yōu)化。5. 常見(jiàn)坑與排查編碼、反爬、圖表白屏的四個(gè)血淚現(xiàn)場(chǎng)5.1 豆瓣返回418或403不是代碼寫錯(cuò)了是請(qǐng)求太像爬蟲(chóng)現(xiàn)象爬蟲(chóng)第一次運(yùn)行能抓到幾十條多跑幾次后resp.status_code變成403或者418頁(yè)面內(nèi)容變成了“請(qǐng)求過(guò)于頻繁”的驗(yàn)證頁(yè)面。原因豆瓣的反爬機(jī)制識(shí)別到了高頻請(qǐng)求特征封禁了當(dāng)前IP的訪問(wèn)權(quán)限。你做了UA偽裝但沒(méi)做頻率控制或者前幾次請(qǐng)求間隔太短被封是必然的。解決把請(qǐng)求間隔從time.sleep(0.5)拉長(zhǎng)到time.sleep(2)到time.sleep(3)并給請(qǐng)求頭里的Accept-Language和Referer都補(bǔ)上。如果你想穩(wěn)妥一點(diǎn)可以加一個(gè)簡(jiǎn)單的重試邏輯狀態(tài)碼非200時(shí)等5秒重試一次最多重試3次。爬蟲(chóng)這東西不是越快越好慢就是快。5.2 JSON文件里全是\uXXXX轉(zhuǎn)義看著像亂碼其實(shí)是沒(méi)設(shè)ensure_ascii現(xiàn)象打開(kāi)movies.json中文電影名全是\u8096\u514b\u7684\u6551\u8d4e但程序能正常讀取頁(yè)面也能輸出正常中文。原因json.dump沒(méi)有指定ensure_asciiFalse默認(rèn)把所有非ASCII字符轉(zhuǎn)義成了Unicode編碼。這個(gè)現(xiàn)象只在json.dump和json.dumps里出現(xiàn)寫到SQLite里的數(shù)據(jù)不受影響。解決寫入時(shí)統(tǒng)一加ensure_asciiFalse, encodingutf-8再檢查一遍打開(kāi)文件是否正常。這個(gè)坑我在不止一個(gè)項(xiàng)目里見(jiàn)過(guò)包括有些網(wǎng)上的源碼包本身就沒(méi)處理你拿到手覺(jué)得“怎么全是亂碼”其實(shí)不是數(shù)據(jù)壞了。5.3 圖表白屏但接口正常容器高度為0或初始化時(shí)序不對(duì)現(xiàn)象瀏覽器控制臺(tái)沒(méi)有任何報(bào)錯(cuò)fetch能拿到數(shù)據(jù)console.log(data)也能打印出數(shù)組但頁(yè)面上圖表區(qū)域就是一片空白。原因兩種可能一是容器的CSS高度沒(méi)有設(shè)置div的默認(rèn)高度是0二是echarts.init執(zhí)行時(shí)DOM節(jié)點(diǎn)還沒(méi)渲染完成。前者最常見(jiàn)后者發(fā)生在你把main.js放在了head里。解決給每個(gè)圖表容器加styleheight:420px這種顯式高度把main.js的script標(biāo)簽移到body底部。如果改完還白屏打開(kāi)開(kāi)發(fā)者工具在Elements面板里看容器元素的計(jì)算樣式height是不是有值——這一步能定位90%的白屏問(wèn)題。5.4 分析數(shù)據(jù)比豆瓣頁(yè)面少了十幾條頁(yè)面結(jié)構(gòu)微調(diào)導(dǎo)致解析漏掉節(jié)點(diǎn)現(xiàn)象網(wǎng)頁(yè)上明明250條程序抓完只有235條少的主要集中在某些特定年份。原因個(gè)別列表項(xiàng)里的span.inq不存在沒(méi)有一句話短評(píng)或者p文本里的換行符數(shù)量不一致導(dǎo)致info_lines[1]索引越界整條被continue跳過(guò)了。這是典型的“解析邏輯容錯(cuò)性差”。解決把每個(gè)字段的解析都獨(dú)立判空解析失敗時(shí)該字段置為None而不是跳過(guò)整條記錄。另外可以在清洗前打印一下len(movies)對(duì)比頁(yè)面總數(shù)抓少了就檢查是不是某類節(jié)點(diǎn)結(jié)構(gòu)變了。這種問(wèn)題沒(méi)有什么一勞永逸的解法因?yàn)槎拱昵岸伺紶柛陌婺愕慕馕龃a需要具備“一個(gè)字段拿不到不影響其他字段”的彈性。5.5 Flask應(yīng)用啟動(dòng)后頁(yè)面能開(kāi)但樣式全亂靜態(tài)文件路徑被硬編碼現(xiàn)象本地開(kāi)發(fā)時(shí)一切正常把整個(gè)目錄放到服務(wù)器或者別人的電腦上頁(yè)面HTML出來(lái)了但圖表和CSS都加載不出來(lái)。原因模板里寫了絕對(duì)路徑/static/echarts.min.js而不是用url_for(static, filename...)生成。Flask的static路徑在開(kāi)發(fā)服務(wù)器、gunicorn、nginx反代三種場(chǎng)景下前綴可能會(huì)有差異硬編碼路徑是最脆弱的寫法。解決模板里統(tǒng)一用{{ url_for(static, filenameecharts.min.js) }}。這個(gè)函數(shù)會(huì)根據(jù)Flask的配置自動(dòng)生成正確路徑項(xiàng)目挪位置、加前綴都不需要改頁(yè)面代碼。同理API請(qǐng)求地址也盡量用相對(duì)路徑/api/year-distribution不要在JavaScript里寫死http://localhost:5000。6. 再往前走一步從單頁(yè)圖表到部署上線與自動(dòng)更新項(xiàng)目跑通只是起點(diǎn)到這個(gè)階段你應(yīng)該已經(jīng)有一份完整可運(yùn)行的代碼但我建議你再往前走三步把項(xiàng)目從“能跑”變成“有用”。第一步是部署。Flask自帶的開(kāi)發(fā)服務(wù)器只適合調(diào)試真正對(duì)外提供服務(wù)時(shí)我習(xí)慣用gunicorn做WSGI容器一條命令搞定gunicorn -w 4 -b 0.0.0.0:8000 app:app。注意-w的進(jìn)程數(shù)和服務(wù)器CPU核數(shù)相關(guān)不是越多越好4核機(jī)器開(kāi)4個(gè)worker是常見(jiàn)起步配置。部署后如果遇到靜態(tài)文件404優(yōu)先檢查app.secret_key和static_folder這些配置項(xiàng)多數(shù)問(wèn)題都出在這。第二步是數(shù)據(jù)更新自動(dòng)化。TOP250榜單不是一成不變的新片入圍、老片退出都是常態(tài)。我給爬蟲(chóng)加了一個(gè)“冪等更新”邏輯按rank字段作為唯一鍵重復(fù)抓取時(shí)先刪后插保證數(shù)據(jù)庫(kù)里永遠(yuǎn)是當(dāng)前最新榜單。配合系統(tǒng)的cron或Windows的任務(wù)計(jì)劃程序每月自動(dòng)跑一次spider.py數(shù)據(jù)就永遠(yuǎn)是新鮮的。第三步是圖表交互深度?，F(xiàn)在的三個(gè)圖表是彼此孤立的進(jìn)階一點(diǎn)的做法是加一個(gè)click事件——點(diǎn)擊年份柱狀圖里的某根柱子右側(cè)的排行榜表格就只顯示該年份的電影。Echarts的chart.on(click, params ...)可以拿到柱子對(duì)應(yīng)的params.name然后帶著這個(gè)參數(shù)重新請(qǐng)求一個(gè)/api/movies?year1994接口就能實(shí)現(xiàn)真正的聯(lián)動(dòng)。這一步做完這個(gè)項(xiàng)目就不再是一個(gè)“展示頁(yè)”而是一個(gè)可交互的分析工具。我在自己折騰這類項(xiàng)目的過(guò)程中最大的教訓(xùn)是別急著寫代碼。先把數(shù)據(jù)字段確認(rèn)清楚、把目錄結(jié)構(gòu)想明白、把接口路徑定下來(lái)后面每一步都會(huì)很順。反過(guò)來(lái)一上來(lái)就寫頁(yè)面、寫圖表最后經(jīng)常因?yàn)閿?shù)據(jù)格式對(duì)不上反復(fù)重構(gòu)那種返工才是最費(fèi)時(shí)間的。這套方案我前后整理過(guò)好幾個(gè)版本從最早的純表格展示到后來(lái)的多圖表聯(lián)動(dòng)再到現(xiàn)在的自動(dòng)更新部署每一步都是被真實(shí)需求推著走的。希望這套基于Python Flask與Echarts插件的豆瓣電影TOP250數(shù)據(jù)分析可視化網(wǎng)站設(shè)計(jì)能幫你少走幾步彎路早點(diǎn)把自己想看的數(shù)畫出來(lái)。本文還有配套的精品資源點(diǎn)擊獲取