概要

随着大数据技术逐渐成为数据时代的关键角色，如何处理与分析复杂数据，如何让大数据更加直观化的服务于用户，数据可视化无疑是最有效的技术支撑。通过可视化大屏展示的方式协助用户管理复杂数据，日渐成为大数据解决方案中的关键一环。但现有数据可视化仍然存在着数据渲染延迟较大、可视化图表动态联动交互能力弱、实时数据量大且网络复杂导致渲染异常中断等问题，制约了数据可视化技术的广泛应用。

本文针对以上问题，围绕设计模式、Echarts大屏可视化、动态实时化交互关键技术，对可视化页面实时渲染和动态交互展开深层次研究，主要研究工作如下

1. 针对可视化页面数据渲染延迟的问题，通过研究基于Vue框架的Diff差异算法Diffalgorithm，设计并优化了静态检测下的Diff差异算法。首先利用关键key策略为静态节点和动态节点分别建立了Map映射关系。然后在Diff过程中只对比新旧虚拟DOM树中的动态节点差异，而静态节点直接复用。最后通过仿真对比分析进一步验证了优化后Diff算法的有效性，明显提升了页面更新渲染效率
2. 针对可视化图表动态联动交互能力较弱的问题，通过研究缓存技术和Echarts图表渲染技术，设计并优化基于Echarts的大屏组件联动触发渲染方法。利用缓存机制以分时复用的思想对数据进行分离存储与更新，同时以组件化分离复用的思想建立组件间的交互关系网。使得组件间能够进行联动触发交互，以实现页面全局同步渲染。进一步增强了图表间联动交互能力，提升了页面的联动渲染效率
3. 针对实时数据量大且网络复杂导致渲染异常的问题，通过研究Websocket实时传输协议和HTTP协议理论，设计了以Websocket与HTTP相联合的动态数据实时传输方法。并研究了心跳定时检测方法，以确保Web服务器和客户端能同步在线。解决了网络异常导致渲染中断的问题，保证了数据传输的实时性和稳定性，提升了页面数据实时渲染效率