全国招聘岗位就业可视化系统：Flask+ECharts数据闭环实践-育师

简介：这是一套基于Flask与Python构建的全国招聘岗位就业可视化系统，适合计算机相关专业学生用于毕业设计、课程设计或项目初期演示。资源覆盖数据采集、清洗、存储到可视化展示的完整链路，前端包含HTML页面与JavaScript交互逻辑，后端由Python脚本驱动，可直观呈现岗位区域分布、省级与地区划分等就业数据维度。压缩包共54个文件，包含5个Python源码、10个JavaScript文件、1个CSS样式表、1个HTML页面以及36个文本说明和1个Markdown文档，整体仅364KB，结构紧凑，便于快速部署与二次开发。目前已有202人学习下载，代码均经运行验证，并配有文档说明，适合想掌握Flask开发与数据可视化流程的初学者参考进阶。

1. 用 Flask+Python 做全国招聘岗位就业可视化，核心不是“花哨大屏”而是“数据闭环”

“全国招聘岗位就业可视化系统”这个标题，同时押中了三件事：招聘数据怎么来、统计接口怎么出、图表怎么联动。选 Flask 而不是 Django 或 Spring Boot，不是因为 Flask 简单，而是这类项目的价值集中在查询参数设计和数据联动的自由度上，Flask 的轻路由刚好能把“数据导入—统计接口—图表渲染”拆成互不干扰的三条线。“源代码+文档说明”的后缀意味着要按课程设计或内部看板交付，拿到手要能一次跑通、讲得清设计。下文按存储设计、Flask 接口、ECharts 可视化、部署排错四个阶段展开，章节顺序即开发顺序，适合有 Web 基础、想补全数据可视化链路的人，也适合正在准备答辩材料的开发者。

2. 招聘数据采集与存储：用 Python 先定表结构，再决定爬取还是导入

这一章的顺序刻意反着来：先建表，再写爬虫。招聘网站的字段表达差异很大，同一岗位薪资可能是“8千-1.2万”也可能是“15K-20K”，如果先写采集器再去迁表结构，改动成本会翻倍。先定好存储模型，采集脚本和可视化 SQL 都围绕它展开，后面所有接口才有稳定的数据基础。

2.1 招聘数据源选型：公开列表页、开放数据集与采集合规边界

常见的数据来源有三类：招聘网站公开搜索页的列表数据、人社或统计机构发布的开放数据集、以及手工整理的企业招聘明细。第一类最贴合“实时”语义，但要注意目标站点的服务条款与 robots 协议；演示项目只采集公开列表页字段，不采集个人简历、不绕过登录态，这是采集代码的底线。第二类干净但更新慢，适合做历史趋势分析；第三类适合做单元测试和演示兜底。

另一个务实的建议是：如果系统用于答辩或团队演示，第一版直接用 CSV 导入最稳妥。爬虫写好后可能因为页面改版随时失效，而 CSV 导入能保证演示时刻的数据完整性。我一般会同时保留两种方式：scripts/import_csv.py负责批量入库，scripts/crawler.py负责增量补充，README 里把两条命令都写清楚，接手的人就不会纠结“数据到底从哪来”。

2.2 jobs 表结构设计：薪资上下限字段与索引怎么定

SQLite 对课程设计和中小型看板都够用，避免引入 MySQL 的安装和账号成本。核心表结构如下：

CREATE TABLE jobs ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, -- 岗位名称 company TEXT, -- 公司名称 city TEXT NOT NULL, -- 市，如 北京/上海，地图聚合键 industry TEXT, -- 所属行业 salary_min INTEGER, -- 月薪下限，单位 K salary_max INTEGER, -- 月薪上限，单位 K education TEXT, -- 学历要求：大专/本科/硕士/不限 experience TEXT, -- 经验要求：1-3年/3-5年/不限 publish_date TEXT, -- 发布日期 yyyy-mm-dd source TEXT DEFAULT 'csv' -- 数据来源标记 ); CREATE INDEX idx_jobs_city ON jobs(city); CREATE INDEX idx_jobs_edu ON jobs(education);

表的三个设计点值得展开。第一，薪资不存原始字符串，而是拆成salary_min和salary_max两个整数字段，单位为 K/月，这样聚合 SQL 可以直接AVG((salary_min + salary_max) / 2)算平均薪资，区间筛选也能用salary_min >= 8表达“月薪 8K 以上”。第二，城市字段单独一列而不是省市区拼一个字符串，因为后面 ECharts 地图要按市级粒度聚合，字段越干净，GROUP BY越省事。第三，为 city 和 education 建了普通索引，统计接口的查询条件都落在这些列上，数据量到几万条时索引收益明显。

