基于 jQuery + ECharts 打造的生涯规划 / 心理测评 PC 端系统模板。开箱即用，替换品牌素材即可上线。
一套测评系统的前端，难点不在页面数量，而在”专业感”的还原：量表答题的节奏、六型人格的雷达图、结果解释的图文编排、投档线查询的数据表格——这些页面既要懂心理测评业务，又要懂图表可视化，通用后台模板完全覆盖不了，定制开发报价动辄数万。
这套模板以”智远生涯评测系统（睿智愿）”为完整业务样本，把测评首页、量表答题、霍兰德 / 爱森克结果解释、综合素质评测、高校投档线查询七类核心页面全部做完，ECharts 图表与量表文案均已就位；index.html 为演示导航页，可一页速览全部页面。
模板亮点
1. 7 个核心页面，测评全链路
测评首页（评测分类入口）、测评答题、霍兰德 SDS 量表（职业兴趣图谱）、霍兰德结果解释（AIS 类型）、爱森克人格结果解释、综合素质评测（奖项 / 科目填报）、高校投档线查询结果，从”开始测评”到”结果解读 + 院校定位”的完整闭环。
2. 专业量表答题页
题目 + 单选（”是 / 否”两档与”有影响 / 有点影响”四档两种题型）排版规整，附答题须知提示（”共计 50 道选择题”），侧边量表类型 Tab（常规型 / 现实型 / 研究型 / 管理型 / 社会型）即点即换，答题节奏与真实测评产品一致。
3. ECharts 专业图表
- 性格图谱雷达图：霍兰德与爱森克结果页均内置雷达图呈现各维度得分
- 职业兴趣图谱：六型兴趣维度可视化对比
- 图表基于 ECharts 3.4.0，数据配置集中在页面 script 内，替换数值即可复用
4. 结果解释图文体系
霍兰德 AIS 典型类型解释、性格特征、职业建议、行业方向，艾森克人格问卷（EPQ）量表说明与评测得分——专业量表文案结构完整，改写即可用于任意测评产品。
5. 升学规划场景组件
综合素质评测页内置省份选择、文理分科、五大学科竞赛（数理化生信）与获奖等级（省三 ~ 国一）、科技创新大赛等多选填报；投档线查询结果页为标准数据表格（含模拟投档线说明），自主招生 / 生涯规划业务直接可用。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.7.2 | DOM 操作 / 交互逻辑 |
| ECharts | 3.4.0 | 性格图谱 / 雷达图可视化 |
| LESS | – | 样式源码（less/style.less） |
项目结构
pcxt/
├── index.html # 模板演示导航页（速览全部页面）
├── 01.html # 测评首页（评测分类：PDP 性格测评等入口）
├── 02.html # 测评答题（题目 + 单选 + 答题须知）
├── 03.html # 霍兰德 SDS 量表（职业兴趣图谱 + 六型切换）
├── 04.html # 霍兰德结果解释（AIS 类型 + 性格图谱雷达图）
├── 05.html # 爱森克人格结果解释（EPQ 评测得分）
├── 06.html # 综合素质评测（省份 / 科目 / 竞赛奖项填报）
├── 07.html # 高校投档线查询结果（数据表格）
├── css/
│ └── style.css # 主样式（编译产物，主题色 #b51b27）
├── less/
│ └── style.less # 样式源码
├── js/
│ ├── jquery.js
│ └── echarts.min.js
└── img/ # 图标与占位图素材快速开始
纯静态模板，无需安装任何依赖：
# 方式一：浏览器直接打开
双击 index.html 或 01.html 即可浏览
# 方式二：本地静态服务器（推荐）
python3 -m http.server 8080
# 访问 http://localhost:8080
# 方式三：VS Code Live Server 插件
右键 index.html → Open with Live Server二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/ 中 logo 与配图，修改页头热线与导航文案 |
| 修改量表题目 | 02.html 内题目与选项为标准 dl 结构，复制增删即可 |
| 更换图表数据 | 各结果页 script 内 ECharts option 数据直接改数值 |
| 更换主题色 | 修改 less/style.less 中主色 #b51b27（深红）后重新编译，或直接改 css/style.css |
| 增删页面 | 复制任一内页为模板，改面包屑、标题与正文即可 |
适用场景
心理测评系统、生涯规划 / 新高考选科平台、自主招生评测、HR 人才测评、MBTI / 霍兰德 / EPQ 类测评产品原型，也可作为任何”问卷答题 + 图表结果报告”类系统的前端底版。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 3~4 周起 | 1~2 天上线 |
| 页面还原度 | 反复验收 | 7 页成品直接演示 |
| 交互与图表 | 逐一开发 | 答题页 / 雷达图 / 数据表格齐备 |
| 专业文案 | 需查资料 | 量表说明与结果解释结构现成 |
| 维护成本 | 自行承担 | 纯静态结构，改数据即可迭代 |
在线预览
将整个目录部署至任意静态托管（GitHub Pages / Vercel / 阿里云 OSS 等）即可在线访问；index.html 为全部页面的演示导航入口。
评论0