一种实现中国地图和折线图数据同步联动轮播的方法技术

本发明专利技术公开了一种实现中国地图和折线图数据同步联动轮播的方法，该方法包括以下步骤：构建中国地图和折线图配置，进行初始化处理；对后台返回的基础数据进行处理，组装生成中国地图和折线图参数；根据参数进行图形绘制，得到中国地图和折线图；定义当前威胁资产变量的索引为0，并设置同一个定时器，每隔时间周期将当前索引+1，取出威胁资产区域的经纬度并绘制在中国地图上；在同一个定时器中给折线图动态调用autoShowTip自定义函数，根据定义的当前索引和威胁资产总数计算的dataIndex，并调用dispatchAction实例方法，触发图表行为，动态显示提示信息，实现和中国地图同步轮播显示。

A method to realize simultaneous and linked rotation of Chinese map and line map data

【技术实现步骤摘要】
一种实现中国地图和折线图数据同步联动轮播的方法
本专利技术涉及计算机
，具体涉及一种基于Echarts实现中国地图和折线图数据同步联动轮播的方法。
技术介绍
开发者通常将软件产品的相关数据绘制成图表。数据的可视化展现，对于开发工作有着很大的帮助。在图形绘制方面，开发者通常使用图像工具软件进行实现，例如开源软件Echarts(EnterpriseCharts商业产品图表库)。它是基于HTML5的Canvas,纯JavaScript的图表库,不依赖于任何的第三方插件,由百度前端数据可视化团队基于ZRender开发出来,提供直观、生动、可交互、可个性化定制的数据可视化图表,创建了坐标系、图例、提示、工具箱等基础组件。在此基础上,扩展出了折线图、柱状图、散点图、K线图、饼图、地图等多种类型的统计图。在各个区域威胁数据分布的选择上，中国地图和折线图是开发者在产品开发中会优先考虑的一种，中国地图各个区域受攻击的威胁资产和动态折线趋势图的结合展示，使得威胁数据在分析、监控等方面提供了更加直观的展现，更能满足用户的需求。然而Echarts目前只支持中国地图和折线图单一的两种不同的图例，并没有将这两种图例结合展示在一起，也没有将中国地图的数据和折线图的数据绑定到一起，并且运用定时器实现同步联动轮播的效果，进而展示数据的同步变化。所谓同步联动轮播是指获取到中国地图和折线图数据后，通过函数对数据的处理，经过一个特定时间周期t(通常是1s)，将对应时间的数据绑定在中国地图和折线图上，进行实时的数据监控分析。因此针对上述问题，如何利用Echarts实现中国地图和折线图数据同步联动轮播是需要解决的问题。
技术实现思路
为了解决上述技术问题，本专利技术提供了一种实现中国地图和折线图数据同步联动轮播的方法，该方法使得威胁数据在分析，监控等方面提供了更加直观的展现，更能满足用户的需求，提高了用户体验。为了达到上述技术效果，本专利技术提供了如下技术方案：一种实现中国地图和折线图数据同步联动轮播的方法，该方法包括以下步骤：(1)构建中国地图和折线图配置，对中国地图和折线图配置进行初始化处理；(2)对后台返回的基础数据进行处理，组装生成中国地图和折线图参数；(3)根据中国地图的参数和折线图的参数进行图形绘制，重新分别赋值给上述配置中，再将配置通过setOption方法作为参数传入，得到中国地图和折线图；(4)调用提示框组件中的回调函数formatter对所述数据进行格式化处理，以使处理后的数据以预设字段在所述数据提示框中展示；(5)定义当前威胁资产变量的索引为0，并设置同一个定时器，每隔时间周期t(s)钟将当前索引+1，取出威胁资产区域的经纬度并绘制在中国地图上；(6)在同一个定时器中给折线图动态调用autoShowTip自定义函数，该函数根据定义的当前索引和威胁资产总数计算的dataIndex，并调用dispatchAction实例方法，触发图表行为，动态显示提示信息，实现和中国地图同步轮播显示。进一步的技术方案为，所述步骤(1)中的配置包括标题组件title，legend图例组件，直角坐标系grid中的x轴、y轴，提示框组件tooltip，以及系列列表series，每个系列通过type决定自己的图标类型，地理坐标系组件geo，将这些配置定义到data数据中进行初始化处理。具体的，步骤(1)中配置项包括Title：标题组件，包含主标题与附标题；Legend：图例组件；xAxis：直角坐标系grid中的x轴；yAxis：直角坐标系grid中的y轴；Series：序列列表,通过name定义名称，通过type定义类型；LineStyle：线条样式；Normal：线的颜色；AreaStyle：区域填充样式；Normal：区域的颜色；tack：数据堆叠；Symbol：线两端的标记类型；ShowSymbol：是否显示symbol。进一步的技术方案为，所述步骤(2)中后台返回的基础数据包括地图经纬度，威胁城市以及数量。进一步的技术方案为，所述步骤(2)中组装生成的中国地图和折线图参数均为json格式的数据，所述参数为标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，线两端的标记类型属性，线两端的标记的显示样式属性中的一种或多种。其中这些参数需要满足以下条件：具有至少两个键值对且每个键值对的值都是数组。第一个数组中每一个项都是字符串，且没有字符串是其他字符串加空格拼接而成。其余的数组中的每一项都是字符串形式的数字。首先，通过ajax异步获取后台数据，Ajax(AsynchronousJavaandXML的缩写)是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax通过异步请求加载后台数据，并在网页上呈现出来。当需要异步与服务器交换数据时，需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有：onreadystatechange——每次状态改变所触发事件的事件处理程序。responseText——从服务器进程返回数据的字符串形式。responseXML——从服务器进程返回的DOM兼容的文档数据对象。status——从服务器返回的数字代码，如404(未找到)和200(已就绪)。statusText——伴随状态码的字符串信息。readyState——对象状态值。对象状态值有以下几个：0-(未初始化)还没有调用send()方法1-(载入)已调用send()方法，正在发送请求2-(载入完成)send()方法执行完成3-(交互)正在解析响应内容4-(完成)响应内容解析完成，可以在客户端调用了对于readyState的状态值，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断。Ajax的核心就是JavaScript对象XmlHttpRequest，这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。JavaScript是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D动画，滚动播放的视频等等。JavaScript解析是一段一段解析，并非一行一行解析。同一段中function语句和函数直接量定义的函数总会被优先编译执行(该执行不是调用函数)，之后才会执行其他函数。它可以实现对数据的操作，常见的是对数组，json对象，字符串，布尔值，Number等操作。以对象数组为例：对象实际上本文档来自技高网...