薪资文本解析是入库前最需要统一口径的地方，常见的原文形态和落库规则如下：

原始文本	salary_min	salary_max	处理方式
15K-20K	15	20	统一单位 K 后拆分
8千-1.2万	8	12	先转 K 再拆分
20K以上	20	20	下限当作上下限
面议 / 未标注	NULL	NULL	跳过该条并记日志

提示：薪资解析失败时不要中断整轮采集，把异常记录到logs/failed_parse.log，事后统一补采，比逐条重跑整批数据效率高。

2.3 requests+lxml 爬虫脚本的限速参数与薪资文本解析

用 requests 配合 lxml 做列表页采集是常见做法，核心代码如下：

import random import time import requests from lxml import html HEADERS = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)"} def parse_salary(text): # 将 "15K-20K" 或 "8千-1.2万" 解析为 (min, max)，单位 K text = text.replace("K", "k").replace("千", "k").replace("万", "*10k") numbers = re.findall(r"[\d\.]+", text) if "万" in text: return (float(numbers[0]) * 10, float(numbers[1]) * 10) return (float(numbers[0]), float(numbers[1])) def fetch_job_list(page): url = "https://example-jobsite.com/api/jobs/list" params = {"page": page, "size": 50} resp = requests.get(url, params=params, headers=HEADERS, timeout=10) resp.raise_for_status() for item in resp.json().get("data", []): yield { "title": item["title"], "company": item["company_name"], "city": item["city"], "salary_min": parse_salary(item["salary_text"])[0], "salary_max": parse_salary(item["salary_text"])[1], "education": item.get("education", "不限"), } for page in range(1, 6): for job in fetch_job_list(page): insert_job(job) time.sleep(random.uniform(3, 6)) # 限速，避免对目标站点造成压力

parse_salary负责把“15K-20K”这类文本解析成 (15, 20)，要兼容“8千-1.2万”就要先统一单位再拆分，用re.findall提取数字后按单位换算，这是爬虫里最容易出 bug 的部分。time.sleep(random.uniform(3, 6))是限速的关键参数，固定 sleep 3 秒容易被识别成脚本特征，随机区间更接近人工浏览节奏。resp.raise_for_status()在请求失败时直接抛出异常，避免把错误页当列表页解析出空数据。

2.4 pandas 批量导入 CSV：演示场景的保底数据入口

import pandas as pd import sqlite3 df = pd.read_csv("data/jobs.csv", encoding="utf-8") print(df.isna().sum()) # 先看缺失值分布 conn = sqlite3.connect("instance/jobs.db") df.to_sql("jobs", conn, if_exists="append", index=False) conn.close()

pandas 的to_sql按 DataFrame 列名直接映射表字段，要求 CSV 表头与 jobs 表列名一致。导入前一定要用df.isna().sum()检查缺失值，缺薪资的记录可以过滤掉或写进jobs_invalid临时表，避免主表里出现 NULL 导致聚合接口报错。if_exists="append"表示追加而不是覆盖，重复导入时要先去重，否则统计数字会翻倍。

3. Flask 后端接口：把统计逻辑收敛进查询参数，而不是写死在前端

后端是整个系统的“翻译层”：把数据库里的明细记录翻译成图表需要的聚合结果。这一章讲清楚 Flask 项目怎么组织、统计接口怎么写、参数怎么设，以及为什么不要把聚合逻辑散落在前端。

3.1 Flask 项目结构：用 Blueprint 拆分统计路由

课程设计里最常见的反面写法是十几个路由全写在app.py里。当接口数量超过 8 个后，调试和答辩讲解都会变困难。常见做法是用应用工厂加 Blueprint 拆分：

app/ ├── __init__.py # create_app 工厂函数 ├── blueprints/ │ ├── __init__.py │ └── stats.py # 统计聚合接口 ├── db.py # get_db 连接管理 ├── models.py # 查询 SQL 封装 ├── templates/ └── static/

工厂函数的好处是测试和部署可以传入不同配置，比如测试时用内存数据库、生产用磁盘数据库，不用改业务代码。db.py里用sqlite3.Row作为行工厂，查询结果就能按字典取字段，JSON 序列化时省一轮字段映射。答辩时讲这个结构，也比讲“所有代码在一个文件里”有说服力。

