一种基于canvas与echarts实现飞线动效的方法及系统

摘要

本发明公开了一种基于canvas与echarts实现飞线动效的方法及系统，所述方法包括如下步骤：步骤S1，确定文档对象模型的树结构，所述树结构包括一个父元素和两个子元素；步骤S2，通过echarts实例指定可缩放矢量图形渲染器生成可视化图表；步骤S3，获取画布元素并对其设置相对父元素定位，设置画布元素宽高与echarts容器元素的宽高和它们父元素的宽高相同；步骤S4，根据可伸缩矢量图形路径元素获取飞线轨迹上的点坐标的集合；步骤S5，根据画布的2D渲染上下文调用Canvas 2D API绘制圆弧路径的方法在画布上绘制360度圆弧并填充颜色；步骤S6,声明飞线移动动画方法，实现飞线动效。本发明的方法和系统能够满足飞线特效的高要求，在数据可视化大屏显示中提升客户视觉体验。