【技术保护点】
1.一种实现中国地图和折线图数据同步联动轮播的方法，其特征在于，该方法包括以下步骤：/n(1)构建中国地图和折线图配置，对中国地图和折线图配置进行初始化处理；/n(2)对后台返回的基础数据进行处理，组装生成中国地图和折线图参数；/n(3)根据中国地图的参数和折线图的参数进行图形绘制，重新分别赋值给上述配置中，再将配置通过setOption方法作为参数传入，得到中国地图和折线图；/n(4)调用提示框组件中的回调函数formatter对所述数据进行格式化处理，以使处理后的数据以预设字段在所述数据提示框中展示；/n(5)定义当前威胁资产变量的索引为0，并设置同一个定时器，每隔时间周期t(s)钟将当前索引+1，取出威胁资产区域的经纬度并绘制在中国地图上；/n(6)在同一个定时器中给折线图动态调用autoShowTip自定义函数，该函数根据定义的当前索引和威胁资产总数计算的dataIndex，并调用dispatchAction实例方法，触发图表行为，动态显示提示信息，实现和中国地图同步轮播显示。/n

【技术特征摘要】
1.一种实现中国地图和折线图数据同步联动轮播的方法，其特征在于，该方法包括以下步骤：
(1)构建中国地图和折线图配置，对中国地图和折线图配置进行初始化处理；
(2)对后台返回的基础数据进行处理，组装生成中国地图和折线图参数；
(3)根据中国地图的参数和折线图的参数进行图形绘制，重新分别赋值给上述配置中，再将配置通过setOption方法作为参数传入，得到中国地图和折线图；
(4)调用提示框组件中的回调函数formatter对所述数据进行格式化处理，以使处理后的数据以预设字段在所述数据提示框中展示；
(5)定义当前威胁资产变量的索引为0，并设置同一个定时器，每隔时间周期t(s)钟将当前索引+1，取出威胁资产区域的经纬度并绘制在中国地图上；
(6)在同一个定时器中给折线图动态调用autoShowTip自定义函数，该函数根据定义的当前索引和威胁资产总数计算的dataIndex，并调用dispatchAction实例方法，触发图表行为，动态显示提示信息，实现和中国地图同步轮播显示。

【专利技术属性】
技术研发人员：文超，王淑娥，常清雪，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川;51