企业官网建设流程全解析

简介：这份资源是面向数据分析初学者与Django入门开发者的实战项目包，围绕招聘数据可视化这一典型场景，将Django、Python与Echarts三者结合，帮助读者理解从数据获取、清洗、统计分析到前端图表呈现的完整链路。项目以Django搭建后端接口，Python负责招聘数据的预处理与统计计算，Echarts则承担柱状图、折线图等交互式图表的渲染，适合作为课程设计、毕业设计或自学练手参考。压缩包共165个文件，以51个js、39个json、14个py、12个css及html模板、sqlite3数据库等为主，涵盖前端脚本、后端逻辑、样式资源与数据文件，整体约4.65MB，目录结构清晰，便于按模块查阅。目前已有2954人学习下载，读者可从中获得可运行的项目骨架、前后端数据交互思路以及Echarts图表配置的实践参考，快速上手类似的数据可视化Web应用开发。

1. 从一份 Django 招聘分析包说起：它到底能跑出什么结果

招聘网站的数据爬下来容易，堆成 CSV 之后基本就躺在硬盘里吃灰。我见过太多人手里攥着几万条岗位记录，却只会用 Excel 拉个透视表，翻两页就卡得动不了。这份「Django+Python+Echarts 对招聘数据进行可视化分析」的资源包，解决的正是从原始数据到可交互看板的最后一公里：后端用 Django 起服务、管数据，前端用 Echarts 把薪资分布、学历要求、城市热度画成能点能筛的图表。它适合两类人——刚学完 Python 基础、想找一个完整 Web 项目练手的入门者，以及需要快速搭一套内部数据看板的从业者。你拿到的不只是一堆 py 文件，而是一条能跑通的链路：数据入库、接口出数、图表渲染。下面我按自己拆包复现的顺序，把这条链路拆开讲。

2. 环境与依赖：把 Django 和 Echarts 的版本对齐

2.1 为什么先锁版本再动手

Django 的版本差异在招聘分析这类项目里体现得特别明显。2.x 和 3.x 在路由写法、url()与re_path()的取舍上就不一样，4.x 又砍掉了ugettext这类老接口。如果你直接pip install django拉最新版，跑一份两三年前写的项目，大概率在启动阶段就报ImportError。我的习惯是先看项目里的requirements.txt或settings.py顶部注释，确认它按哪个大版本写的。没有说明文件时，Django 3.2 是兼容性最稳的落点，它同时支持path()和老的url()写法，对新手项目友好。

Python 侧同理。这份资源涉及数据处理，通常会用到 pandas 或直接读 CSV，Python 3.8 到 3.10 都能覆盖。别用 3.12 去跑老项目，部分依赖轮子还没跟上，装 numpy 时容易卡在编译。常见做法是建一个独立虚拟环境，把项目依赖和系统环境隔开，避免污染。

2.2 建环境、装依赖的完整命令

# 建虚拟环境，python3 -m venv 是标准做法，不依赖第三方工具 python3 -m venv venv # 激活：Linux/macOS 用 source，Windows 用 venv\Scripts\activate source venv/bin/activate # 升级 pip，老版本 pip 装某些包会解析失败 python -m pip install --upgrade pip # 装核心依赖，django 锁 3.2，pandas 用于数据清洗 pip install django==3.2 pandas # 如果项目带 requirements.txt，直接按文件装更省事 pip install -r requirements.txt

命令背后的逻辑：venv把解释器和 site-packages 隔离，删掉 venv 目录就等于卸载干净，不会残留。django==3.2用双等号锁死小版本，避免自动升到 4.x 引发接口不兼容。装完用python -m django --version验证，输出 3.2.x 才算成功。如果pip install pandas报编译错误，先确认系统有没有装编译工具链，Windows 上多半是缺 Visual C++ Build Tools，换用pip install pandas --only-binary :all:强制走预编译轮子。

2.3 Echarts 的引入方式与版本选择

Echarts 是纯前端库，不经过 pip。项目里一般有两种引法：CDN 直连或本地静态文件。CDN 写法简单，但离线环境会白屏；本地文件稳，但要手动放进static/目录。我倾向本地引入，招聘分析看板经常在内网跑，断网是常态。

