猿急送>

南京前端兼职程序员

ID：410596

踏实做人

前端开发组长

公司信息：
北京优锘科技

工作经验：
5年

兼职日薪：
800元/8小时

兼职时间：
下班后
周六
周日
可工作日远程

所在区域：
南京
全区

技术能力

5年前端开发经验担任前端组长擅长各类大屏可视化 3d场景开发图表可视化后台管理系统开发；精通vue2，vue3技术栈，可熟练开发web端,H5端，uniapp等，熟练使用nodejs+express+mysql进行接口开发，熟悉java后台开发；

项目经验

中国银联·后台管理系统
项目背景：中国银联内部需要一套“零代码、低门槛”的数据监控后台，让业务、风控、运维三条线的人员能够 5 分钟内把核心 KPI 变成可交互的大屏。老系统采用固定模板，新增指标需要 2 名前端 + 1 名后端排期 3 天，无法跟上业务节奏。
技术栈
Vue 3.2 + Vite + TypeScript ｜ Pinia ｜ AntV G2Plot ｜ SortableJS ｜ WebSocket ｜ ESLint + Husky + Vitest
核心亮点：可拖拽配置数据源的图表引擎（DragChart-Engine）
拖拽画布
• 基于 SortableJS + Vue Draggable Next 二次封装，支持栅格/自由两种布局模式，12 级响应式断点，自动对齐银联 4K 大屏标准（7680×2160）。
• 实现“框选批量拖拽”、“跨容器复制”、“撤销/重做” 栈，操作 200+ 组件依然保持 60 FPS。
数据源动态接入
• 左侧数据源面板对接银联 8 大内部网关（Mercury 交易、RiskGo 风控、UOP 运维……），返回格式统一为 { datasetId, fields[], data[] }。
• 图表与数据源解耦：通过 JSON Schema 描述“维度/指标”要求，运行时根据 Schema 自动映射字段，做到“同一个饼图组件，今天可以绑交易渠道，明天可以绑响应耗时”——把原来 3 天的工作量压缩到 30 秒。
可视化物料库
• 封装 22 类高频图表（折线、阶梯、桑基、拓扑、银联 GEO 中国地图等），全部继承自 BaseChart 类，统一暴露 updateDataset() 与 resize() 接口。
• 支持“图表嵌套图表”——例如把“交易成功率”仪表盘嵌入“渠道分布”柱状图的 tooltip 中，满足领导“一屏看完所有结论”的诉求。
实时与离线双模式
• WebSocket 通道采用二进制帧 + gzip，单屏 40 个指标，5 秒刷新一次，网络消耗 < 15 KB/s；
• 离线模式把 Vue SFC 与数据快照一起序列化，生成 .ucard 文件，邮件发出后对方双击即可在本地浏览器还原整屏，方便监管汇报。
性能与稳定性
• 通过 Vue 3 的 defineAsyncComponent + 异步 monaco-editor，首屏 JS 体积从 2.1 MB 降到 780 KB（gzip）。
• 单测覆盖率 87%，E2E 用 Cypress 编写 214 条用例，覆盖拖拽、数据刷新、导出三大核心路径；

案例展示

自定义图表大屏

大屏卡片式图表配置： 1.卡片支持自定义添加支持通过点击“关闭”图标，进行关闭卡片；支持通过点击“变形”图标拖拽，进行卡片的放大、缩小；支持通过拖拽卡片，进行调整卡片的顺序；支持“保存”“取消”卡片排版的配置； 2.每种卡片支持包括雷达图、饼图、环状图、柱状图
大屏可视化

本项目是大屏项目主要是大屏的图表开发展示其中包含数字动效场景动效出场入场动画等是一个以展示数据为主的可视化项目项目中我承担了过半的图表开发任务包括echarts图表数字动效关系流向图等
数据扫描

借鉴360扫描功能，实现对于数据的进程扫描功能可对数据进行实时的扫描排查错误系统任务实时状态更新本项目我承担前端部分所有代码目前已上线使用