简介：这是一套面向Python Web开发初学者与数据分析入门者的招聘数据可视化实战源码，基于Django搭建后端服务，配合Python完成数据清洗与统计，再通过Echarts在前端呈现图表，帮助读者理解从数据到页面的完整链路。压缩包共165个文件，约4.68MB，其中51个js与39个json承担前端交互与数据配置，14个py与12个pyc构成Django业务逻辑，另有12个css、5个html及字体图标资源负责页面样式，并附带sqlite3数据库与Pipfile依赖清单，目录结构清晰，便于按模块阅读。资源已有751人学习下载，代码完整、下载即可运行，适合作为课程设计、毕业设计或自学练手项目，读者可据此掌握Django视图与模板渲染、Echarts图表配置、招聘数据字段处理与统计维度设计等关键技能，并在此基础上替换数据集、扩展分析指标，快速搭建属于自己的可视化分析系统。
1. 招聘数据可视化分析系统：从原始 CSV 到可交互大屏的完整落地路径
招聘网站每天产生海量岗位信息，薪资、学历、城市、经验要求散落在不同字段里。想快速看清“哪个城市薪资最高”“什么学历要求占比最大”“哪些技能被反复提及”，靠 Excel 手工透视表效率太低，而且每次数据更新都要重来一遍。Django + Python + Echarts 这套组合，解决的正是这个问题：Python 负责数据清洗和统计计算，Django 提供 Web 框架和接口，Echarts 在前端把结果渲染成折线图、柱状图、饼图、词云图和中国地图。这套方案适合有 Python 基础、想做一个完整数据可视化项目的开发者，也适合需要快速搭建内部招聘数据看板的团队。源码结构清晰，照着本文的步骤走，本地跑通不是难事。
2. 技术选型与数据准备：为什么是 Django 而不是 Flask
2.1 Django 的 MTV 模式在可视化项目里的实际作用
Django 的 MTV 模式（Model-Template-View）在这个项目里分工很明确。Model 层定义招聘数据的表结构，比如岗位名称、公司名称、薪资范围、学历要求、城市、经验年限等字段。Template 层负责页面骨架，View 层处理业务逻辑——从数据库读取数据、做聚合统计、返回 JSON 给前端。相比 Flask，Django 自带 ORM、Admin 后台和模板系统，不需要额外拼装组件。对于招聘数据这种字段多、需要频繁查询和统计的场景，Django ORM 的聚合函数（annotate、aggregate）能省掉大量手写 SQL 的工作。
常见做法是先用 Django 的inspectdb从现有数据库反向生成 Model，或者直接根据 CSV 字段手动定义。我一般会先跑一遍python manage.py startapp jobs创建应用，然后在models.py里把字段类型定清楚。薪资字段建议用CharField存原始文本（如“15-25K”），另加两个IntegerField存解析后的最低和最高薪资，方便后续做数值统计。
2.2 用 Pandas 清洗招聘 CSV 的四个关键步骤
原始招聘数据通常来自爬虫或公开数据集，字段里夹杂着“薪资面议”“经验不限”“本科及以上”这类非结构化文本。直接入库会导致统计结果失真。下面这段清洗脚本是我常用的模板：
import pandas as pd import re # 读取原始 CSV，注意编码问题，gbk 和 utf-8 都试一下 df = pd.read_csv('jobs_raw.csv', encoding='utf-8') # 步骤1：解析薪资范围，提取最低和最高薪资（单位：K） def parse_salary(s): if pd.isna(s) or '面议' in str(s): return pd.Series([None, None]) nums = re.findall(r'(\d+\.?\d*)', str(s)) if len(nums) >= 2: return pd.Series([float(nums[0]), float(nums[1])]) elif len(nums) == 1: return pd.Series([float(nums[0]), float(nums[0])]) return pd.Series([None, None]) df[['salary_min', 'salary_max']] = df['salary'].apply(parse_salary) # 步骤2：统一学历要求，把“本科及以上”“统招本科”归为“本科” def normalize_education(s): s = str(s) if '不限' in s or '无' in s: return '不限' for level in ['博士', '硕士', '本科', '大专', '中专', '高中']: if level in s: return level return '其他' df['education_clean'] = df['education'].apply(normalize_education) # 步骤3：提取城市，去掉“·”后面的区域信息 df['city_clean'] = df['city'].astype(str).str.split('·').str[0] # 步骤4：丢弃薪资和城市缺失的记录，避免统计偏差 df = df.dropna(subset=['salary_min', 'salary_max', 'city_clean']) df.to_csv('jobs_clean.csv', index=False, encoding='utf-8-sig') print(f'清洗完成，剩余 {len(df)} 条记录')这段代码的逻辑说明：parse_salary用正则提取数字，处理“15-25K”“20K以上”“15-25K·13薪”等格式；normalize_education把各种变体归到统一层级；城市字段按“·”分割取第一部分。参数方面，encoding建议先用chardet检测原始文件编码，避免乱码。清洗后的 CSV 用utf-8-sig保存，Excel 打开不会乱码。
2.3 把清洗后的数据导入 Django 数据库
清洗完的数据需要进 Django 的数据库。两种方式：一是用python manage.py loaddata加载 fixtures，二是写一个自定义 management command。我一般用后者，因为可以加进度条和错误处理：
# jobs/management/commands/import_jobs.py import csv from django.core.management.base import BaseCommand from jobs.models import Job class Command(BaseCommand): help = '从清洗后的 CSV 导入招聘数据' def handle(self, *args, **options): with open('jobs_clean.csv', 'r', encoding='utf-8-sig') as f: reader = csv.DictReader(f) batch = [] for i, row in enumerate(reader): batch.append(Job( title=row['title'], company=row['company'], salary_min=row['salary_min'] or None, salary_max=row['salary_max'] or None, city=row['city_clean'], education=row['education_clean'], experience=row['experience'], )) if len(batch) >= 500: Job.objects.bulk_create(batch) batch = [] self.stdout.write(f'已导入 {i+1} 条') if batch: Job.objects.bulk_create(batch) self.stdout.write(self.style.SUCCESS('导入完成'))bulk_create比逐条save()快一个数量级，500 条一批是经验值，太大容易撑爆内存。执行python manage.py import_jobs即可。注意 Model 里字段的null=True和blank=True要设对，否则空值会报错。
3. Django 接口层：把统计结果喂给 Echarts
3.1 用 ORM 聚合函数算出 Echarts 需要的四种数据格式
Echarts 折线图需要 x 轴和 y 轴数组，饼图需要{name, value}列表，地图需要城市名和对应数值，词云需要{name, value}且 value 决定字号。这些数据都在 Django 的 View 里用 ORM 算出来，返回JsonResponse。
以“各城市平均薪资”为例：
from django.db.models import Avg, Count from django.http import JsonResponse from jobs.models import Job def city_salary(request): # 按城市分组，计算平均薪资，按薪资降序排列 data = (Job.objects .values('city') .annotate(avg_salary=Avg('salary_min')) .order_by('-avg_salary')[:20]) # 取前20个城市 result = { 'cities': [item['city'] for item in data], 'salaries': [round(item['avg_salary'], 1) for item in data] } return JsonResponse(result)values('city')按城市分组，annotate计算每组的平均薪资，order_by排序后取前 20。返回的 JSON 结构直接对应 Echarts 的xAxis.data和series.data。学历分布用Count聚合，词云用values('skill').annotate(count=Count('id'))，逻辑类似。
3.2 配置 URL 路由和跨域，让前端能拿到数据
Django 的 URL 配置在urls.py里：
from django.urls import path from jobs import views urlpatterns = [ path('api/city_salary/', views.city_salary), path('api/education_dist/', views.education_dist), path('api/skill_wordcloud/', views.skill_wordcloud), path('api/salary_range/', views.salary_range), ]如果前端页面和 Django 不在同一个端口，需要处理跨域。开发阶段用django-cors-headers：
pip install django-cors-headers在settings.py的INSTALLED_APPS加'corsheaders'，MIDDLEWARE加'corsheaders.middleware.CorsMiddleware'，然后设CORS_ALLOW_ALL_ORIGINS = True（仅开发环境）。生产环境要指定具体域名，别偷懒。
3.3 用 Echarts 折线图展示薪资趋势的完整前端代码
前端页面用 Echarts 的 CDN 引入，一个折线图的完整配置如下：
// 初始化图表实例 var chart = echarts.init(document.getElementById('salaryChart')); // 从 Django 接口拿数据 fetch('/api/city_salary/') .then(response => response.json()) .then(data => { var option = { title: { text: '各城市平均薪资排名' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: data.cities, axisLabel: { rotate: 45 } // 城市名太长时倾斜显示 }, yAxis: { type: 'value', name: '薪资(K)' }, series: [{ data: data.salaries, type: 'bar', itemStyle: { color: '#5470c6' } }] }; chart.setOption(option); }); // 窗口大小变化时自适应 window.addEventListener('resize', function() { chart.resize(); });axisLabel.rotate解决 x 轴城市名重叠问题，tooltip.trigger: 'axis'让鼠标悬停显示数值。Echarts 折线图 x 轴刻度用axisLabel.interval: 0强制显示所有标签，数据多时配合rotate使用。饼图把series.type改成'pie'，数据格式换成[{name: '本科', value: 120}, ...]。
4. 可视化图表进阶：地图、词云和动态交互
4.1 Echarts 中国地图的引入与数据绑定
中国地图需要额外引入地图 JSON 文件。Echarts 5 之后地图数据不再内置，需要从官方或第三方获取china.json，用echarts.registerMap注册：
fetch('/static/map/china.json') .then(res => res.json()) .then(mapData => { echarts.registerMap('china', mapData); var chart = echarts.init(document.getElementById('mapChart')); fetch('/api/city_salary/') .then(res => res.json()) .then(data => { var mapOption = { title: { text: '招聘薪资地域分布' }, tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 30, text: ['高', '低'], calculable: true, inRange: { color: ['#e0f3f8', '#4575b4'] } }, series: [{ type: 'map', map: 'china', data: data.cities.map((city, i) => ({ name: city, value: data.salaries[i] })) }] }; chart.setOption(mapOption); }); });visualMap控制颜色渐变，calculable: true允许拖动筛选。注意城市名要和地图 JSON 里的名称完全一致，比如“北京”不能写成“北京市”，否则数据绑不上。这是最常见的翻车点。
4.2 词云图：从技能关键词到字号映射
词云图需要echarts-wordcloud扩展库，在 Echarts 之后引入：
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js"></script>后端接口返回[{name: 'Python', value: 320}, {name: 'Java', value: 280}, ...]，前端配置：
var wordcloudOption = { series: [{ type: 'wordCloud', shape: 'circle', sizeRange: [12, 60], // 字号范围 rotationRange: [-45, 45], textStyle: { color: function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, data: wordcloudData }] };sizeRange决定最小和最大字号，rotationRange控制旋转角度。数据里 value 最大的词字号最大，视觉上最突出。如果词云不显示，先检查echarts-wordcloud是否在echarts之后加载。
4.3 tooltip 自动换行和柱状图自定义图片的配置技巧
Echarts tooltip 内容太长会溢出屏幕，用extraCssText限制宽度并自动换行：
tooltip: { trigger: 'axis', extraCssText: 'max-width: 300px; white-space: normal; word-break: break-all;' }柱状图柱子用自定义图片显示，通过itemStyle.decal或symbol实现。更常见的做法是用pictorialBar：
series: [{ type: 'pictorialBar', symbol: 'image:///static/img/bar-bg.png', symbolSize: [30, 100], data: data.salaries }]symbol的image://后跟图片路径。注意图片尺寸要和symbolSize匹配，否则拉伸变形。这个配置在 Echarts 社区里有大量示例，搜“echarts 柱状图自定义图片”能找到现成模板。
5. 避坑与排查：部署和调试中的五个血泪教训
5.1 静态文件 404：Django 的 static 配置为什么总是不生效
现象：Echarts 的 JS 文件、地图 JSON、CSS 全部 404，页面空白。原因：Django 开发模式下DEBUG=True时静态文件由django.contrib.staticfiles自动处理，但STATIC_URL和STATICFILES_DIRS没配对。解决：在settings.py里确认STATIC_URL = '/static/'，STATICFILES_DIRS = [BASE_DIR / 'static']，模板里用{% load static %}加{% static 'js/echarts.min.js' %}。生产环境用python manage.py collectstatic收集到STATIC_ROOT，交给 Nginx 托管。
5.2 数据库查询太慢：N+1 问题和缺失索引
现象：页面加载超过 10 秒，接口响应慢。原因：循环里逐条查询关联表，或者城市、学历字段没建索引。解决：用select_related和prefetch_related减少查询次数；在 Model 的city、education、salary_min字段上加db_index=True；聚合查询用values().annotate()而不是 Python 循环。数据量超过 10 万条时，考虑加缓存层，把聚合结果存 Redis，设 5 分钟过期。
5.3 Echarts 图表不显示：容器高度为 0 的经典问题
现象：接口返回数据正常，但图表区域一片空白。原因：Echarts 初始化时容器div的高度是 0，或者echarts.init在 DOM 渲染完成前执行。解决：给容器设固定高度style="height: 400px;"，JS 放在DOMContentLoaded事件里或页面底部。如果容器在 Tab 切换里，切换后要调chart.resize()。
5.4 中文乱码：CSV 编码和数据库字符集的双重坑
现象：导入的数据里中文变成问号或乱码。原因：CSV 文件编码是 GBK，Python 用 UTF-8 读；或者 MySQL 数据库字符集不是utf8mb4。解决：读 CSV 时用chardet.detect()检测编码，或直接指定encoding='gbk'；MySQL 建库时用CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci；Django 的DATABASES配置里加'OPTIONS': {'charset': 'utf8mb4'}。
5.5 部署到 Windows 10 后接口 500：Waitress 和 Nginx 的配置顺序
现象：开发模式正常，用 Waitress + Nginx 部署后接口报 500。原因：Nginx 反向代理没转发Host头，或者 Waitress 的--url-prefix和 Django 的FORCE_SCRIPT_NAME不匹配。解决：Nginx 配置里加proxy_set_header Host $host;和proxy_set_header X-Real-IP $remote_addr;；Waitress 启动命令用waitress-serve --listen=0.0.0.0:8000 project.wsgi:application；Django 的ALLOWED_HOSTS加上服务器 IP 或域名。静态文件交给 Nginx 的location /static/处理，别让 Waitress 扛。
6. 进阶技巧：用 Django Admin 做数据校验和定时刷新
6.1 在 Admin 里加自定义过滤器快速定位异常数据
Django Admin 默认能增删改查，但招聘数据里薪资为 0、城市为空这类异常记录，靠肉眼翻页找太慢。加一个自定义过滤器：
from django.contrib import admin from django.utils.translation import gettext_lazy as _ from jobs.models import Job class SalaryRangeFilter(admin.SimpleListFilter): title = _('薪资范围') parameter_name = 'salary_range' def lookups(self, request, model_admin): return ( ('zero', _('薪资为0')), ('high', _('薪资大于50K')), ('normal', _('正常范围')), ) def queryset(self, request, queryset): if self.value() == 'zero': return queryset.filter(salary_min=0) if self.value() == 'high': return queryset.filter(salary_min__gt=50) if self.value() == 'normal': return queryset.filter(salary_min__gt=0, salary_min__lte=50) @admin.register(Job) class JobAdmin(admin.ModelAdmin): list_display = ('title', 'company', 'city', 'salary_min', 'salary_max', 'education') list_filter = (SalaryRangeFilter, 'city', 'education') search_fields = ('title', 'company')list_filter里挂上自定义过滤器后，Admin 右侧会出现筛选面板，点一下就能筛出异常记录。search_fields支持按岗位和公司名搜索。这个技巧在数据清洗阶段特别省时间。
6.2 用 management command 加定时任务刷新统计数据
Echarts 的数据如果每次请求都实时聚合，数据量大时接口会变慢。我一般会写一个定时任务，每 10 分钟把聚合结果算好存到一张统计表里，接口直接读统计表：
# jobs/management/commands/refresh_stats.py from django.core.management.base import BaseCommand from django.db.models import Avg, Count from jobs.models import Job, CitySalaryStat class Command(BaseCommand): help = '刷新城市薪资统计表' def handle(self, *args, **options): CitySalaryStat.objects.all().delete() stats = (Job.objects .values('city') .annotate(avg_salary=Avg('salary_min'), job_count=Count('id')) .order_by('-avg_salary')) CitySalaryStat.objects.bulk_create([ CitySalaryStat(city=s['city'], avg_salary=s['avg_salary'], job_count=s['job_count']) for s in stats ]) self.stdout.write(self.style.SUCCESS(f'刷新了 {len(stats)} 个城市的统计'))Windows 下用“任务计划程序”定时执行python manage.py refresh_stats，Linux 下用 crontab。接口层改成从CitySalaryStat读数据，响应时间能从秒级降到毫秒级。
6.3 验证数据准确性的三个交叉检查方法
做完可视化，怎么确认图表没骗人？我习惯做三个检查：第一，用 Pandas 直接对清洗后的 CSV 做describe()，看薪资的均值、中位数、最大最小值，和 Django 接口返回的聚合结果对比，偏差超过 5% 就要查原因。第二，随机抽 10 条记录，手工核对原始 CSV 和数据库里的字段是否一致，重点看薪资解析和城市提取有没有漏。第三，把 Echarts 图表的数值和 Admin 后台的筛选结果对照，比如地图上“北京平均薪资 25K”，就在 Admin 里筛城市为北京，看平均值是不是 25K。这三个检查做完，基本能排除数据层面的低级错误。
这套 Django + Python + Echarts 的招聘数据可视化方案，从清洗到入库到接口到前端，每个环节都有现成的代码可以抄。我踩过的坑主要集中在静态文件配置、Echarts 容器高度和中文编码上，希望帮到你。
本文还有配套的精品资源，点击获取
