[发明专利]一种基于Echarts的地图烟花组件实现方法

说明书

本发明属于数据表示技术领域，具体涉及一种基于Echarts的地图烟花组件实现方法，包括：渲染立体地图；定时从后台获取数据；过滤出数据增长的区域；将区域转换为坐标点；为每个坐标点创建一个烟花组件；随机设置每个烟花组件的动画展示的延时时间，使各个坐标点的动画错落开。本申请解决了Echarts地图数据增长时展示不直观的问题，数据如果有增长，则在数据查询周期内以烟花的方式循环展示，该方案使得展示更加直观，极大地提升了用户的体验。

技术领域

本发明涉及数据表示技术领域，具体涉及一种基于Echarts的地图烟花组件实现方法。

背景技术

Echarts是一个使用JavaScript实现的开源可视化库，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性定制的数据可视化图表，其中提供了地图组件，该组件能使用GeoJSon格式的地图数据来绘制地图，在实际使用中，经常使用Echarts的地图组件从行政区划的维度来展示人口分布密度等数据，目前在地图组件中，数据是以文本的方式展示在绘制的地理区域内，地图数据主要是通过颜色、文本或者柱状图的形式展示，当区域较多或者数值比较大时，用户无法及时全面的发现数值的变化及变化的趋势。

即Echarts的地图组件可以结合visualMap组件或者柱状图组件来比较直观的表示数值大小，通过设置visualMap组件的最大最小值，及最大最小值分别对应的颜色，来给地图组件的每个区域按数据填充颜色，通过颜色的深浅来表示数值的大小，但是visualMap组件是按数值段来设置颜色的，一个小范围内的数值，颜色是相同的，只有当最大最小值比较接近，或者地图数据变化比较大时，颜色变化才会比较明显，通过柱状图组件可以将地图数值以柱状图的方式显示在地图区域内，在数据基数比较大时，数据的少量增加无法通过颜色和柱状图的变化直观的体现出来，另外，在数据密集时文本会出现层叠、遮挡等问题，也无法清晰的体现出来。

发明内容

为克服所述不足，本发明的目的在于提供一种新型通用展示组件，解决Echarts地图在展示区域数据时，数据变化不够直观的问题。

本发明解决其技术问题所采用的技术方案是：一种基于Echarts的地图烟花组件实现方法，包括：

S1、渲染立体地图，在页面上渲染出多个地图，将地图叠加并添加阴影，通过调节各个地图的层级、角度、位置、阴影的方向和大小，使得地图在视觉上呈现出3D效果，以便后面展示烟花组件时更加明显及立体；

S2、从后台获取数据，页面定时从后台获取数据，后台以区域为维度查询数据，提供两种方式来判断数据是否有增长，对于在业务上不断累加的数据，则获取一定时间间隔内的数据增量，增量大于0，则说明数据有增长，对于在业务上非累加的数据，则获取数据总数传给前端页面，前端页面通过与上一次获得的数据比较，如果本次数值大于上次获取的数值，则说明数据有增长；

S3、过滤出数据增长的区域，页面根据返回的数值或者将数值与上次获得数值进行比较，区分出有数据增长的区域；

S4、将区域转换为坐标点，设置一个区域名称与地理位置坐标的对应关系表，将有数据增长的区域名称转换为对应的地理位置坐标；

S5、在坐标点生成烟花组件，遍历地理位置坐标列表，使用Echarts的地理坐标系将地理位置坐标定位到页面上，每个坐标创建一个烟花组件，烟花组件由三部分组成，分别为烟花亮点、烟花头部、烟花尾部，使用三个Echarts的路径图组件来展示烟花亮点、烟花头部、烟花尾部，烟花亮点设置尺寸较小，无拖尾无阴影，颜色为白色，头部设置为尺寸较大，无拖尾有阴影，有颜色，尾部设置为尺寸适中，有拖尾有阴影，有颜色，调整三者的位置组成一个烟花图形。

S6、随机设置每个烟花组件动画展示的延时时间，使各个坐标点的烟花动画错落开。

本发明具有以下有益效果：本申请解决了Echarts地图数据增长时展示不直观的问题，数据如果有增长，则在数据查询周期内以烟花的方式循环展示，该方案使得展示更加直观，极大地提升了用户的体验。

附图说明