关键在于数据结构支撑关联、图表支持维度联动、前端保障实时稳定；采用带语义前缀的扁平JSON、统一时间戳对齐、路径字符串表层级；多图表通过filterBy和共享时间轴联动；WebSocket连接实现握手同步、心跳保活、本地缓存重算；全端适配统一分析逻辑。
要在HTML5网页端实现基于WebSocket的实时多维数据关联可视化分析，关键不是堆砌技术，而是让“多维关系”在视觉上可感知、在交互中可探索、在连接上不掉线。核心在于：数据结构支撑关联、图表支持维度联动、前端逻辑保障实时性与稳定性。
设计能表达关联的轻量数据协议
后端推送的数据必须天然携带维度标识和关系线索，不能靠前端拼接猜测。
- 用扁平化JSON，每个字段带语义前缀，例如"site_id"、"device_type"、"metric_name"、"category"，避免嵌套对象导致解析歧义
- 对同一时间点的多维快照，统一用"ts"（毫秒级Unix时间）对齐，便于前端按时间窗口做跨指标聚合（如“某电站下所有逆变器的功率总和”）
- 若需表达层级关系（如“区域→电站→设备”），不依赖嵌套，而用"path": "north/beijing/inv-07"字符串+分隔符，前端可用
.split('/')快速提取任意层级
用联动图表呈现多维关系
单个图表只看一维是静态报表；多个图表之间能点击筛选、悬停穿透、缩放同步，才是关联分析。
- 主图表（如热力图或地理散点图）点击某个区域/设备时，触发filterBy({ site_id: 'BJ-03', device_type: 'inverter' })，其余子图（趋势曲线、状态分布饼图、告警列表）自动刷新对应数据
- 共享时间轴：所有图表共用一个时间范围选择器，缩放/拖拽主图X轴时，通过chart.getOption().xAxis[0].data同步更新其他图表的显示区间
- 用ECharts的dataset + transform机制预置多维计算逻辑，例如实时算出“各类型设备的平均故障间隔（MTBF）”，无需后端重复推送衍生指标
构建抗抖动的实时通道
多维分析对数据连续性敏感——丢1条可能断掉趋势斜率，延迟2秒可能错过告警窗口。
立即学习“前端免费学习笔记（深入）”；
- 前端建立连接后，立即发送{"type":"handshake","client_id":"web-abc123"}，服务端返回当前全量快照+最近10秒增量日志，确保页面加载即见“完整态”
- 启用心跳保活：每25秒发一次{"type":"ping"}，超时未收到pong则标记“弱网”，暂停动画、降采样渲染（如从每秒10点合并为每秒2点）
- 本地缓存最近60秒原始数据流，当用户切换维度或回溯时间，直接从内存重算视图，不依赖重连拉取历史
适配不同终端的关联交互方式
大屏上可用鼠标拖选区域下钻，手机上得靠长按+弹窗菜单，但底层关联逻辑要一致。
- PC端：悬停热力格子显示多维详情卡片（含数值、同比、环比、TOP3异常指标）；右键呼出“对比另一个站点”快捷操作
- 触屏端：双指缩放时间轴，长按设备点触发“查看全生命周期数据”；底部固定Tab切换“关联拓扑图”“指标雷达图”“告警因果链”
- 所有终端共享同一套useDimensionFilter()钩子函数，只是触发方式不同，保证分析结果不因设备而异
