技术领域
[0001] 本
发明涉及计算机技术领域，具体涉及一种基于Echarts实现中国地图和折 线图数据同步联动轮播的方法。
背景技术
[0002] 开发者通常将
软件产品的相关数据绘制成图表。数据的
可视化展现，对于 开发工作有着很大的帮助。在图形绘制方面，开发者通常使用图像工具软件进 行实现，例如开源软件Echarts(Enterprise Charts商业产品图表库)。它是基于 HTML5的Canvas,纯Java Script的图表库,不依赖于任何的第三方
插件,由百 度前端
数据可视化团队基于ZRender开发出来,提供直观、生动、可交互、可个 性化定制的数据可视化图表,创建了
坐标系、图例、提示、工具箱等
基础组件。 在此基础上,扩展出了折线图、柱状图、散点图、K线图、饼图、地图等多种类 型的统计图。
[0003] 在各个区域威胁数据分布的选择上，中国地图和折线图是开发者在产品开 发中会优先考虑的一种，中国地图各个区域受攻击的威胁资产和动态折线趋势 图的结合展示，使得威胁数据在分析、监控等方面提供了更加直观的展现，更 能满足用户的需求。然而Echarts目前只支持中国地图和折线图单一的两种不同 的图例，并没有将这两种图例结合展示在一起，也没有将中国地图的数据和折 线图的数据绑定到一起，并且运用
定时器实现同步联动轮播的效果，进而展示 数据的同步变化。所谓同步联动轮播是指获取到中国地图和折线图数据后，通 过函数对数据的处理，经过一个特定时间周期t(通常是1s)，将对应时间的数 据绑定在中国地图和折线图上，进行实时的数据监控分析。因此针对上述问题， 如何利用Echarts实现中国地图和折线图数据同步联动轮播是需要解决的问题。
发明内容
[0004] 为了解决上述技术问题，本发明提供了一种实现中国地图和折线图数据同 步联动轮播的方法，该方法使得威胁数据在分析，监控等方面提供了更加直观 的展现，更能满足用户的需求，提高了用户体验。
[0005] 为了达到上述技术效果，本发明提供了如下技术方案：
[0006] 一种实现中国地图和折线图数据同步联动轮播的方法，该方法包括以下步 骤：
[0007] (1)构建中国地图和折线图配置，对中国地图和折线图配置进行初始化处 理；
[0008] (2)对后台返回的基础数据进行处理，组装生成中国地图和折线图参数；
[0009] (3)根据中国地图的参数和折线图的参数进行图形绘制，重新分别赋值给 上述配置中，再将配置通过setOption方法作为参数传入，得到中国地图和折线 图；
[0010] (4)调用提示框组件中的回调函数formatter对所述数据进行格式化处理， 以使处理后的数据以预设字段在所述数据提示框中展示；
[0011] (5)定义当前威胁资产变量的索引为0，并设置同一个定时器，每隔时间 周期t(s)钟将当前索引+1，取出威胁资产区域的经纬度并绘制在中国地图上；
[0012] (6)在同一个定时器中给折线图动态调用autoShowTip自定义函数，该函 数根据定义的当前索引和威胁资产总数计算的dataIndex，并调用dispatchAction 实例方法，触发图表行为，动态显示提示信息，实现和中国地图同步轮播显示。
[0013] 进一步的技术方案为，所述步骤(1)中的配置包括标题组件title，legend 图例组件，直
角坐标系grid中的x轴、y轴，提示框组件tooltip，以及系列列表 series，每个系列通过type决定自己的图标类型，地理坐标系组件geo，将这些 配置定义到data数据中进行初始化处理。
[0014] 具体的，步骤(1)中配置项包括
[0015] Title：标题组件，包含主标题与附标题；Legend：图例组件；xAxis：直角 坐标系grid中的x轴；yAxis：直角坐标系grid中的y轴；Series：序列列表, 通过name定义名称，通过type定义类型；LineStyle：线条样式；Normal：线的
颜色；AreaStyle：区域填充样式；Normal：区域的颜色；tack：数据堆叠；Symbol： 线两端的标记类型；ShowSymbol：是否显示symbol。
[0016] 进一步的技术方案为，所述步骤(2)中后台返回的基础数据包括地图经 纬度，威胁城市以及数量。
[0017] 进一步的技术方案为，所述步骤(2)中组装生成的中国地图和折线图参数 均为json格式的数据，所述参数为标题组件属性，图例组件属性，直角坐标系 中的x轴属性，直角坐标系中的y轴属性，序列名称属性，序列类型属性，线 条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，线两端的标 记类型属性，线两端的标记的显示样式属性中的一种或多种。
[0018] 其中这些参数需要满足以下条件：
[0019] 具有至少两个键值对且每个键值对的值都是数组。
[0020] 第一个数组中每一个项都是字符串，且没有字符串是其他字符串加空格拼 接而成。
[0021] 其余的数组中的每一项都是字符串形式的数字。
[0022] 首先，通过ajax异步获取后台数据，Ajax(Asynchronous Java and XML的缩 写)是一种异步
请求数据的web开发技术，对于改善用户的体验和页面性能很有 帮助。简单地说，在不需要重新刷新页面的情况下，Ajax通过异步请求加载后 台数据，并在网页上呈现出来。当需要异步与
服务器交换数据时，需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有：
[0023] onreadystatechange——每次状态改变所触发事件的事件处理程序。
[0024] responseText——从服务器
进程返回数据的字符串形式。
[0025] responseXML——从服务器进程返回的DOM兼容的文档数据对象。
[0026] status——从服务器返回的数字代码，如404(未找到)和200(已就绪)。
[0027] status Text——伴随状态码的字符串信息。
[0028] readyState——对象状态值。对象状态值有以下几个：
[0029] 0-(未初始化)还没有调用send()方法
[0030] 1-(载入)已调用send()方法，正在发送请求
[0031] 2-(载入完成)send()方法执行完成
[0032] 3-(交互)正在解析响应内容
[0033] 4-(完成)响应内容解析完成，可以在客户端调用了
[0034] 对于readyState的状态值，其中“0”状态是在定义后自动具有的状态值，而 对于成功
访问的状态(得到信息)我们大多数采用“4”进行判断。Ajax的核心就 是JavaScript对象XmlHttpRequest，这个对象为向服务器发送请求和解析服务器 响应提供了流畅的
接口。XmlHttpRequest可以使用JavaScript向服务器提出请求 并处理响应，而不阻塞用户。
[0035] JavaScript是一种脚本，一
门编程语言，它可以在网页上实现复杂的功能， 网页展现不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。
[0036] JavaScript解析是一段一段解析，并非一行一行解析。同一段中function语 句和函数直接量定义的函数总会被优先编译执行(该执行不是调用函数)，之后 才会执行其他函数。
[0037] 它可以实现对数据的操作，常见的是对数组，json对象，字符串，布尔值， Number等操作。以对象数组为例：
[0038] 对象实际上是一种把很多值聚合在一起的方式,可以看作是属性名到值的 映射。数组可以看作值的有序集合,元素的
位置即索引，利用该索引就可以找到 对应的值。
[0039] 对于数据的预处理包括：1)特殊字符处理以及html转义字符处理，时间 格式以及单位的转换2)通过ajax获取到的后台数据，对这些数据进行一次循环， 每次循环就将该次循环的数据放进数组中3)属性对齐：针对不同数据源数据存 在的在单位、格式、
精度表示上不一致的问题，通过定义各种正则表达式对数 据进行匹配、提取和转换，以统一其描述。4)设置定时器，该定时器的作用是 规定时每隔间周期T(s)拉取一次后台数据。
[0040] 经过上述处理生成的参数配置均为json格式的数据，所述参数包括如下的 一种或多种：标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角 坐标系中的y轴属性，序列名称属性，序列类型属性，线条样式属性，线条颜 色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类 型属性，线两端的标记的显示样式属性。
[0041] 与
现有技术相比本发明具有如下有益效果：该方法使得威胁数据在分析， 监控等方面提供了更加直观的展现，更能满足用户的需求，提高了用户体验。
附图说明
[0042] 图1为本发明的流程示意图；
[0043] 图2为根据本发明一个
实施例绘制的中国地图各个城市威胁资产数量以及 趋势图轮播显示提示框数据。
具体实施方式
[0044] 下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了 本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被 这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本 公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
[0045] 实施例1
[0046] 图1示出了根据本发明一个实施例的一种基于Echarts实现中国地图和折线 图数据同步联动轮播的方法的流程示意图，如图1所示，该方法包括：
[0047] 1、构建中国地图和折线图配置，该配置option包括标题组件title，legend 图例组件，直角坐标系grid中的x轴、y轴，提示框组件tooltip，以及系列列表 series，每个系列通过type决定自己的图标类型，地理坐标系组件geo等，将这 些配置定义到data数据中进行初始化处理。
[0048] 2、在同一个方法中对后台返回的同一基础源数据进行处理，运用javascript 对数组的操作以及for循坏，同时定义chinaDataArr和横坐标、纵坐标空数组， 通过for循环将地图的经纬度push进chinaDataArr数组中，在同一个for循环中 分别将省份和威胁数量数据放进横坐标数组和纵坐标数组中。
[0049] 3、根据所述中国地图的参数和所述折线图的参数，重新分别赋值给上述 option配置中，再将option配置通过setOption方法作为参数传入，得到中国地 图和折线图。
[0050] 通常，我们要对数据进行可视化处理，往往会运用到Echarts，一个使用 JavaScript实现的开源可视化库，它可以流畅的运行在PC和移动设备上，兼容 当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻 量级的矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可 视化图表。在绘图前我需要为ECharts准备一个具备高宽的DOM容器，然后 就可以通过echarts.init方法初始化一个echarts实例并通过setOption方法分别生 成type为’map’和’line’类型的图表。如图2所示，中国地图各个城市威胁资产数 量数据数来自于对地图基础数据的处理，折线图数据是对基础数据的重新组装 并做初始化处理生成，运用javascript对数组的操作以及for循坏，同时定义 chinaDataArr和横坐标、纵坐标空数组，通过for循环将地图的经纬度push进 chinaDataArr数组中，在同一个for循环中分别将省份和威胁数量数据放进横坐 标数组和纵坐标数组中。
[0051] 4、调用所述提示框组件中的回调函数formatter对所述基础数据进行格式化 处理，以使处理后基础数据以预设字段信息在数据提示框中展示。Formatter回 调函数接受一个参数，该参数为需要显示的数据信息，取出对应的数据，即可 在提示框中显示出轮播的数据。
[0052] 5、定义当前威胁资产变量的索引为0，并设置定时器，每隔时间周期t(s) 钟将当前索引+1，取出威胁资产区域的经纬度并绘制在中国地图上。由图2可 以看出，地图上的每个点都是每经过1s钟动态绘制在中国地图上，这就需要设 置一个索引为0的初始变量，经过定时器每隔1s加1，把对应城市的经纬度取 出，并且把威胁数据一起存储在一个数组中，再把该数组放进option中的series。
[0053] 6、在同一个定时器中给折线图动态调用autoShowTip自定义函数，该函数 根据定义的当前索引和威胁资产总数计算的dataIndex，并调用dispatchAction实 例方法，触发图表行为，动态显示提示信息，实现和中国地图同步轮播显示。 该方法的重点是要在同一个定时器内操作，如果分开两个定时器，虽然同时设 置周期t(s)，但由于JavaScript执行顺序不同会存在
数据轮播不同步问题。
