节能业务数据可视化大屏系统产品系统Vibe Coding

随着合同能源管理（EMC）业务规模扩大，管理方需要实时掌握各项目的节能量、合同收益、设备运行状态等核心指标。传统的Excel报表方式存在数据分散、更新滞后、难以直观呈现趋势等问题，严重影响管理效率和决策速度。
本项目旨在为节能服务企业提供一套可视化数据驾驶舱，将照明、空调、电梯等多类节能业务的关键数据集中呈现，帮助管理层一屏掌握全局，快速识别高价值项目和异常数据，支撑业务决策。

1. KPI核心指标看板：实时展示本月节能量、合同收益、在管项目数、平均节能率四大核心指标，并显示环比变化趋势。
2. 月度趋势分析：以双轴折线图展示全年节能量与收益的月度变化趋势，直观呈现业务增长曲线。
3. 业务类型占比：以环形饼图展示照明节能、空调节能、电梯节能、楼宇控制等业务类型的项目数量占比。
4. 城市分布分析：柱状图展示各城市在管项目数量分布，支持区域业务对比分析。
5. 项目节能率排行：水平条形图展示TOP8项目的节能率排名，快速识别标杆项目。
6. 设备贡献雷达图：六维雷达图展示各类设备（照明/空调/电梯/配电/热水/动力）的节能贡献度。
7. 季度完成率仪表盘：仪表盘组件展示当季合同金额完成率，支持目标进度管理。
8. 实时时钟：页面自动刷新当前时间，适合大屏长期展示。

本人负责全部设计与开发工作，包括需求分析、界面设计、数据建模和前端实现。

技术栈：
- 前端框架：原生HTML5 + CSS3，无需额外框架，部署零依赖
- 图表库：ECharts 5.x，实现折线图、柱状图、饼图、雷达图、仪表盘等多种图表类型
- 数据层：JavaScript动态数据绑定，支持后续对接后端API
- 样式：深色科技风UI设计，CSS Grid布局实现响应式大屏自适应

架构亮点：
- 采用纯前端方案，无需服务器，双击HTML文件即可本地运行，方便客户演示
- ECharts图表统一配置深色主题，视觉风格一致，专业感强
- CSS Grid + Flexbox混合布局，支持6+图表在同一屏内高密度展示
- 所有图表数据与渲染逻辑解耦，更换数据源只需修改数据层，无需改动UI代码

难点突破：
- 解决了深色背景下多图表色系统一的配色问题，采用蓝绿渐变主色调
- 双轴折线图（节能量+收益）的Y轴比例对齐，确保趋势对比直观准确
- 大屏布局在不同分辨率下的等比缩放适配