<!-- 放在模板的 head 或 body 底部，本地路径以 static 目录为根 --> <script src="/static/js/echarts.min.js"></script>

参数说明：src指向 Django 配置的静态文件路径，settings.py里STATIC_URL决定前缀。Echarts 5.x 和 4.x 的配置项大体兼容，但 5.x 默认主题和部分交互有调整。如果你从网上抄的配置在 5.x 下渲染异常，先查是不是series里的type拼写或itemStyle结构变了。验证引入是否成功，浏览器控制台敲echarts能返回对象即可。

3. 数据层：把招聘 CSV 灌进 Django 模型

3.1 模型设计决定后续查询顺不顺

招聘数据的字段看着杂，核心就那么几列：岗位名称、公司、城市、薪资、学历、经验、技能标签。设计模型时最容易翻车的是薪资——原始数据里常写成「15-25K·13薪」这种字符串，直接存 CharField 后面没法算平均值。我的做法是拆成salary_min、salary_max两个整数字段，单位统一成「千/月」，清洗阶段就把「K」「薪」这些噪声剥掉。

# models.py from django.db import models class Job(models.Model): title = models.CharField(max_length=200) # 岗位名称 company = models.CharField(max_length=200) # 公司名 city = models.CharField(max_length=50) # 城市 salary_min = models.IntegerField(default=0) # 月薪下限，单位千 salary_max = models.IntegerField(default=0) # 月薪上限，单位千 education = models.CharField(max_length=20) # 学历要求 experience = models.CharField(max_length=20) # 经验要求 skills = models.TextField(blank=True) # 技能标签，逗号分隔 class Meta: db_table = 'job' indexes = [models.Index(fields=['city'])] # 城市查询频繁，加索引

逻辑说明：salary_min/max用 IntegerField 是为了后续Avg、Max聚合能直接算，省去在 Python 层再转换。skills用 TextField 存逗号分隔串，简单场景够用；如果要做技能共现分析，得再拆一张关联表，那是进阶玩法。Meta里给city加索引，是因为按城市分组统计是看板最常触发的查询，几万条数据下有没有索引差别很明显。

3.2 数据导入脚本与清洗边界

模型建好后执行迁移，再写一个管理命令或独立脚本把 CSV 读进来。别用 Django shell 一行行敲，数据量一大就崩。

# import_jobs.py，放在项目根目录，用 python import_jobs.py 跑 import csv, os, django os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'recruit.settings') django.setup() from analysis.models import Job def parse_salary(raw): # 输入形如 "15-25K" 或 "20K以上"，返回 (min, max) raw = raw.replace('K', '').replace('k', '').split('·')[0] if '-' in raw: lo, hi = raw.split('-') return int(float(lo)), int(float(hi)) num = int(float(raw.replace('以上', '').replace('以下', ''))) return num, num with open('jobs.csv', encoding='utf-8') as f: reader = csv.DictReader(f) batch = [] for row in reader: try: lo, hi = parse_salary(row['salary']) except (ValueError, KeyError): continue # 薪资解析失败的脏数据直接跳过 batch.append(Job( title=row['title'], company=row['company'], city=row['city'], salary_min=lo, salary_max=hi, education=row.get('education', ''), experience=row.get('experience', ''), skills=row.get('skills', '') )) Job.objects.bulk_create(batch, batch_size=500)

参数说明：bulk_create的batch_size=500是经验值，太小频繁写库慢，太大占内存，500 到 1000 之间比较稳。parse_salary里先split('·')是为了砍掉「13薪」后缀，只留薪资主体。try/except捕获解析异常并continue，保证一条脏数据不会中断整批导入——这是血泪经验，招聘数据里「面议」「薪资open」这类值很常见，不处理就等着脚本半路挂掉。导入完用Job.objects.count()核对条数，和 CSV 行数对不上就说明有被跳过的记录，回头查是哪类值没覆盖。

3.3 聚合查询：把统计逻辑放在数据库层

看板要的薪资分布、城市 Top10、学历占比，全都能用 Django ORM 的聚合直接出，不用把数据全拉到 Python 里循环。

