畢業(yè)生招聘信息可視化分析系統(tǒng)聽(tīng)起來(lái)很像一個(gè)課程設(shè)計(jì)里常見(jiàn)的“后臺(tái)管理”但我做完之后最大的感受是真正有價(jià)值的部分根本不在增刪改查而在數(shù)據(jù)怎么算、圖怎么畫(huà)、前后端怎么把“統(tǒng)計(jì)結(jié)果”變成“業(yè)務(wù)判斷”。這個(gè)項(xiàng)目我用的技術(shù)棧是三件套——后端 Django圖表 ECharts界面框架 Layui很多人會(huì)拼成 Layul搜索資料的時(shí)候注意下正確寫法。這套組合在同類型項(xiàng)目里出現(xiàn)頻率極高不是因?yàn)樗卸鄷r(shí)髦而是它確實(shí)能覆蓋“數(shù)據(jù)能查、統(tǒng)計(jì)能算、圖表能畫(huà)、頁(yè)面不至于太丑”這四件事。下面我把從建模到圖表渲染的完整實(shí)現(xiàn)過(guò)程、統(tǒng)計(jì)接口設(shè)計(jì)思路和踩坑記錄都寫出來(lái)正在做 Django 項(xiàng)目實(shí)訓(xùn)、畢業(yè)設(shè)計(jì)或者想給招聘類數(shù)據(jù)系統(tǒng)補(bǔ)一個(gè)可視化看板的同學(xué)可以照著這條路走。1. 項(xiàng)目拆解畢業(yè)生招聘信息可視化到底要分析什么在動(dòng)工之前我先把“可視化分析”這四個(gè)字拆開(kāi)了看。招聘信息的可視化不是說(shuō)把每一條崗位記錄畫(huà)成表格就行而是要回答幾個(gè)非常具體的問(wèn)題畢業(yè)生都往哪些城市投遞、哪些學(xué)歷門檻最普遍、薪資區(qū)間集中在哪兒、崗位發(fā)布量隨時(shí)間是怎么變化的。如果這些問(wèn)題都沒(méi)有明確的業(yè)務(wù)答案那圖就是裝飾品沒(méi)有任何決策價(jià)值。1.1 核心功能與數(shù)據(jù)維度做這類系統(tǒng)我建議業(yè)務(wù)功能圍繞兩塊設(shè)計(jì)一塊是招聘信息的管理與檢索另一塊是統(tǒng)計(jì)看板。信息管理解決“數(shù)據(jù)從哪里來(lái)、怎么維護(hù)”的問(wèn)題統(tǒng)計(jì)看板解決“數(shù)據(jù)怎么用”的問(wèn)題。具體來(lái)說(shuō)我的系統(tǒng)里主要保留了這些數(shù)據(jù)維度崗位名稱比如 Java 開(kāi)發(fā)、產(chǎn)品經(jīng)理、運(yùn)營(yíng)專員。公司名稱便于按企業(yè)維度做交叉分析。工作城市這是地域分布圖的基礎(chǔ)字段。學(xué)歷要求高中、大專、本科、碩士、博士這是學(xué)歷分布餅圖的依據(jù)。薪資范圍存下限和上限兩個(gè)數(shù)值字段后面做薪資區(qū)間統(tǒng)計(jì)全靠它。發(fā)布日期用于做月度趨勢(shì)和季節(jié)性分析。模塊層面我實(shí)現(xiàn)了崗位列表的分頁(yè)查詢、多條件篩選城市、學(xué)歷、薪資區(qū)間、新增編輯刪除以及一個(gè) Dashboard 頁(yè)面。Dashboard 頁(yè)面上放了四類圖表中國(guó)地圖看地域熱度、餅圖看學(xué)歷結(jié)構(gòu)、柱狀圖看薪資區(qū)間、折線圖看月度發(fā)布趨勢(shì)。右側(cè)再配一個(gè) Layui 表格展示實(shí)時(shí)數(shù)據(jù)明細(xì)點(diǎn)擊圖表的圖例還能聯(lián)動(dòng)刷新下方列表。這樣的功能密度對(duì)實(shí)訓(xùn)項(xiàng)目或畢設(shè)來(lái)說(shuō)剛好不會(huì)因?yàn)楣δ芴亠@得單薄也不會(huì)因?yàn)閿傋愉佁髮?dǎo)致寫不完。1.2 為什么是 Django ECharts Layui 這個(gè)組合這個(gè)技術(shù)組合經(jīng)常被拿來(lái)和 Vue Spring Boot、Flask Chart.js 等方案對(duì)比我這里說(shuō)一下選擇理由。后端選 Django最重要的原因是它的 ORM 對(duì)統(tǒng)計(jì)類查詢特別友好。招聘數(shù)據(jù)可視化有大量分組聚合操作比如按城市分組統(tǒng)計(jì)、按學(xué)歷分組統(tǒng)計(jì)、按月分組統(tǒng)計(jì)Django 的annotate和values組合可以很短的時(shí)間寫出 SQL 級(jí)別的分組邏輯不需要像寫原生 SQL 那樣維護(hù)一堆字符串。而且 Django 自帶 Admin 后臺(tái)招聘數(shù)據(jù)錄入都可以直接丟給 Admin 搞定連前端表單都省了。如果你用 Flask那這套 CRUD 和統(tǒng)計(jì)邏輯基本都要自己重新造輪子項(xiàng)目后期會(huì)很累。前端圖表選 ECharts看中的是它的生態(tài)和配置項(xiàng)完整度。ECharts 對(duì)地圖、漸變柱狀圖、餅圖中心文字、工具箱組件這些高頻需求都有現(xiàn)成配置社區(qū)案例多到隨手能搜到。相比之下 Chart.js 雖然更輕量但在中國(guó)地圖、復(fù)雜視覺(jué)引導(dǎo)線這類場(chǎng)景上支持弱不少。Layui 的選擇則更實(shí)際它是一個(gè)更接近“傳統(tǒng)前端開(kāi)發(fā)”的框架基于 jQuery 模塊化開(kāi)發(fā)后端工程師不用去啃組件化和構(gòu)建工具鏈。它的表格table模塊自帶分頁(yè)、排序、列渲染配合form模塊做篩選條件短時(shí)間內(nèi)就能拼出一個(gè)有模有樣的管理后臺(tái)。雖然 Layui 官方更新節(jié)奏不像 Vue 生態(tài)那么激進(jìn)但對(duì)這種內(nèi)容密集型的管理類系統(tǒng)來(lái)說(shuō)完全夠用。下表是我當(dāng)時(shí)做選型對(duì)比時(shí)的記錄簡(jiǎn)單明了對(duì)比維度DjangoFlaskSpring BootORM 分組聚合內(nèi)置寫法簡(jiǎn)潔需自己實(shí)現(xiàn)或依賴 SQLAlchemy有但配置成本高Admin 后臺(tái)自帶省工作量大需要第三方擴(kuò)展需要額外開(kāi)發(fā)適合快速實(shí)訓(xùn)項(xiàng)目非常適合適合小接口適合企業(yè)級(jí)但重前端這塊ECharts 在圖表豐富度和文檔完善程度上優(yōu)勢(shì)太明顯基本沒(méi)有懸念。而 Layui 和 Bootstrap 相比區(qū)別在于 Layui 自帶完整的表格和數(shù)據(jù)交互組件Bootstrap 則需要你自己組合各種插件才能達(dá)到同等效果。2. Django 模型與查詢?cè)O(shè)計(jì)讓統(tǒng)計(jì)在后面先算明白很多初學(xué)者做 Django 可視化項(xiàng)目一上來(lái)就急著寫前端頁(yè)面結(jié)果做到統(tǒng)計(jì)接口的時(shí)候發(fā)現(xiàn)數(shù)據(jù)模型設(shè)計(jì)不合理要么缺字段要么字段類型不對(duì)只能返工。模型是整個(gè)項(xiàng)目的底層地基這一層穩(wěn)了后面全靠它鋪路。2.1 JobInfo 模型字段不是隨便建的我用的是單表模型來(lái)做招聘崗位信息存儲(chǔ)字段設(shè)計(jì)如下from django.db import models class JobInfo(models.Model): EDUCATION_CHOICES [ (high_school, 高中/中專), (college, 大專), (bachelor, 本科), (master, 碩士), (doctor, 博士), ] position_name models.CharField(崗位名稱, max_length100) company_name models.CharField(公司名稱, max_length100) city models.CharField(工作城市, max_length50) salary_min models.IntegerField(薪資下限, default0) salary_max models.IntegerField(薪資上限, default0) education models.CharField(學(xué)歷要求, max_length20, choicesEDUCATION_CHOICES, defaultcollege) publish_date models.DateField(發(fā)布日期) created_at models.DateTimeField(創(chuàng)建時(shí)間, auto_now_addTrue) class Meta: ordering [-publish_date] indexes [ models.Index(fields[city, education, publish_date]), ] def __str__(self): return f{self.position_name} {self.company_name}這里有兩個(gè)設(shè)計(jì)點(diǎn)我特意強(qiáng)調(diào)一下。第一個(gè)是薪資不要用字符串類型比如“8k-15k”而是拆成salary_min和salary_max兩個(gè)整數(shù)字段。如果把薪資寫成字符串后面做“5k以下、5-10k、10-15k”這種區(qū)間統(tǒng)計(jì)時(shí)會(huì)非常痛苦你不得不用正則去截取數(shù)字還要處理“面議”“年薪”“日薪”之類的臟文本。拆成整形字段后不管是區(qū)間篩選還是分?jǐn)?shù)統(tǒng)計(jì)一行 ORM 就能搞定。第二個(gè)是education字段用 choices 加短代碼。有人會(huì)直接在庫(kù)里存中文“本科”這樣也不是不行但后續(xù)如果要改名稱、做國(guó)際化或者統(tǒng)計(jì) key 變了就會(huì)很麻煩。用短代碼存庫(kù)顯示時(shí)映射成中文既保證了數(shù)據(jù)一致又和get_education_display()天然配合。在索引設(shè)計(jì)上我給city、education、publish_date建了聯(lián)合索引。因?yàn)榻y(tǒng)計(jì)接口的過(guò)濾條件主要圍繞城市、學(xué)歷和時(shí)間點(diǎn)走這個(gè)索引能明顯加快篩選和分組的速度。數(shù)據(jù)量在幾萬(wàn)條的時(shí)候感覺(jué)不出來(lái)但一旦到十萬(wàn)級(jí)以上索引和非索引的差距是秒級(jí)的。2.2 統(tǒng)計(jì)都是 ORM 的活兒aggregate 與 annotate招聘數(shù)據(jù)可視化的統(tǒng)計(jì)邏輯絕大多數(shù)能用 Django 的values annotate Count寫出來(lái)。比如統(tǒng)計(jì)各學(xué)歷的崗位數(shù)量from django.db.models import Count result JobInfo.objects.values(education).annotate(totalCount(id))這行代碼相當(dāng)于 SQL 里的SELECT education, COUNT(id) AS total FROM jobinfo_jobinfo GROUP BY education拿到的是[{education: bachelor, total: 123}, ...]這樣的結(jié)構(gòu)。我通常會(huì)在視圖層把它們整理成 ECharts 需要的格式比如[{name: 本科, value: 123}]。這種寫法的好處是統(tǒng)計(jì)邏輯都在數(shù)據(jù)庫(kù)端完成而不是把幾萬(wàn)條記錄拉回 Python 內(nèi)存里再循環(huán)數(shù)一遍。很多新手會(huì)下意識(shí)寫all()然后for循環(huán)計(jì)數(shù)數(shù)據(jù)少?zèng)]什么數(shù)據(jù)一多頁(yè)面就卡死。ORM 的分組聚合是這類統(tǒng)計(jì)業(yè)務(wù)的默認(rèn)手段沒(méi)有例外。2.3 從錄入到清洗招聘數(shù)據(jù)最臟的幾個(gè)地方真實(shí)爬來(lái)的或手工錄入的招聘數(shù)據(jù)沒(méi)有一版是干凈的我在做數(shù)據(jù)清洗時(shí)踩了不少坑。一是重復(fù)數(shù)據(jù)。同一條崗位信息可能被爬蟲(chóng)抓了兩遍或者人工錄入時(shí)復(fù)制錯(cuò)了。我處理方法是先按崗位名稱、公司名稱、城市、薪資上下限幾個(gè)字段做去重再保留發(fā)布日期最新的那條。Django 里可以這樣做from django.db.models import Count duplicates ( JobInfo.objects .values(position_name, company_name, city, salary_min, salary_max) .annotate(cntCount(id)) .filter(cnt__gt1) )找到重復(fù)組之后再對(duì)每組保留最早或最近的一條。二是城市字段不規(guī)范。有的寫“北京”有的寫“北京市”還有的寫“北京朝陽(yáng)”。做地域地圖必須統(tǒng)一到城市粒度我的做法是在清洗階段把所有城市名映射成標(biāo)準(zhǔn)地圖名稱比如統(tǒng)一用省份加地市的叫法。ECharts 地圖數(shù)據(jù)匹配非常死板名稱差一個(gè)字就顯示不出來(lái)這一點(diǎn)在第五節(jié)會(huì)專門說(shuō)。三是發(fā)布日期缺失或格式混亂。Django 的DateField接收不了“2024.01.15”這種格式我導(dǎo)入數(shù)據(jù)時(shí)統(tǒng)一用先清洗再入庫(kù)的邏輯盡量在源頭就把格式對(duì)齊而不是等查詢時(shí)報(bào)錯(cuò)再去補(bǔ)。3. 統(tǒng)計(jì)接口設(shè)計(jì)把數(shù)據(jù)庫(kù)算好的結(jié)果喂給 ECharts模型和基礎(chǔ)查詢搞定之后接下來(lái)就是寫統(tǒng)計(jì)接口。這一步的核心思路是所有分組、分箱、排序的臟活都在 Django 后端完成前端只負(fù)責(zé)接收 JSON、調(diào)用 ECharts 的setOption。如果你把統(tǒng)計(jì)邏輯散落在一堆 JavaScript 里項(xiàng)目規(guī)模一大維護(hù)成本會(huì)直線上升。3.1 一套通用的 JSON 返回結(jié)構(gòu)統(tǒng)計(jì)接口的返回結(jié)構(gòu)我盡量統(tǒng)一成下面這種{ data: [ {name: 本科, value: 1280}, {name: 碩士, value: 560} ] }ECharts 餅圖、地圖、圖例都認(rèn)這種{name, value}結(jié)構(gòu)。柱狀圖則可能需要categories和values兩個(gè)數(shù)組{ categories: [5k以下, 5-10k, 10-15k, 15-20k, 20k以上], values: [200, 850, 900, 180, 80] }兩種結(jié)構(gòu)可以并存反正后端按圖表的“口味”來(lái)給數(shù)據(jù)前端越省事越好。3.2 學(xué)歷分布與薪水分箱學(xué)歷分布的接口代碼很樸素from django.db.models import Count from django.http import JsonResponse def education_distribution(request): rows JobInfo.objects.values(education).annotate(totalCount(id)) label_map dict(JobInfo.EDUCATION_CHOICES) data [ {name: label_map.get(row[education], row[education]), value: row[total]} for row in rows ] return JsonResponse({data: data})薪水分箱比學(xué)歷分布麻煩一檔因?yàn)樾劫Y是連續(xù)數(shù)值需要按區(qū)間拆桶。我先用F表達(dá)式算出月薪中位數(shù)再用Case/When打標(biāo)簽from django.db.models import Q, F, Case, When, Value, CharField, Count def salary_distribution(request): buckets ( JobInfo.objects .annotate(salary_avg(F(salary_min) F(salary_max)) / 2) .annotate( bucketCase( When(salary_avg__lt5000, thenValue(5k以下)), When(salary_avg__lte10000, thenValue(5-10k)), When(salary_avg__lte15000, thenValue(10-15k)), When(salary_avg__lte20000, thenValue(15-20k)), defaultValue(20k以上), output_fieldCharField(), ) ) .values(bucket) .annotate(totalCount(id)) ) data [{name: b[bucket], value: b[total]} for b in buckets] return JsonResponse({data: data})這段代碼相當(dāng)于在 SQL 里用CASE WHEN做區(qū)間分桶然后GROUP BY bucket。用 ORM 寫出來(lái)的好處是邏輯都留在 Python 代碼里改區(qū)間時(shí)直接改閾值就行不需要去數(shù)據(jù)庫(kù)管理工具里改 SQL。3.3 月度趨勢(shì)與時(shí)間過(guò)濾月度趨勢(shì)要用到ExtractMonth。比如統(tǒng)計(jì)每個(gè)月發(fā)布的崗位數(shù)量from django.db.models import Count from django.db.models.functions import ExtractMonth, ExtractYear def monthly_trend(request): rows ( JobInfo.objects .annotate(yearExtractYear(publish_date), monthExtractMonth(publish_date)) .values(year, month) .annotate(totalCount(id)) .order_by(year, month) ) data [ {name: f{row[year]}-{str(row[month]).zfill(2)}, value: row[total]} for row in rows ] return JsonResponse({data: data})這類時(shí)間統(tǒng)計(jì)接口我通常會(huì)額外支持兩個(gè)查詢參數(shù)start_date和end_date。在接口里加上start request.GET.get(start_date) end request.GET.get(end_date) queryset JobInfo.objects.all() if start: queryset queryset.filter(publish_date__gtestart) if end: queryset queryset.filter(publish_date__lteend)這樣前端在做時(shí)間區(qū)間篩選時(shí)所有圖表可以基于同一個(gè)過(guò)濾邏輯刷新數(shù)據(jù)而不是各畫(huà)各的、各查各的。3.4 寫操作與緩存的同步問(wèn)題這個(gè)項(xiàng)目做到后段我發(fā)現(xiàn)一個(gè)非?，F(xiàn)實(shí)的問(wèn)題統(tǒng)計(jì)接口雖然寫著爽但每次頁(yè)面刷新都要重新對(duì)全表做一次聚合。數(shù)據(jù)量一旦漲到幾萬(wàn)甚至十萬(wàn)行響應(yīng)時(shí)間就會(huì)從幾十毫秒漲到幾百毫秒。這時(shí)候用 Django 緩存最省事from django.core.cache import cache def education_distribution(request): cache_key stats:education data cache.get(cache_key) if data is None: rows JobInfo.objects.values(education).annotate(totalCount(id)) data [...] cache.set(cache_key, data, 60 * 60) # 緩存 1 小時(shí) return JsonResponse({data: data})但引入緩存之后就必須處理緩存失效問(wèn)題。尤其是刪除操作很多人會(huì)忽略這一環(huán)JobInfo刪掉了一批崗位統(tǒng)計(jì)接口因?yàn)槊芯彺嬉廊环祷嘏f數(shù)據(jù)前端看板上的數(shù)字和后臺(tái)數(shù)據(jù)就對(duì)不上了。我在處理“django 執(zhí)行查詢-刪除對(duì)象”這類操作時(shí)會(huì)在刪除接口里主動(dòng)清掉相關(guān)統(tǒng)計(jì)緩存def job_delete(request, pk): job get_object_or_404(JobInfo, pkpk) job.delete() cache.delete_many([ stats:education, stats:salary, stats:monthly, stats:city, ]) return JsonResponse({code: 0, message: 刪除成功})一句話總結(jié)統(tǒng)計(jì)接口寫得再漂亮也要考慮數(shù)據(jù)進(jìn)入和退出后的同步。緩存失效策略在設(shè)計(jì)接口時(shí)就要想好不要等線上數(shù)據(jù)對(duì)不上了再去補(bǔ)。4. Layui 框架管理后臺(tái)的架子先搭起來(lái)Web 端儀表盤布局是這類系統(tǒng)的臉面。我用 Layui 的原因在前面說(shuō)過(guò)它不需要引入 React/Vue 那種重依賴鏈路直接把 CSS 和 JS 放進(jìn)靜態(tài)目錄模板引擎里寫幾行 HTML 就能出效果。4.1 頁(yè)面布局和靜態(tài)資源引入Layui 最常用的布局是layui-layout-admin它自帶頂部導(dǎo)航、左側(cè)菜單和右側(cè)內(nèi)容區(qū)三個(gè)部分。我在 Django 模板里寫的是{% load static %} !DOCTYPE html html head meta charsetutf-8 title畢業(yè)生招聘信息可視化分析系統(tǒng)/title link relstylesheet href{% static layui/css/layui.css %} script src{% static layui/layui.js %}/script script src{% static echarts/echarts.min.js %}/script /head body classlayui-layout-body div classlayui-layout layui-layout-admin div classlayui-header !-- 頂部標(biāo)題欄 -- /div div classlayui-side layui-bg-black !-- 導(dǎo)航菜單 -- /div div classlayui-body !-- 圖表區(qū) 表格區(qū) -- /div /div /body /html這里有個(gè)細(xì)節(jié)ECharts 的 JS 文件我是在本地/static/echarts/下放的而不是直接引用 CDN。為什么因?yàn)檫@類項(xiàng)目經(jīng)常部署在校內(nèi)服務(wù)器或者比賽環(huán)境外網(wǎng)可能不通。把 ECharts 和 Layui 都本地化是避免最后演示時(shí)圖表全白屏的最穩(wěn)妥做法。4.2 表格渲染與篩選條件聯(lián)動(dòng)Layui 的table模塊渲染列表我直接在 JS 里配置 URL 和分頁(yè)參數(shù)layui.use([table, form], function () { const table layui.table; const form layui.form; table.render({ elem: #jobTable, url: /api/job/list/, page: true, cols: [[ { field: position_name, title: 崗位名稱 }, { field: company_name, title: 公司名稱 }, { field: city, title: 城市 }, { field: salary_min, title: 薪資下限 }, { field: salary_max, title: 薪資上限 }, { field: education_display, title: 學(xué)歷要求 }, { field: publish_date, title: 發(fā)布日期 } ]] }); form.on(submit(searchForm), function (data) { table.reload(jobTable, { where: data.field, page: { curr: 1 } }); return false; }); });篩選字段通過(guò)where傳給 Django 視圖視圖里用request.GET接收再做filter。這種模式非常標(biāo)準(zhǔn)幾乎沒(méi)有額外學(xué)習(xí)成本。需要注意的坑是Django 分頁(yè)接口返回的 JSON 必須符合 Layui 表格的約定格式否則表格數(shù)據(jù)出不來(lái)。我封裝的返回結(jié)構(gòu)是{ code: 0, msg: , count: 100, data: [] }code固定為 0data是當(dāng)前頁(yè)的列表數(shù)據(jù)。這個(gè)約定在 Layui 文檔里有寫但新手經(jīng)常忘導(dǎo)致表格一直空著只有分頁(yè)在轉(zhuǎn)。4.3 CSRF Token 和 Ajax 提交Layui 的table模塊 GET 請(qǐng)求沒(méi)問(wèn)題但如果做新增、編輯、刪除通常走 POST/DELETE這時(shí)候 Django 的 CSRF 校驗(yàn)就會(huì)跳出來(lái)。默認(rèn)情況下Django 會(huì)把csrftoken放在 Cookie 里所以你要在 Ajax 請(qǐng)求頭里把這個(gè)值帶回去。我封了一個(gè)通用函數(shù)function getCookie(name) { const cookieValue document.cookie.match((^|;)\\s* name \\s*\\s*([^;]))?.[2] || ; return decodeURIComponent(cookieValue); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type) !this.crossDomain) { xhr.setRequestHeader(X-CSRFToken, getCookie(csrftoken)); } } });這個(gè)函數(shù)是 Django 官方文檔里給出的標(biāo)準(zhǔn)做法放到項(xiàng)目中后增刪改請(qǐng)求就不再會(huì)被 403 擋住了。處理“django cookie 設(shè)置 token”這種需求時(shí)本質(zhì)就是讀取 Cookie、塞進(jìn)請(qǐng)求頭沒(méi)別的玄學(xué)。5. ECharts 圖表落地從柱狀圖到地圖的完整配置圖表是整個(gè)系統(tǒng)的視覺(jué)高潮。ECharts 配置項(xiàng)多但真正高頻用到的就那么幾個(gè)tooltip、toolbox、漸變柱狀圖、餅圖中心文字、折線圖刻度和地圖注冊(cè)。我逐一過(guò)一遍。5.1 圖表選型映射表不同數(shù)據(jù)應(yīng)該用不同圖形選錯(cuò)圖會(huì)讓信息表達(dá)大打折扣。我當(dāng)時(shí)的映射邏輯是統(tǒng)計(jì)維度圖表類型核心配置點(diǎn)城市/地域分布中國(guó)地圖geoseries.typemap需注冊(cè) geoJSON學(xué)歷分布餅圖半徑環(huán)狀中心放崗位總數(shù)薪資區(qū)間柱狀圖漸變填充數(shù)值顯示在柱頂月度發(fā)布趨勢(shì)折線圖x 軸刻度控制tooltip展示詳細(xì)值崗位類型 Top10橫向條形圖yAxis反轉(zhuǎn)數(shù)據(jù)從大到小排序基本上一張 Dashboard 頁(yè)面放這四個(gè)圖信息量就很均衡了。5.2 漸變柱狀圖與工具箱薪資分布的漸變柱狀圖我用的配置如下const salaryChart echarts.init(document.getElementById(salaryChart)); salaryChart.setOption({ tooltip: { trigger: axis }, toolbox: { feature: { saveAsImage: { title: 保存圖片 }, dataView: { title: 數(shù)據(jù)視圖 }, restore: { title: 還原 } } }, xAxis: { type: category, data: data.categories }, yAxis: { type: value, name: 崗位數(shù)量 }, series: [{ type: bar, data: data.values, label: { show: true, position: top, formatter: function (params) { return params.value 0 ? params.value : ; } }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: #83bff6 }, { offset: 1, color: #2f6fe4 } ]) } }] });對(duì)應(yīng)“y 軸標(biāo)簽如何在每個(gè)柱子上面顯示”的需求答案就是在series.label里設(shè)置position: top。很多人一開(kāi)始會(huì)在yAxis.axisLabel里找答案那是坐標(biāo)軸的取值標(biāo)簽不是柱子上的數(shù)值。label是數(shù)據(jù)點(diǎn)本身的標(biāo)簽用在柱狀圖里就是柱頂數(shù)值。toolbox是個(gè)很實(shí)用的組件尤其適合展示型項(xiàng)目。評(píng)審老師或領(lǐng)導(dǎo)在看板上一眼看不到數(shù)據(jù)明細(xì)可以用“數(shù)據(jù)視圖”按鈕直接查看還能“保存圖片”存到本地這個(gè)小組件能幫你省下很多口頭解釋。5.3 餅圖中間文字“echarts pie 中間的字”也是一個(gè)高頻搜索點(diǎn)。餅圖默認(rèn)中間是空的如果你想在中心展示“崗位總數(shù)”這樣的指標(biāo)最方便的方法是疊加一個(gè)graphic元素const eduChart echarts.init(document.getElementById(eduChart)); let total 0; data.forEach(item (total item.value)); eduChart.setOption({ tooltip: { trigger: item }, legend: { bottom: 0 }, series: [{ type: pie, radius: [40%, 65%], data: data, label: { formatter: : {c} (drlblxrh1%) } }], graphic: [{ type: text, left: center, top: center, style: { text: total \n崗位總數(shù), textAlign: center, fill: #333, fontSize: 16 } }] });用graphic的優(yōu)勢(shì)是文字完全自由不依賴 series 的坐標(biāo)系可以單獨(dú)控制顏色、字號(hào)、換行。如果需求只是居中放一行字也可以用title的left: center, top: middle實(shí)現(xiàn)但文字排版能力弱很多。項(xiàng)目里我最終選的是graphic維護(hù)起來(lái)更直白。5.4 折線圖刻度與地圖數(shù)據(jù)本地化折線圖最容易出問(wèn)題的不是 series而是 x 軸刻度。當(dāng)數(shù)據(jù)跨了 12 個(gè)月甚至更長(zhǎng)時(shí)間時(shí)ECharts 會(huì)默認(rèn)抽稀刻度導(dǎo)致前幾個(gè)月和后幾個(gè)月的點(diǎn)擠在一起。我通常會(huì)顯式加上x(chóng)Axis: { type: category, data: months, axisLabel: { interval: 0, rotate: 30 } }interval: 0表示強(qiáng)制顯示所有刻度標(biāo)簽rotate: 30是每月文案斜著排列防止重疊。如果月份真的太多再考慮interval: 2每隔一個(gè)月顯示一次。這個(gè)配置項(xiàng)不放在系列上而是放在xAxis.axisLabel里不熟悉的人容易找錯(cuò)地方。地圖這塊ECharts 5 不再內(nèi)置中國(guó)地圖數(shù)據(jù)必須外掛 geoJSON。我在項(xiàng)目里先把地圖 JSON 文件下載到了本地靜態(tài)目錄然后echarts.registerMap(china, chinaGeoJson); const cityChart echarts.init(document.getElementById(cityChart)); cityChart.setOption({ tooltip: { trigger: item }, visualMap: { min: 0, max: maxValue, left: 20, top: 20, text: [高, 低], calculable: true }, series: [{ type: map, map: china, roam: true, data: cityData }] });這里的核心坑是 name 匹配。地圖 JSON 里省份名稱是標(biāo)準(zhǔn)叫法如果你的數(shù)據(jù)庫(kù)城市字段寫的是簡(jiǎn)稱或別名圖上是不會(huì)亮起來(lái)的。我干脆在數(shù)據(jù)清洗階段就統(tǒng)一了城市名稱。5.5 數(shù)據(jù)加載與 resize 管理所有圖表初始化完之后我做了一個(gè)統(tǒng)一的數(shù)據(jù)刷新函數(shù)function refreshAllCharts() { fetch(/api/stats/overview/) .then(res res.json()) .then(data { salaryChart.setOption({ ... }); eduChart.setOption({ ... }); cityChart.setOption({ ... }); trendChart.setOption({ ... }); }); } window.addEventListener(resize, function () { salaryChart.resize(); eduChart.resize(); cityChart.resize(); trendChart.resize(); });每次切換篩選條件時(shí)重新調(diào)refreshAllCharts()前端代碼量控制得很小。唯一要注意的是ECharts 實(shí)例在頁(yè)面里不要反復(fù)init否則會(huì)產(chǎn)生性能浪費(fèi)和重復(fù)渲染。初始化一次后續(xù)都用setOption更新數(shù)據(jù)這是最推薦的方式。6. 踩坑復(fù)盤前后端聯(lián)調(diào)里最容易被絆倒的地方項(xiàng)目做完回頭看真正耗時(shí)間的不是功能開(kāi)發(fā)而是各種不起眼的聯(lián)調(diào)坑。這里把我踩得最深的幾個(gè)列出來(lái)也算給后面做同類項(xiàng)目的人排雷。6.1 QuerySet.delete() 的坑“django 執(zhí)行查詢-刪除對(duì)象”看起來(lái)是多簡(jiǎn)單的一件事但里面有不少隱藏細(xì)節(jié)。第一QuerySet.delete()是批量刪除返回(total_count, {app_label.model: count})元組很多人只調(diào)用不關(guān)心返回值結(jié)果刪了哪些表、刪了多少行完全沒(méi)數(shù)。這個(gè)返回值其實(shí)很值錢我一般都會(huì)打日志方便排查問(wèn)題。第二切片后的 QuerySet 不能直接調(diào)用delete()。比如JobInfo.objects.all()[:10].delete() # 這是會(huì)報(bào)錯(cuò)的因?yàn)榍衅蠓祷氐氖切碌腝uerySet沒(méi)有delete()方法。如果只想刪前幾條要先取出 id 列表再用Q條件刪除。第三刪除關(guān)聯(lián)表數(shù)據(jù)時(shí)要注意級(jí)聯(lián)。如果未來(lái)擴(kuò)展了公司表、投遞記錄表刪除崗位對(duì)象時(shí)外鍵關(guān)聯(lián)記錄也會(huì)被 Django 級(jí)聯(lián)刪掉這種“隱藏的刪除”容易造成業(yè)務(wù)數(shù)據(jù)不可逆丟失。我現(xiàn)在的習(xí)慣是涉及刪除的接口統(tǒng)一做軟刪除或二次確認(rèn)不直接物理刪除。第四前面提到的緩存失效問(wèn)題。刪完數(shù)據(jù)不清理統(tǒng)計(jì)緩存頁(yè)面和后臺(tái)數(shù)據(jù)就永久不一致直到緩存過(guò)期。這個(gè)小坑在我的項(xiàng)目里確實(shí)發(fā)生了一次當(dāng)時(shí)調(diào)試了很久才發(fā)現(xiàn)是緩存沒(méi)清。6.2 圖表不顯示常見(jiàn)的三個(gè)原因我總結(jié)了我周圍同學(xué)做 ECharts 項(xiàng)目時(shí)“圖表區(qū)域空白”的三種高頻原因一是 JS 文件沒(méi)正確加載。ECharts 和 Layui 的腳本標(biāo)簽順序錯(cuò)了、路徑寫錯(cuò)了、靜態(tài)文件配置沒(méi)生效都可能導(dǎo)致圖表初始化報(bào)錯(cuò)。最笨也最有效的排查方法是打開(kāi)瀏覽器控制臺(tái)看有沒(méi)有紅色報(bào)錯(cuò)。很多項(xiàng)目圖表不顯示不是代碼邏輯的問(wèn)題而是echarts is not defined這類加載錯(cuò)誤。二是div容器沒(méi)有高度。ECharts 需要一個(gè)有明確寬高的容器如果父級(jí)div根本沒(méi)設(shè)置高度或高度為 0初始化出圖表也是隱形的。我在模板里統(tǒng)一給圖表容器加了.dashboard-chart { width: 100%; height: 350px; }三是地圖數(shù)據(jù)名稱對(duì)不上。geoJSON里的省名和接口返回的name不一致地圖就會(huì)空白但其他圖表正常。這時(shí)要重點(diǎn)檢查名稱映射而不是去調(diào)visualMap。6.3 我做這個(gè)項(xiàng)目后的一些體會(huì)回頭再看整個(gè)項(xiàng)目統(tǒng)計(jì)口徑的設(shè)計(jì)比圖表本身花了更多時(shí)間。比如薪資區(qū)間怎么分、學(xué)歷怎么歸類、時(shí)間趨勢(shì)按周還是按月這些看起來(lái)簡(jiǎn)單的決定其實(shí)會(huì)影響接口、圖表、表格三處代碼。我建議先把自己的分析維度定死再開(kāi)始寫任何一行代碼。另外如果你打算把這個(gè)項(xiàng)目繼續(xù)擴(kuò)展可以考慮做崗位類型詞云、公司維度對(duì)比或者加入爬蟲(chóng)自動(dòng)采集招聘數(shù)據(jù)。數(shù)據(jù)庫(kù)層已經(jīng)按規(guī)范化模型設(shè)計(jì)好了后面加數(shù)據(jù)源只是往JobInfo里灌數(shù)據(jù)的事統(tǒng)計(jì)接口和圖表不用大改。最后再分享一個(gè)很實(shí)用的小技巧做完了 Dashboard 之后一定要在瀏覽器按 F12 切到移動(dòng)端尺寸看一眼。Layui 自適應(yīng)能做一部分布局調(diào)整但四個(gè)圖表擠在小屏上還是會(huì)亂掉。如果演示用的是電腦至少把窗口縮放測(cè)試做一遍很多布局問(wèn)題都是以窗口不是全屏的狀態(tài)暴露出來(lái)的。