簡介一份基于Django框架的城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析源碼面向Python學習者和高校課程設(shè)計場景完整涵蓋數(shù)據(jù)采集、存儲、后端處理與前端展示流程。壓縮包共64個文件主要包含17個Python代碼文件、24個CSV數(shù)據(jù)文件、HTML頁面模板及SQL數(shù)據(jù)庫腳本等整體大小12.38MB目錄結(jié)構(gòu)清晰易于直接運行和二次開發(fā)。目前已有328人學習下載。項目以上海、北京、廣州、成都、沈陽五城市六年P(guān)M2.5匯總數(shù)據(jù)為基礎(chǔ)實現(xiàn)時間序列逐年趨勢、不同季度/月/時段變化以及與溫度、露點、相對濕度、風向、大氣壓等要素的關(guān)系可視化同時附帶Django項目配置、登錄注冊模板和MySQL數(shù)據(jù)庫文件可幫助初學者理解數(shù)據(jù)分析與可視化項目的完整搭建方式。該源碼系個人高分大作業(yè)作品代碼完整可直接部署適合用于期末設(shè)計、課程報告或?qū)崙?zhàn)練手。1. 城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析這個課程設(shè)計方案為什么值得自己重寫一遍把「Python基于Django城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析」和「95分以上」放在一起基本就是高校課程設(shè)計或畢業(yè)設(shè)計里最常見的一類選題后端用Django把數(shù)據(jù)管起來前端用圖表把數(shù)據(jù)亮出來再配上一點“分析”的味道。這套系統(tǒng)真正解決的訴求很簡單——讓一份零散的PM2.5數(shù)據(jù)集變成能答辯、能演示、能講清楚技術(shù)鏈路的完整項目。它適合正在做Django項目實戰(zhàn)的新手也適合想快速搭一個數(shù)據(jù)可視化Demo、又不想被前端框架拖住的人。我見過不少學生拿到這類源碼包后改不動、答不上來問題往往不在代碼本身而在沒搞懂數(shù)據(jù)是怎么從CSV一路流到圖表的。這篇文章就把這條鏈路完整拆開照著做你也能交出一份能站在講臺上講明白的方案。2. PythonDjango的MVT骨架為什么課程設(shè)計首選Django而不是Flask2.1 Django自帶的那套東西恰好覆蓋了課程設(shè)計的全部得分點城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析這類項目評審老師真正會看的就三件事數(shù)據(jù)能不能存進去、頁面能不能跑起來、圖表能不能跟著數(shù)據(jù)走。Django的MVT架構(gòu)Model-View-Template幾乎是沖著這三點設(shè)計的Model層用ORM管數(shù)據(jù)庫View層寫業(yè)務邏輯Template層渲染頁面。你不需要像Flask那樣自己拼ORM、自己接模板引擎、自己做后臺管理Django默認全部配好。這里有一個很實際的選型理由Django的Admin后臺是白送的。數(shù)據(jù)導進去之后Admin里能直接看到每一行記錄、能按城市篩、能按日期排序這等于讓你在答辯前多了一個“數(shù)據(jù)管理”的展示頁而且一行代碼不用寫。Flask做不到這一點你要么裝Flask-Admin要么自己寫一個管理頁面工作量直接翻倍。對一門課程設(shè)計來說時間成本是很真實的成本。版本選擇上課程設(shè)計我一般建議用Django 3.2 LTS而不是最新的4.x或5.x。原因很簡單3.2是長期支持版網(wǎng)上的教程、博客、還有你同學已經(jīng)踩過的坑絕大多數(shù)都集中在這個版本。4.x以后刪掉了一些舊寫法比如url()函數(shù)、django.conf.urls里的include用法新手照著老教程抄很容易當場翻車。如果老師沒硬性要求新版就選3.2穩(wěn)。當然如果你已經(jīng)裝了新版也沒關(guān)系第5章會講版本差異導致的典型報錯怎么處理。2.2 圖表選型為什么我不用pyecharts而是直接寫ECharts數(shù)據(jù)可視化是這類項目的門面選錯圖表庫是最致命的。市面上常見的方案有四類我用一個對比表說清楚方案適合場景動態(tài)交互新手友好度答辯風險ECharts原生JavaScriptWeb頁面圖表強setOption增量更新中需要寫一點JS低數(shù)據(jù)傳遞邏輯自己可控pyechartsPython生成圖表頁面弱改配置要重新生成HTML高全程Python中老師追問“數(shù)據(jù)怎么到前端”容易卡殼Matplotlib本地靜態(tài)圖無高高本科階段少見用它做Web項目Highcharts商業(yè)項目強中低但商用有授權(quán)問題網(wǎng)上大量教程推薦pyecharts因為它“全程寫Python不用碰前端”。但我自己做這類項目時不會選它——pyecharts本質(zhì)是把ECharts的配置封裝成Python對象再渲染成一段HTML字符串。問題是一旦答辯現(xiàn)場老師讓你“把折線圖換成柱狀圖”或者“點擊城市后圖表聯(lián)動”pyecharts要走“改Python代碼→重新生成頁面→刷新瀏覽器”這條路調(diào)試效率極低而且pyecharts 1.x和2.x的API差異很大很多老代碼在新版本里直接跑不起來。原生ECharts看著要多寫一點JavaScript但恰恰是這一點“多一點”讓你能講清楚整個數(shù)據(jù)鏈路視圖函數(shù)把數(shù)據(jù)轉(zhuǎn)成JSON→塞進模板→前端拿到JSON→chart.setOption()畫圖。每一步都在你手里答辯時老師問什么你都能接住。城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析的核心是“分析”不是“背一個封裝好的調(diào)用”所以我會把寶押在ECharts上。2.3 一個Django可視化項目的最小目錄結(jié)構(gòu)不管外面那層zip殼叫什么名字解壓之后能跑起來的Django項目骨架一定是下面這個樣子。我建議你親手敲一遍而不是直接抄別人的項目結(jié)構(gòu)air_quality/ ├── manage.py ├── config/ │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── core/ │ ├── __init__.py │ ├── models.py │ ├── views.py │ ├── urls.py │ ├── admin.py │ └── migrations/ ├── templates/ │ └── dashboard.html └── data/ └── pm25.csvconfig是項目配置目錄core是業(yè)務應用目錄templates放頁面模板data放原始數(shù)據(jù)集。拆分邏輯是配置和業(yè)務分開代碼和數(shù)據(jù)分開。很多新手喜歡把一切塞進core里短期沒問題但數(shù)據(jù)導入腳本、臨時CSV文件、頁面模板混在一起后期改起來很痛苦。這個結(jié)構(gòu)不是我發(fā)明的是Django項目的常規(guī)布局你在任何一本Django實戰(zhàn)入門教程里都能看到類似影子。先把骨架搭對后面每一步都順。3. 把PM2.5數(shù)據(jù)裝進Django數(shù)據(jù)表設(shè)計、CSV導入腳本與三條驗證命令3.1 PM2.5數(shù)據(jù)集的常規(guī)字段以及為什么AQI和等級也要入庫要做城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析第一步是搞清楚數(shù)據(jù)長什么樣。一份能支撐可視化頁面的城市空氣質(zhì)量數(shù)據(jù)集最少要有這幾個字段城市名稱、監(jiān)測日期、PM2.5濃度值、AQI指數(shù)、空氣質(zhì)量等級。城市和日期是維度PM2.5是核心指標AQI和等級用來做輔助分析比如“近30天優(yōu)的天數(shù)”“污染日集中在哪幾個城市”。我見過有人只存PM2.5數(shù)值其他全丟。短期看頁面也能畫圖但答辯時老師問“AQI怎么算的”“優(yōu)、良、輕度污染怎么劃分”你答不上來因為數(shù)據(jù)里根本沒有這些信息。寧可多存幾個字段也不用后面補數(shù)據(jù)這是做數(shù)據(jù)類項目的一條鐵律。數(shù)據(jù)來源方面常見做法是找公開的城市歷史空氣質(zhì)量數(shù)據(jù)集CSV格式或者自己寫爬蟲抓公開頁面課程設(shè)計階段我建議用公開數(shù)據(jù)集先跑通全鏈路爬蟲有時間再補別一上來就卡在采集上。3.2 建虛擬環(huán)境、裝依賴、創(chuàng)建項目和App動手之前先把環(huán)境隔離好。很多PythonDjango項目跑不起來不是代碼的問題是全局環(huán)境里Django版本和依賴互相打架。以下命令在項目根目錄執(zhí)行python -m venv venv source venv/bin/activate pip install django pandas django-admin startproject config . python manage.py startapp core第一行創(chuàng)建虛擬環(huán)境第二行激活它Windows下是venv\Scripts\activate。pip install django pandas里pandas是為了后面寫CSV導入腳本用的Django本身不需要它。django-admin startproject config .末尾這個點很關(guān)鍵表示在當前目錄生成config配置目錄而不是再套一層文件夾這樣manage.py就待在項目根目錄。最后一行startapp core創(chuàng)建業(yè)務應用所有模型、視圖都寫在這個app里。如果這里報django-admin: command not found大概率是虛擬環(huán)境沒激活或者pip安裝路徑不在PATH里。檢查辦法是pip show django看裝沒裝上裝上了就用python -m django代替django-admin效果一樣。跑完這幾條命令你已經(jīng)有一個最小可運行的Django項目了python manage.py runserver啟動后瀏覽器打開127.0.0.1:8000能看到默認火箭頁。3.3 模型字段這樣設(shè)計導入和查詢都省心打開core/models.py定義一張城市空氣質(zhì)量數(shù)據(jù)表。課程設(shè)計的數(shù)據(jù)量一般就是幾萬條到幾十萬條SQLite完全扛得住不需要上MySQL。模型我通常寫成這樣from django.db import models class CityAirQuality(models.Model): city models.CharField(max_length64, db_indexTrue, verbose_name城市) monitor_date models.DateField(db_indexTrue, verbose_name監(jiān)測日期) pm25 models.FloatField(verbose_namePM2.5濃度) aqi models.IntegerField(verbose_nameAQI指數(shù)) quality models.CharField(max_length16, blankTrue, default, verbose_name空氣質(zhì)量等級) class Meta: ordering [monitor_date] unique_together (city, monitor_date) verbose_name 城市空氣質(zhì)量數(shù)據(jù) def __str__(self): return f{self.city}-{self.monitor_date}這里有幾個參數(shù)值得注意。db_indexTrue給城市和日期加了數(shù)據(jù)庫索引按城市篩選、按時間范圍排序會明顯變快課程設(shè)計數(shù)據(jù)量雖然小但養(yǎng)成建索引的習慣沒有壞處。unique_together (city, monitor_date)是去重約束保證同一個城市同一天的記錄只有一條這比在導入腳本里手動if判斷可靠得多。ordering [monitor_date]讓所有查詢默認按日期升序后面寫視圖時不用每次都想起來加order_by。FloatField用來存PM2.5濃度因為監(jiān)測值經(jīng)常出現(xiàn)78.5這樣的帶小數(shù)數(shù)據(jù)AQI是整數(shù)用IntegerField。quality字段設(shè)置blankTrue, default是因為有些數(shù)據(jù)源可能沒給等級硬性nullFalse會導致導入失敗。模型定義完執(zhí)行遷移python manage.py makemigrations core python manage.py migratemakemigrations生成遷移文件migrate把表結(jié)構(gòu)真正建到數(shù)據(jù)庫里。執(zhí)行完這兩條命令后Django會自動生成SQLite數(shù)據(jù)庫文件db.sqlite3不需要你手動建庫。3.4 CSV導入腳本用pandas批量寫入而不是逐條insert數(shù)據(jù)文件格式各家不一樣但城市空氣質(zhì)量CSV通常長這樣第一行是列名后面每行一條記錄列包括城市、日期、PM2.5、AQI、等級。導入腳本我一般放在項目根目錄下import_data.py和Django項目同層腳本內(nèi)容如下import os import django import pandas as pd os.environ.setdefault(DJANGO_SETTINGS_MODULE, config.settings) django.setup() from core.models import CityAirQuality df pd.read_csv(data/pm25.csv, encodingutf-8-sig) df.columns [c.strip().lower() for c in df.columns] objs [] batch_size 1000 for idx, row in df.iterrows(): objs.append(CityAirQuality( citystr(row[city]).strip(), monitor_datepd.to_datetime(row[date]).date(), pm25float(row[pm25]), aqiint(row[aqi]), qualitystr(row[quality]).strip(), )) if len(objs) batch_size: CityAirQuality.objects.bulk_create(objs, ignore_conflictsTrue) objs.clear() if objs: CityAirQuality.objects.bulk_create(objs, ignore_conflictsTrue) print(f導入完成共 {CityAirQuality.objects.count()} 條記錄)腳本前三行是Django獨立運行腳本的標準寫法設(shè)置環(huán)境變量、調(diào)用django.setup()否則模型無法訪問數(shù)據(jù)庫。encodingutf-8-sig是專門針對Windows下編輯的CSV文件帶BOM頭用utf-8直接讀會把\ufeff混進第一列列名。pd.to_datetime()統(tǒng)一日期格式float()和int()做類型轉(zhuǎn)換避免字符串入庫。這段代碼的核心是bulk_create批量寫入一次性提交1000條比在循環(huán)里逐條save()快一個數(shù)量級。ignore_conflictsTrue配合模型里的unique_together約束重復導入時不會報錯重復記錄會被自動跳過。最后一行打印總記錄數(shù)這就是第一條驗證命令——看到它說明數(shù)據(jù)真正落庫了。3.5 三條驗證命令確認數(shù)據(jù)真的導對了數(shù)據(jù)導入完別急著寫頁面先用三條命令確認數(shù)據(jù)質(zhì)量。打開Django shellpython manage.py shellfrom core.models import CityAirQuality CityAirQuality.objects.count() CityAirQuality.objects.filter(city北京).count() CityAirQuality.objects.values(quality).annotate(cntmodels.Count(id))第一條命令看總記錄數(shù)第二條看指定城市有沒有數(shù)據(jù)第三條按空氣質(zhì)量等級分組統(tǒng)計數(shù)量。如果第三條跑出來有None空值說明CSV里有些行沒給等級回到導入腳本把空值處理掉。這三條命令能在30秒內(nèi)告訴你數(shù)據(jù)鏈路通不通比直接寫到頁面里再排錯快得多。我每次做完導入都會跑一遍這三條確認無誤才往下走省下的排錯時間遠多于敲這幾行命令的時間。4. 從QuerySet到ECharts圖表視圖函數(shù)、JSON結(jié)構(gòu)與交互式折線圖的完整鏈路4.1 先定數(shù)據(jù)接口的JSON結(jié)構(gòu)再寫頁面新手寫可視化頁面最容易犯的錯是把數(shù)據(jù)加工邏輯全塞在模板里前端想要什么就臨時湊什么。正確的做法是先定接口后端返回什么結(jié)構(gòu)的JSON前端就按這個結(jié)構(gòu)消費。城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析的主頁面需要兩塊數(shù)據(jù)一是圖表數(shù)據(jù)二是城市下拉列表。我一般把圖表數(shù)據(jù)定義成三個平行數(shù)組日期列表、PM2.5濃度列表、AQI列表。ECharts的折線圖x軸要的就是一個數(shù)組series也對應一個數(shù)組三數(shù)組結(jié)構(gòu)天然契合前端拿到后不需要二次加工。from django.http import JsonResponse from django.shortcuts import render import json from core.models import CityAirQuality def dashboard(request): city request.GET.get(city, 北京) rows CityAirQuality.objects.filter(citycity).order_by(monitor_date)[-30:] data { dates: [r.monitor_date.strftime(%Y-%m-%d) for r in rows], pm25: [r.pm25 for r in rows], aqi: [r.aqi for r in rows], } cities CityAirQuality.objects.values_list(city, flatTrue).distinct() return render(request, dashboard.html, { chart_data: json.dumps(data, ensure_asciiFalse), current_city: city, cities: cities, }) def api_pm25(request): city request.GET.get(city, ) if not city: return JsonResponse({error: 缺少city參數(shù)}, status400) rows CityAirQuality.objects.filter(citycity).order_by(monitor_date)[-30:] data { dates: [r.monitor_date.strftime(%Y-%m-%d) for r in rows], pm25: [r.pm25 for r in rows], aqi: [r.aqi for r in rows], } return JsonResponse(data, json_dumps_params{ensure_ascii: False})這段代碼里values_list(city, flatTrue).distinct()取出去重后的城市列表給下拉框用。[-30:]這種切片寫在order_by()之后取的是按日期排序后的最近30條記錄如果order_by寫反了取的就不是最近30天而是最早30天。strftime(%Y-%m-%d)把日期對象格式化成字符串因為datetime.date類型不能被json.dumps直接序列化。第二段api_pm25是為第6章的局部刷新準備的接口這里提前定義好。注意JsonResponse(data, json_dumps_params{ensure_ascii: False})不加這個參數(shù)中文城市名會變成\u5317\u4eac這種轉(zhuǎn)義序列前端拿到后顯示成亂碼。4.2 URL路由path()函數(shù)寫法和include的用法視圖函數(shù)寫好后把URL映射配好。項目根URL文件config/urls.py負責掛載app路由app內(nèi)core/urls.py負責具體路徑# config/urls.py from django.contrib import admin from django.urls import path, include urlpatterns [ path(admin/, admin.site.urls), path(, include(core.urls)), ]# core/urls.py from django.urls import path from core import views urlpatterns [ path(, views.dashboard, namedashboard), path(api/pm25/, views.api_pm25, nameapi_pm25), ]path()函數(shù)里空字符串表示站點根路徑api/pm25/是JSON接口路徑。這里不推薦url()正則寫法這是Django 4.x刪掉的老語法課程設(shè)計階段全部用path()就夠了。include(core.urls)把帶core/前綴的請求轉(zhuǎn)發(fā)給app內(nèi)路由表這樣即使以后加更多業(yè)務模塊根URL文件也不會膨脹。4.3 模板頁面ECharts折線圖從0到1的完整代碼模板文件templates/dashboard.html是整套系統(tǒng)最終呈現(xiàn)的地方。引入ECharts、定義容器、初始化圖表、塞數(shù)據(jù)四步缺一不可!DOCTYPE html html langzh-CN head meta charsetUTF-8 title{{ current_city }} PM2.5 近30天趨勢/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #pm25Chart { width: 100%; height: 400px; } /style /head body select idcitySelect {% for city in cities %} option value{{ city }} {% if city current_city %}selected{% endif %}{{ city }}/option {% endfor %} /select div idpm25Chart/div script const chart echarts.init(document.getElementById(pm25Chart)); const raw {{ chart_data|safe }}; chart.setOption({ tooltip: { trigger: axis }, title: { text: {{ current_city }} PM2.5 濃度趨勢 }, xAxis: { type: category, data: raw.dates }, yAxis: { type: value, name: PM2.5 (μg/m3) }, series: [{ name: PM2.5, type: line, data: raw.pm25, smooth: true, areaStyle: { opacity: 0.2 } }] }); /script /body /html這里最容易被忽略的是容器高度。ECharts的容器div如果沒設(shè)置高度默認高度為0圖表畫出來就是一片空白。所以模板里#pm25Chart必須顯式寫height: 400px。{{ chart_data|safe }}中的safe過濾器告訴Django這段JSON不要轉(zhuǎn)義否則引號會被變成quot;JavaScript直接語法報錯。這個用法有個前提chart_data是視圖里自己json.dumps出來的受控數(shù)據(jù)不是用戶輸入所以安全可控。echarts.init(document.getElementById(pm25Chart))一行完成圖表實例化。tooltip配trigger: axis后鼠標懸停能看到每一天的具體數(shù)值這是答辯演示時的核心交互點。smooth: true讓折線更圓滑areaStyle加了一層半透明填充視覺上比裸折線更有“數(shù)據(jù)可視化”的感覺——這兩個參數(shù)是觀感上的加分項成本幾乎為零。4.4 把統(tǒng)計結(jié)論寫進頁面數(shù)據(jù)可視化不等于數(shù)據(jù)分析這一章最后做一件很多課程設(shè)計都漏掉的事在圖表旁邊加一段統(tǒng)計描述。老師看到折線圖的直觀反應是“好看”但真正讓他點頭的是你能說出來“為什么好看”。# 在dashboard視圖函數(shù)中補充統(tǒng)計邏輯 vals [r.pm25 for r in rows] peak_val max(vals) if vals else 0 peak_date rows[vals.index(peak_val)].monitor_date.strftime(%Y-%m-%d) if vals else 無數(shù)據(jù)把peak_val和peak_date一起傳給模板頁面底部顯示“近30天PM2.5峰值出現(xiàn)在{peak_date}濃度為{peak_val}μg/m3”。這句話就是“分析”的最小單元數(shù)據(jù)可視化是手段結(jié)論才是目的。沒有這句你的頁面是“圖表展示”有了這句它才是“可視化分析”。整篇文章的標題里“分析”兩個字靠的就是這一小段代碼坐實。5. Django可視化項目避坑手冊中文亂碼、空白圖、新版Django報錯的排查路徑5.1 ECharts畫出來是空白先查容器高度不要懷疑代碼現(xiàn)象頁面能打開圖表區(qū)域一片空白控制臺沒有報錯chart.setOption也執(zhí)行了。原因ECharts容器div沒有顯式高度或者高度是0。ECharts初始化時讀取容器寬高高度為0時圖表畫不出來但不會拋異常因為初始化本身是成功的。解決給容器加CSS高度如#pm25Chart { height: 400px; }。如果容器是響應式布局用height: 60vh也可以。這是一個非常像“玄學”的問題因為頁面看起來一切正常實際上卡在最基礎(chǔ)的地方。我做過一個項目三個頁面用了同一個模板只有第三個頁面白屏排查了半天發(fā)現(xiàn)是那個頁面的CSS里把容器寫成了height: auto。5.2 CSV中文城市名變成亂碼encoding參數(shù)要選對現(xiàn)象導入完成后頁面上城市名顯示為“鍖椾含”或者導入時直接報UnicodeDecodeError。原因Windows下用Excel編輯的CSV默認是GBK編碼而Windows下Excel保存CSV時會帶上BOM頭utf-8編碼讀取GBK字節(jié)流必然解碼失敗即使讀進來了字節(jié)流被錯誤解碼后就是亂碼。解決讀取CSV時用encodingutf-8-sig這個編碼會自動吃掉BOM頭同時正常解析UTF-8內(nèi)容。如果數(shù)據(jù)源確實是GBK就改用encodinggbk。更穩(wěn)妥的做法是一開始就把CSV統(tǒng)一轉(zhuǎn)成UTF-8用VS Code打開后右下角編碼選擇“通過編碼保存”選UTF-8保存一次之后所有腳本都用utf-8-sig讀。數(shù)據(jù)文件編碼問題在數(shù)據(jù)可視化項目里排在前三名處理不好會直接污染數(shù)據(jù)庫。5.3 Django新版刪了url()函數(shù)老教程一抄就報錯現(xiàn)象按網(wǎng)上老教程寫url(r^index/$, views.index)啟動服務或訪問頁面時拋TypeError: url() got an unexpected keyword argument regex或者直接提示模塊沒有url屬性。原因Django 2.0起推薦path()4.0以后徹底移除了url()函數(shù)。網(wǎng)上大量教程和博客還是多年前的寫法抄下來必然報錯。解決全部改用path()路由。path(index/, views.index)就能實現(xiàn)同樣的效果。如果你確實需要正則匹配用re_path()代替它是url()的正則版后繼者。另外要留意版本相關(guān)的settings.py配置Django 3.2的DEFAULT_AUTO_FIELD需要設(shè)置很多老教程沒寫這個遷移時會收到一條警告不影響運行但有提示。這類問題不是你的代碼錯了是教程版本和運行環(huán)境不匹配裝上Django 3.2 LTS后大部分老教程都能直接用。5.4 json.dumps中文變成\uXXXX頁面顯示一串反斜杠現(xiàn)象頁面上折線圖的橫軸日期顯示正常但下拉框里或者圖例中的城市名顯示成\u5317\u4eac甚至直接把整個setOption參數(shù)變成了無效的JavaScript。原因json.dumps默認把非ASCII字符轉(zhuǎn)成\uXXXX轉(zhuǎn)義序列模板變量通過safe輸出后JavaScript拿到的是字面量反斜杠而不是漢字。如果轉(zhuǎn)義序列被插進帶引號的字符串里就會破壞JS語法。解決json.dumps(data, ensure_asciiFalse)。在API接口里如果用JsonResponse則傳參json_dumps_params{ensure_ascii: False}。兩個地方一個都不能漏模板渲染用的chart_data走的是json.dumpsAJAX接口走的是JsonResponse。這條排查路線的現(xiàn)象特別容易和編碼問題混淆實際是序列化參數(shù)的問題。5.5 導入數(shù)據(jù)重復翻倍unique_together是后悔藥現(xiàn)象導入腳本跑了兩遍數(shù)據(jù)庫里城市和日期的組合出現(xiàn)了兩行相同記錄圖表里某一天有兩個數(shù)值點折線圖看上去像“重影”。這會讓平均值計算和峰值統(tǒng)計全部失真。原因?qū)肽_本沒有去重邏輯第二次執(zhí)行時又批量插入了全部數(shù)據(jù)。課程設(shè)計階段重復導入很常見尤其是調(diào)試導入腳本時反復執(zhí)行。解決模型上建unique_together (city, monitor_date)導入時用bulk_create(objs, ignore_conflictsTrue)。unique_together在數(shù)據(jù)庫層面建了聯(lián)合唯一索引重復數(shù)據(jù)插入時數(shù)據(jù)庫會拒絕ignore_conflictsTrue告訴Django“沖突就跳過不報錯”。這樣導入腳本跑一百遍都不會污染數(shù)據(jù)。如果已經(jīng)翻倍了先清空表再重新導入Django shell里執(zhí)行CityAirQuality.objects.all().delete()即可。6. 進階技巧用AJAX把城市切換做成局部刷新答辯時多一個亮點基礎(chǔ)版本里切換城市要刷新整個頁面用戶體驗一般答辯演示時還會讓老師覺得“這跟Excel畫圖區(qū)別不大”。進階做法是通過fetch()請求JSON接口拿回數(shù)據(jù)后調(diào)用ECharts的setOption()更新圖表這就是局部刷新。核心代碼在4.1的api_pm25接口基礎(chǔ)上往模板里加一段監(jiān)聽const citySelect document.getElementById(citySelect); citySelect.addEventListener(change, function () { const city this.value; fetch(/api/pm25/?city encodeURIComponent(city)) .then(res res.json()) .then(data { chart.setOption({ title: { text: city PM2.5 濃度趨勢 }, xAxis: { data: data.dates }, series: [{ data: data.pm25 }] }); }); });這里兩個關(guān)鍵設(shè)計encodeURIComponent(city)把中文城市名轉(zhuǎn)成URL安全編碼否則fetch請求里的中文可能變成非法字符chart.setOption是增量更新只需要傳入要變的部分ECharts會自動合并新舊配置不需要重新init創(chuàng)建新圖表。如果調(diào)用chart.clear()再重新setOption頁面會閃一下答辯時觀感不好——增量更新是官方推薦做法也是和“刷頁面”思路最不一樣的地方。最后補一個小技巧在setOption之后加一行chart.resize()解決容器尺寸變化時圖表不跟隨的問題。有些答辯現(xiàn)場把瀏覽器窗口從筆記本投到投影儀分辨率一變圖表要么溢出要么縮成一團resize()就是為這個場景準備的“后悔藥”。做這類課程設(shè)計項目我最后悔的永遠是貪多嚼不爛又是地圖又是瀑布圖最后哪個都沒講清楚。這次這個方案只用了折線圖加局部刷新數(shù)據(jù)鏈路短、邏輯能自洽、答辯時每一行代碼都講得出來龍去脈反而拿到了不錯的評價。城市PM2.5空氣質(zhì)量數(shù)據(jù)可視化分析做到這個程度已經(jīng)遠超“交作業(yè)”的下限。如果你時間更充?？梢栽傺a一個按周聚合的柱狀圖或者用Django的annotate()算一個城市年均值對比表——方向?qū)α思庸δ苤皇菚r間問題。希望這些排過坑的思路能幫你少走幾段彎路祝答辯順利。本文還有配套的精品資源點擊獲取