from django.db.models import Avg, Count # 各城市岗位数量，降序取前 10 city_stats = Job.objects.values('city').annotate(cnt=Count('id')).order_by('-cnt')[:10] # 各学历的平均薪资下限 edu_salary = Job.objects.values('education').annotate(avg_sal=Avg('salary_min')) # 薪资区间分布，用条件计数 bins = [(0, 10), (10, 20), (20, 30), (30, 100)] dist = [] for lo, hi in bins: c = Job.objects.filter(salary_min__gte=lo, salary_min__lt=hi).count() dist.append({'range': f'{lo}-{hi}K', 'count': c})

逻辑说明：values().annotate()等价于 SQL 的GROUP BY，统计在数据库完成，返回的是精简结果集，比Job.objects.all()再在 Python 里数快一个量级。order_by('-cnt')[:10]的切片对应 SQL 的LIMIT，别在切片后再做 Python 排序，那样索引白建。薪资分箱用filter加count逐段统计，区间边界用__gte和__lt保证不重不漏。这些结果直接喂给 Echarts 的series.data，中间不需要额外转换。

4. 接口与图表：Django 出 JSON，Echarts 吃数据

4.1 用 JsonResponse 打通前后端

Django 模板直出图表数据会让 HTML 变得又长又难维护，正确姿势是单独开接口返回 JSON，前端用 fetch 拿。视图函数保持薄，统计逻辑复用上一章的查询。

# views.py from django.http import JsonResponse from django.db.models import Count from .models import Job def city_chart(request): data = list(Job.objects.values('city').annotate(value=Count('id')).order_by('-value')[:10]) return JsonResponse({'data': data}, json_dumps_params={'ensure_ascii': False})

参数说明：json_dumps_params={'ensure_ascii': False}是关键，不加的话中文城市名会变成\uXXXX转义，虽然前端能解析，但调试时看着糟心。list()把 QuerySet 转成列表，JsonResponse 才能序列化。接口路径在urls.py里配path('api/city/', views.city_chart)，前端请求/api/city/即可。注意别在视图里做重查询，一个看板可能同时请求五六个接口，每个都全表扫描会拖垮响应。

4.2 Echarts 柱状图与饼图的配置要点

拿到 JSON 后，前端把data里的city和value拆成两个数组塞进 Echarts。柱状图适合看城市排名，饼图适合看学历占比。

// 城市岗位柱状图 fetch('/api/city/') .then(res => res.json()) .then(res => { const cities = res.data.map(d => d.city); const counts = res.data.map(d => d.value); const chart = echarts.init(document.getElementById('cityChart')); chart.setOption({ tooltip: { trigger: 'axis' }, // 悬停显示数值 xAxis: { type: 'category', data: cities, axisLabel: { rotate: 30 } }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: counts, itemStyle: { color: '#5470c6' } // 统一配色，避免默认随机 }] }); });

逻辑说明：trigger: 'axis'让提示框按整列触发，鼠标在柱子上滑动时能同时看到城市和数值。axisLabel.rotate: 30解决城市名过长导致的横轴重叠，这是中文标签最常见的显示问题。itemStyle.color显式指定颜色，不写的话 Echarts 会用默认色板，多个图表放一起容易花。饼图配置换series.type: 'pie'，数据项要{name, value}结构，把接口返回的city/value映射成name/value即可。图表容器div必须有明确高度，否则init出来是 0 像素，白屏且不报错——这个坑我踩过不止一次。

4.3 静态文件与模板的接线

Django 开发模式下静态文件要配STATICFILES_DIRS，模板里用{% static %}标签引资源，别写死绝对路径。

# settings.py 片段 STATIC_URL = '/static/' STATICFILES_DIRS = [BASE_DIR / 'static']

模板里{% load static %}之后，<script src="{% static 'js/echarts.min.js' %}"></script>会自动拼出正确路径。生产环境这套要换成collectstatic加 Web 服务器托管，开发阶段用runserver就够。启动python manage.py runserver，浏览器开127.0.0.1:8000，图表不出来先按 F12 看 Network 里接口是不是 404，再看 Console 有没有 JS 报错，两步就能定位是后端没出数还是前端没渲染。