3.2 Flask 统计接口 /api/overview 的查询参数与防注入写法

from flask import Blueprint, jsonify, request, g import sqlite3 stats_bp = Blueprint("stats", __name__) def query_db(sql, args=()): g.db.row_factory = sqlite3.Row return g.db.execute(sql, args).fetchall() @stats_bp.route("/api/overview") def overview(): city = request.args.get("city", "").strip() keyword = request.args.get("keyword", "").strip() conditions, params = [], [] if city: conditions.append("city = ?") params.append(city) if keyword: conditions.append("(title LIKE ? OR company LIKE ?)") params.extend([f"%{keyword}%", f"%{keyword}%"]) where = f"WHERE {' AND '.join(conditions)}" if conditions else "" rows = query_db(f""" SELECT COUNT(*) AS total, ROUND(AVG((salary_min + salary_max) / 2.0), 1) AS avg_salary FROM jobs {where} """, params) return jsonify({"code": 0, "data": dict(rows[0])})

city和keyword是两个最核心的筛选参数：city走等值匹配，用于地图点击下钻；keyword走 LIKE 模糊匹配，用于搜索框。这里用列表拼接 where 子句而不是直接拼字符串，参数全部通过?占位符传入，从源头避开 SQL 注入。ROUND(AVG(...), 1)把平均薪资保留一位小数，前端 tooltip 直接显示，不需要再格式化。

接口参数的口径要写进文档，方便前后端对齐：

参数	类型	默认值	含义
city	string	空，表示全国	城市等值筛选
keyword	string	空	岗位或公司名模糊匹配
edu	string	不限	学历要求筛选

3.3 GROUP BY 聚合：地域分布与薪资区间的两个接口写法

地图和柱状图对应的接口都是单表聚合，差别只在分组维度：

@stats_bp.route("/api/jobs/geo") def geo_distribution(): city = request.args.get("city") where, params = "", [] if city: where, params = "WHERE city = ?", [city] rows = query_db(f""" SELECT city, COUNT(*) AS job_count, ROUND(AVG((salary_min + salary_max) / 2.0), 1) AS avg_salary FROM jobs {where} GROUP BY city ORDER BY job_count DESC LIMIT 100 """, params) return jsonify({"code": 0, "data": [dict(r) for r in rows]})

GROUP BY city输出的是“城市→岗位量→平均薪资”三元组，直接可以喂给地图的 data 数组。LIMIT 100防止城市数量过多导致前端渲染卡顿。薪资分布接口GET /api/jobs/salary?city=北京则用GROUP BY salary_max统计薪酬区间上的岗位数量，前端画柱状图。两个接口都复用query_db，查询逻辑集中在models.py而不是散在路由里，答辩时能讲清“路由管参数校验、模型管 SQL、模板管展示”的分层。

3.4 Flask 接口的统一响应、缓存与 CORS

三个接口的返回结构统一用{"code": 0, "data": ...}，错误时 code 非 0 并带 msg 字段，前端 fetch 只需要判断code === 0。聚合接口在数据量大时会有明显耗时，可以用functools.lru_cache包一层带参数的查询函数：

from functools import lru_cache @lru_cache(maxsize=128) def geo_cache(city=""): return compute_geo(city)

geo_cache的缓存键是参数字符串，城市筛选变化时自动命中不同的缓存项。maxsize控制在 128，防止筛选组合过多撑爆内存。如果前端单独跑在另一个调试端口，还需要给 Flask 加flask-cors的CORS(app)，否则浏览器会拦截跨域请求，这是前后端分离调试中最高频的报错之一。

4. 可视化大屏：ECharts 全国地图与 Flask 接口联动的完整写法

系统到了这一步才真正“可视化”。选 ECharts 而不是 Chart.js 或 AntV，是因为它对中国地图、散点图和 visualMap 热力分层的支持最省事，招聘行业画像类图表几乎都能覆盖。

4.1 大屏布局与本地静态资源：不依赖 CDN 的页面组织

templates/dashboard.html 用 CSS Grid 分三栏：左侧行业和学历分布、中间全国地图、右侧薪资和经验分布，顶部放筛选栏。静态资源用本地文件而不是 CDN，是因为答辩现场的展示环境可能没有外网，CDN 加载失败会让整个页面白屏。图表与接口的对应关系要在一开始就定好：

区域	图表类型	数据接口	返回字段
顶部	统计卡片	/api/overview	total, avg_salary
中央	全国岗位分布地图	/api/jobs/geo	city, job_count
右侧	薪资区间柱状图	/api/jobs/salary	salary_max, count

