本项目是与一位Python后端开发者协作完成的数据可视化展示系统。对方负责后端数据处理与接口提供,我独立负责前端大屏的整体开发与呈现。
核心功能包括:将后端返回的JSON数据进行清洗与整合,通过ECharts动态生成饼图、柱状图、折线图等多种图表面板,实现数据的直观可视化。页面布局适配大屏分辨率,支持自适应缩放。
通过与不同技术栈的开发者对接API接口,锻炼了跨栈协作能力与需求理解能力。
整体架构与设计思路:
项目采用前后端分离架构,前端独立负责可视化大屏的整体呈现。后端(合作开发者)通过 API 接口提供 JSON 格式数据,我负责对接并处理。
我的负责模块与成果:
1. 对后端返回的原始数据进行清洗与格式化,剔除冗余字段,转换时间戳与数值类型。
2. 基于 ECharts 封装了柱状图、折线图、饼图等通用图表面板组件。
3. 使用 rem/vw 布局实现 1920x1080 分辨率下的全屏自适应,兼容主流大屏硬件。
4. 最终交付后,合作开发者确认验收,无返工修改。
遇到的难点与解决方案:
难点:后端一次返回上万条数据时,图表渲染出现明显卡顿。
解决:使用 ECharts 的 dataZoom 实现数据窗口缩放,并启用 sampling 采样渲染,成功将渲染耗时从 3 秒降低到 0.5 秒以内。