一种基于canvas的svg与echarts图形融合方法

摘要

本发明实施例公开了一种基于canvas的svg与echarts图形融合方法，包括如下步骤：步骤100、对配电房一次接线图进行解析，并重新计算图形布局，将配电房一次接线图在内存中重新构建为虚拟DOM树结构；步骤200、根据虚拟DOM树结构，web端自动生成和绑定鼠标点击的事件，并通过设定的条件参数在服务器nodejs中对点击的事件进行数据查询，服务器nodejs根据查询到的配电房数据利用原生echarts组件进行渲染和初始化生成可视化曲线图形；步骤300、web端获取可视化曲线图形后在虚拟DOM树结构中的canvas标签中重绘所述可视化曲线图形，并重新渲染界面，实现配电房一二次接线图的融合与web动态功能的展示；本发明以解决配电房一次设备与监测数据无法在Web系统中融合展示的问题。