4.2 全国地图 geoJSON 注册：ECharts 5 地图加载的坑

ECharts 5 移除了内置的全国地图，直接geo: { map: 'china' }会静默失败，只显示空白底图。需要先把 GeoJSON 下载到本地并注册：

fetch('/static/js/china.json') .then(res => res.json()) .then(geoJson => { echarts.registerMap('china', geoJson); initMap(); });

registerMap的第一个参数是注册名，后续geo和series.map都要引用同一个名字。china.json 约几十 KB，属于项目必需资源，README 里必须写清来源，否则其他人拿到项目时地图区域会一直是灰的。地图上的散点用effectScatter效果更直观，但视觉层次主要靠 visualMap 的分段设色：

visualMap: { min: 0, max: 60, text: ['高', '低'], inRange: { color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4'] }, seriesIndex: 0 }

inRange.color是一个从低到高的渐变数组，低值浅色高值深色，比默认的单一色更有层次。max不要写死成 60，最好根据接口返回的job_count最大值动态生成，写死会导致部分城市的数据溢出到最高档色，图表语义就被破坏了。

4.3 fetch 接口联动：城市下钻与参数拼装代码

async function refreshCharts() { const params = new URLSearchParams(); if (currentCity) params.set('city', currentCity); if (keyword) params.set('keyword', keyword); const res = await fetch(`/api/jobs/geo?${params.toString()}`); const json = await res.json(); if (json.code !== 0) { showError(json.msg); return; } mapChart.setOption({ series: [{ type: 'effectScatter', data: json.data.map(d => ({ name: d.city, value: [cityCoord[d.city][0], cityCoord[d.city][1], d.job_count], salary: d.avg_salary })) }] }); }

URLSearchParams负责拼装 city 和 keyword，比手写字符串拼接干净得多。setOption用增量更新的方式传入新数据，ECharts 会自动 diff 并保留其他配置。地图点击下钻通过mapChart.on('click', params => { currentCity = params.name; refreshCharts(); })实现，某个城市被点击后，overview、薪资柱状图、行业饼图全部按该城市重新请求——这就是标题里“联动”的完整语义。

提示：cityCoord是城市名到经纬度的映射表，如果 GeoJSON 的 features 里带了 properties，可以用它动态生成，避免手写几百个城市坐标。

4.4 tooltip formatter 格式化：图表可读性的最后一道工序

默认 tooltip 直接显示value数组会很乱，用 formatter 收口：

tooltip: { trigger: 'item', formatter(params) { const v = params.data.value || []; return `${params.name}<br/>岗位数量：${v[2] || 0} 个<br/>平均薪资：${params.data.salary || '-'} K`; } }

params.name是城市名，v[2]是配置在 value 数组第三位的岗位数。这里把“平均薪资”放在params.data的扩展字段里而不是塞进 value，是为了不破坏 ECharts 对 value 数组的解析。表单的筛选事件（城市、关键词、学历）统一走refreshCharts，所有图表只从接口数据驱动，页面里不缓存任何聚合结果，这样前后端的数据口径始终一致。

5. 把 Flask 可视化系统部署上线：命令与三个高频排错点

可视化系统开发完只跑了一半，能部署到服务器上让别人打开才算交付。这一章给最小可用的上线方案，以及三个最容易让项目跑不起来的排错点。

5.1 gunicorn + Nginx：Flask 可视化的最小上线配置

pip install gunicorn gunicorn -w 4 -b 127.0.0.1:8000 "app:create_app()"

-w 4是 worker 进程数，按 CPU 核数乘 2 设置即可；"app:create_app()"是应用工厂的调用写法，注意不要带着 debug 模式上线。Nginx 负责请求转发和静态资源分发：

location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; }

5.2 三个高频排错点：地图白屏、SQLite 线程冲突、中文乱码

地图白屏：几乎都是registerMap没执行或 china.json 返回 404。先按 F12 开 Network 面板确认文件加载状态，再确认注册发生在echarts.init之前，两个顺序反了就会静默失败。SQLite 线程冲突：Flask 默认多线程处理请求，多线程下sqlite3.connect需要传check_same_thread=False，或者用 flask 的g对象按请求持有连接，否则会报Database is locked。中文乱码：检查响应头是否带charset=utf-8，以及 CSV 导入时是否指定了encoding="utf-8"，这两个地方不一致就会出现“页面里全是问号”的现象。