5. 避坑与排查：复现时最容易翻车的五处

5.1 图表白屏但接口有数据

现象：接口返回 200，JSON 内容正常，页面上图表区域一片空白。原因多半是容器div没设高度，Echarts 初始化时拿到的宽高是 0，画布渲染不出来。解决：给容器加style="width:100%;height:400px"，或者用 CSS 类固定高度，再调chart.resize()适配窗口变化。

5.2 中文乱码或转义

现象：城市名显示成\u5317\u4eac这种。原因是 JsonResponse 默认ensure_ascii=True。解决：加json_dumps_params={'ensure_ascii': False}。如果 CSV 导入阶段就乱码，检查文件编码，open()时显式写encoding='utf-8'，Windows 下 Excel 导出的 CSV 常是 GBK，得先转码。

5.3 薪资平均值算出来是 0

现象：Avg('salary_min')结果全是 0。原因是导入时薪资字段没解析成功，全落到了默认值 0。解决：回查parse_salary覆盖了哪些格式，把「面议」「薪资open」这类值单独标记或排除，别让它们进统计。导入后先跑一条Job.objects.filter(salary_min=0).count()，数量异常就说明解析逻辑有漏。

5.4 迁移报 no such table

现象：python manage.py migrate后查询仍报表不存在。原因是模型改了但没生成迁移文件，或者 app 没加进INSTALLED_APPS。解决：确认 app 名在INSTALLED_APPS列表里，然后python manage.py makemigrations再migrate。改了模型字段后必须重新走这两步，光改models.py数据库不会自动同步。

5.5 大数据量下接口超时

现象：数据涨到十几万条后，看板加载转圈半天。原因是聚合查询没走索引，或者一次返回了全量数据。解决：给city、education这类分组字段加索引；接口里限制返回条数，Top10 就[:10]，别把几万条城市明细全吐给前端；必要时用values()只取需要的列，减少数据传输。

6. 进阶：把静态看板做成可筛选的交互分析

基础版跑通后，看板还是「死」的——只能看全量数据，没法按城市或学历下钻。真正好用的招聘分析工具得支持筛选联动。做法是在接口上加查询参数，前端把下拉框的值拼进请求。

# views.py 改造，支持按城市过滤 def city_chart(request): city = request.GET.get('city') # 前端传 ?city=北京 qs = Job.objects.all() if city: qs = qs.filter(city=city) data = list(qs.values('education').annotate(value=Count('id')).order_by('-value')) return JsonResponse({'data': data}, json_dumps_params={'ensure_ascii': False})

前端加一个<select>，change事件里重新 fetch 并chart.setOption(option, true)，第二个参数true表示不合并旧配置，避免残留数据。这套「参数化接口 + 重渲染」的模式能套到薪资区间、经验要求上，组合出多维筛选。

再往上一层是缓存。招聘数据不是实时变动的，每次请求都查库浪费。Django 自带缓存框架，把聚合结果缓存 5 到 10 分钟，看板响应能从几百毫秒降到几十毫秒。

from django.core.cache import cache def city_chart(request): key = 'city_chart_data' data = cache.get(key) if data is None: data = list(Job.objects.values('city').annotate(value=Count('id')).order_by('-value')[:10]) cache.set(key, data, 300) # 缓存 300 秒 return JsonResponse({'data': data}, json_dumps_params={'ensure_ascii': False})

参数说明：cache.set第三个参数是过期秒数，300 秒适合数据更新不频繁的场景。开发阶段用本地内存缓存就够，生产环境换 Redis 更稳。注意缓存键要带上筛选参数，否则不同城市的请求会互相覆盖，key = f'city_chart_{city}'这样拼。

验证整套链路是否正常，我一般按这个顺序走一遍：先Job.objects.count()确认数据量，再逐个访问接口看 JSON 结构，最后开页面点筛选看图表是否跟着变。哪一步断了就停在哪查，别跳步。从那以后我每次拿到这类 Django 可视化包，都强制先跑通「导入一条数据 → 出一个接口 → 渲染一张图」的最小闭环，再往上堆功能，这样出问题能立刻定位是数据、接口还是前端。希望帮到你。

本文还有配套的精品资源，点击获取