← 返回博客列表

政务数据大屏实战：单文件 HTML + ECharts 做出省级人社数据驾驶舱

数据可视化 📅 2026-08-01 👁 阅读 0 ⏱ 约 9 分钟

作者：Y2Ksoft 技术团队 ｜ 分类：数据可视化 / 政务信息化

政府部门的"数据发布"栏目往往只有静态表格，领导想看趋势、想看市州对比，还得自己导 Excel 画。本文以我们刚上线的《贵州省人力资源与社会保障管理系统》为例，拆解如何用一个 HTML 文件 + ECharts，零后端、零构建，做出对标省厅数据发布口径的政务数据驾驶舱。

一、为什么用"单文件 HTML + ECharts"做政务系统

政务数据有两个特点：口径必须权威（不能瞎编指标）、展示必须稳（汇报现场不能崩）。我们选单文件方案，理由是：

注意：官网（rst.guizhou.gov.cn/sjfb）各年度报表详情页是跳转页、URL 规律不透明，无法直接抓取逐年数值。因此系统种子数据按人社部统计公报口径做贵州省合理估算，界面明确标注"示例数据 非官方统计"。拿到真实报表后再替换数组即可。

二、系统对标省厅的 7 大年度指标

我们完全照搬省人社厅"数据发布"年度栏目结构，覆盖 7 大维度，再加就业、人才、欠薪、政务 4 个派生模块，共 11 个一级模块：

对标栏目系统模块核心指标（单位）
城镇就业和失业人数城镇就业监测城镇新增就业(万人)、登记失业率(%)、再就业(万人)
基本养老保险基本养老保险职工/居民参保(万人)、基金收支(亿元)、待遇(元/月)
失业保险失业保险参保(万人)、基金收入/支出/结余(亿元)
工伤认定 / 劳动能力鉴定工伤保险认定件数、鉴定 1-10 级分布
劳动争议案件劳动争议仲裁受理/结案(件)、结案率(%)

三、图表选型：不同数据用不同图

政务汇报最忌"一图走天下"。我们按数据性质选图：

四、关键工程细节：所有图表必须显示数字

政务汇报里，领导最常问"这个柱子是多少？"。所以我们的铁律是：每张图都要把数值标出来。我们用一个统一的 setChart(id, opt) 封装，在 setOption 前自动注入 label：

function applyLabels(opt){
  const ser = Array.isArray(opt.series)?opt.series:[opt.series];
  const yCat = opt.yAxis && (Array.isArray(opt.yAxis)
    ? opt.yAxis.some(a=>a&&a.type==='category')
    : opt.yAxis.type==='category');
  ser.forEach(s=>{
    if(s.type==='line')   s.label={show:true,position:'top',formatter:o=>fmtNum(o.value)};
    else if(s.type==='bar') s.label={show:true,position:yCat?'right':'top',formatter:o=>fmtNum(o.value)};
    else if(s.type==='pie') s.label={show:true,formatter:o=>`${o.name} ${fmtNum(o.value)}`};
  });
  return opt;
}

这样折线顶部、柱状顶部/右端、环图外侧都自动带数字，新增图表不用每次手写 label。

五、驾驶舱与双页面登录

系统首页是运营驾驶舱：6 个 KPI 卡 + 就业趋势 + 三险对比 + 市州就业排名 + 预警时间线。登录用双页面：左侧品牌宣传（渐变光晕 + 标题 + 4 个亮点标签），右侧玻璃拟态登录卡（登录/注册 Tab 切换），演示账号 admin/123456，登录后图表再初始化并强制 resize，避免隐藏容器 0 尺寸导致图表不显示。

六、上线避坑：ECharts 走 CDN 的隐患

单文件方案用 jsdelivr CDN 引 ECharts 很爽，但部署到云服务器后，jsdelivr 在国内偶发不稳定会导致图表全空。我们后续会把 echarts.min.js 下载到同目录、改成本地引用。这是所有"纯静态单文件 + CDN"系统的通病，记住这坑能省半天排查。

小结：政务数据大屏不必上重型 BI。单文件 HTML + ECharts，把省厅口径的指标、合理的图表选型、强制数值标注三件事做对，就能交付一个领导爱看、现场不崩、归档省心的系统。

觉得有用？分享给做政务信息化的朋友