ECharts 与地图联动的沉浸式数据大屏开发
在电信网络运维指挥中心，一张能够实时反映全网运行状态、支持多维度下钻分析的“数据大屏”是决策的核心。传统的静态报表已无法满足运维人员对于空间分布与性能指标关联分析的需求。
本文将分享如何基于 Spring Cloud Alibaba 微服务架构提供实时数据支撑，前端采用 Vue 3 + ECharts 5 技术栈，构建一个具备“地图钻取”与“图表联动”能力的沉浸式数据大屏。我们将重点探讨如何利用 GeoJSON 数据实现行政区/基站层级的无缝切换，以及如何通过事件总线实现地图交互与右侧 KPI 面板的实时同步。
一、 总体架构设计
1. 后端：Spring Cloud Alibaba 数据服务
- 资源服务 (NetMgr)：提供基站、小区的基础信息及经纬度坐标。
- 性能服务 (Perf)：对应原 HourLevelPerfController 业务，提供小时级、天级的 KPI 指标（如 RRC 建立成功率、流量、掉话率等）。
- GIS 数据服务：存储并分发省、市、区县三级行政区域的 GeoJSON 边界数据（参考
GIS/geodata结构）。
2. 前端：Vue 3 + ECharts 可视化引擎
- 地图组件：基于 ECharts 的
geo或series-map组件，加载 GeoJSON 数据，实现行政区划渲染及基站散点图叠加。 - 图表组件：封装柱状图、折线图、雷达图等通用 ECharts 组件，用于展示选中区域的详细指标。
- 状态管理：利用 Pinia 管理当前选中的区域 ID、层级（省/市/县）以及时间范围，确保各组件间的数据一致性。
二、 核心功能实现
1. 地图钻取：从全省到基站的无缝切换
实现地图钻取的关键在于动态加载不同层级的 GeoJSON 数据，并监听地图点击事件。
步骤：
- 初始化省级地图：加载
GIS/geodata/江苏/江苏.json。 - 监听点击事件：当用户点击某个地市时，获取该地市的 Adcode。