ECharts地图的显示方法及装置与流程

本申请涉及地图领域，具体而言，涉及一种ECharts地图的显示方法及装置。
背景技术：
：商业级数据图表(EnterpriseCharts，简称ECharts)，是一款基于HTML5Canvas的企业级图表库，在Echarts图表中提供了便利的地图组件，该地图组件能够按照国家、省份、地市区域来展示数据，将基于Echarts提供的地图简称为Echarts地图。在实际系统中，常常使用Echarts地图从地理位置的维度展示业务数据。页面上使用全国地图按照省份展示地图，用户可以从Echarts地图中逐一获取各个地理位置行政区域的相关数据，然而，用户却无法同时查看包括多个地理位置行政区域的相关数据，即在Echarts地图中无法查看选定的多个区域的相关数据，导致用户体验度较低。针对相关技术中由于在Echarts地图中无法查看选定的多个区域的相关数据，导致用户体验度较低的问题，目前尚未提出有效的解决方案。技术实现要素：本申请的主要目的在于提供一种ECharts地图的显示方法及装置，以解决相关技术中由于在ECharts地图中无法查看选定的多个区域的相关数据，导致用户体验度较低的问题。为了实现上述目的，根据本申请的一个方面，提供了一种ECharts地图的显示方法。该方法包括：在Echarts地图上检测鼠标操作事件；如果在Echarts地图上检测到鼠标操作事件，确定鼠标操作事件在页面上的起始坐标值和终止坐标值；根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标值在Echarts地图所处的canvas画布上确定的对应范围；以及确定目标范围在Echarts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据。进一步地，根据起始坐标值和终止坐标值确定目标范围包括：获取Echarts地图所处的canvas画布在页面上的定位坐标值；根据起始坐标值和定位坐标值计算第一目标坐标值，其中，第一目标坐标值为起始坐标值在Echarts地图所处的canvas画布上对应的坐标值；根据终止坐标值和定位坐标值计算第二目标坐标值，其中，第二目标坐标值为终止坐标值在Echarts地图所处的canvas画布上对应的坐标值；以及根据第一 目标坐标值和第二目标坐标值确定目标范围。进一步地，在Echarts地图上检测鼠标操作事件之前，该方法还包括：确定Echarts地图上所有的地理位置名称；利用预设接口分别获取Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值；以及将Echarts地图上所有的地理位置名称和Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值存储至预设数据库。进一步地，确定目标范围在Echarts地图上对应的地理位置名称包括：在预设数据库中查找目标范围内的坐标值；以及获取查找到的坐标值在预设数据库中对应的地理位置名称。进一步地，展示地理位置名称对应的目标数据包括：在与地理位置名称对应的多种数据中确定目标数据；创建目标列表，其中，目标列表中包括地理位置名称和地理位置名称对应的目标数据；以及显示目标列表。为了实现上述目的，根据本申请的另一方面，提供了一种ECharts地图的显示装置。该装置包括：检测单元，用于在Echarts地图上检测鼠标操作事件；第一确定单元，用于在Echarts地图上检测到鼠标操作事件的情况下，确定鼠标操作事件在页面上的起始坐标值和终止坐标值；第二确定单元，用于根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标值在Echarts地图所处的canvas画布上确定的对应范围；以及第三确定单元，用于确定目标范围在Echarts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据。进一步地，第二确定单元包括：第一获取模块，用于获取Echarts地图所处的canvas画布在页面上的定位坐标值；第一计算模块，用于根据起始坐标值和定位坐标值计算第一目标坐标值，其中，第一目标坐标值为起始坐标值在Echarts地图所处的canvas画布上对应的坐标值；第二计算模块，用于根据终止坐标值和定位坐标值计算第二目标坐标值，其中，第二目标坐标值为终止坐标值在Echarts地图所处的canvas画布上对应的坐标值；以及第一确定模块，用于根据第一目标坐标值和第二目标坐标值确定目标范围。进一步地，该装置还包括：第四确定单元，用于确定Echarts地图上所有的地理位置名称；获取单元，用于利用预设接口分别获取Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值；以及存储单元，用于将Echarts地图上所有的地理位置名称和Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值存储至预设数据库。进一步地，第三确定单元包括：查找模块，用于在预设数据库中查找目标范围内 的坐标值；以及第二获取模块，用于获取查找到的坐标值在预设数据库中对应的地理位置名称。进一步地，第三确定单元包括：第二确定模块，用于在与地理位置名称对应的多种数据中确定目标数据；创建模块，用于创建目标列表，其中，目标列表中包括地理位置名称和地理位置名称对应的目标数据；以及显示模块，用于显示目标列表。通过本申请，采用以下步骤：在Echarts地图上检测鼠标操作事件；如果在Echarts地图上检测到鼠标操作事件，确定鼠标操作事件在页面上的起始坐标值和终止坐标值；根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标值在Echarts地图所处的canvas画布上确定的对应范围；以及确定目标范围在Echarts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据，解决了相关技术中由于在ECharts地图中无法查看选定的多个区域的相关数据，导致用户体验度较低的问题。通过在Echarts地图上计算目标范围(选定区域范围)的坐标范围，获取选定区域中包含的地理位置名称，从而展示地理位置名称对应的目标数据，实现了在ECharts地图中能够查看选定的多个区域的相关数据，进而达到了提升用户体验度的效果。附图说明构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1是根据本申请实施例的ECharts地图的显示方法的流程图；以及图2是根据本申请实施例的ECharts地图的显示装置的示意图。具体实施方式需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。为了使本
技术领域：
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第 二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。根据本申请的实施例，提供了一种ECharts地图的显示方法。图1是根据本申请实施例的ECharts地图的显示方法的流程图。如图1所示，该方法包括以下步骤：步骤S101，在Echarts地图上检测鼠标操作事件。在Echarts图表中提供了便利的地图组件，该地图组件能够提供按照国家、省份、地市区域来展示数据，在本申请中将基于Echarts提供的地图简称为Echarts地图。本申请中提及的页面均是指的浏览器页面。在Echarts地图上检测鼠标操作事件之前，在页面中初始化Echarts地图。对在本申请中的对Echarts地图进行初始化即是在浏览器页面上绘制出Echarts地图的过程，为了后续获取Echarts地图上的地理位置名称和其对应的坐标，因此需要在页面上对Echarts地图进行初始化。可选地，在本申请实施例提供的Echarts地图的显示方法中，在Echarts地图上检测鼠标操作事件之前，该方法还包括：确定Echarts地图上所有的地理位置名称；利用预设接口分别获取Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值；以及将Echarts地图上所有的地理位置名称和Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值存储至预设数据库。例如，Echarts地图上包括北京、天津、唐山、保定等地理位置名称，根据实际的地理位置名称从Echarts的接口getPosByGeoName，获取该城市在实际绘制完地图上的实际坐标，即获取到北京在canvas画布上的实际坐标为(116.46，39.92)，天津在canvas画布上的实际坐标为(117.2，39.13)，唐山在canvas画布上的实际坐标为(118.02，39.63)，保定在canvas画布上的实际坐标为(115.48，38.85)等等，将北京及其对应的坐标值，天津及其对应的坐标值等等存储至预设数据库。在一些应用场景下，用户可能在ECharts地图中选定区域，查看选定区域的相关数据，用户选定区域通常是通过按下鼠标左键、不松开左键并在ECharts地图范围内拖动鼠标，然后松开鼠标，通过此过程来选定目标区域。在本申请中，将在Echarts地图上检测(或者监听)鼠标左键被点击、鼠标左键被持续按下并在ECharts地图范围内鼠标被拖动，然后鼠标左键被松开整个过程的事件称为鼠标操作事件。步骤S102，如果在Echarts地图上检测到鼠标操作事件，确定鼠标操作事件在页面上的起始坐标值和终止坐标值。如果在Echarts地图上检测到鼠标左键被点击、鼠标左键被持续按下并在ECharts地图范围内鼠标被拖动，然后鼠标左键被松开整个过程的事件，即检测到鼠标操作事件，确定鼠标操作事件在页面上的起始坐标值和终止坐标值。在本申请中，在Echarts地图上鼠标左键被点击的点记为A，点A即框选的目标区域的左上角，在Echarts地图上鼠标左键被松开记为B，点B即为框选的目标区域的右下角。即点A即为鼠标操作事件在页面上的起始坐标值，点B即为鼠标操作事件在页面上的终止坐标值。例如，在Echarts地图上鼠标左键被点击的点A(起始坐标值)为(120px，20px)，在页面上单位为px，即在框选区域开始时，距离页面左边距离为：120px；鼠标距离页面顶部距离为20px。在Echarts地图上鼠标左键被松开的点B(终止坐标值)为(300px，210px)，即在框选区域结束时，距离页面左边距离为：300px；鼠标距离页面顶部距离为210px。步骤S103，根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标值在Echarts地图所处的canvas画布上确定的对应范围。可选地，在本申请实施例提供的Echarts地图的显示方法中，根据起始坐标值和终止坐标值确定目标范围包括：获取Echarts地图所处的canvas画布在页面上的定位坐标值；根据起始坐标值和定位坐标值计算第一目标坐标值，其中，第一目标坐标值为起始坐标值在Echarts地图所处的canvas画布上对应的坐标值；根据终止坐标值和定位坐标值计算第二目标坐标值，其中，第二目标坐标值为终止坐标值在Echarts地图所处的canvas画布上对应的坐标值；以及根据第一目标坐标值和第二目标坐标值确定目标范围。例如，Canvas画布在页面上的定位坐标为(100px，10px)，即Canvas画布距离页面左边距离为100px，Canvas画布距离页面顶部距离为10px，在Echarts地图上鼠标左键被点击的点A(起始坐标值)为(120px，20px)，在Echarts地图上鼠标左键被松开的点B(终止坐标值)为(300px，210px)，根据起始坐标值和定位坐标值计算第一目标坐标值，即检测到鼠标被按下左键时，光标距离canvas画布的左侧距离为120-100＝20px；距离canvas画布上侧的距离为20-10＝10px；根据终止坐标值和定位坐标值计算第二目标坐标值，即检测到鼠标左键被松开时，光标距离canvas画布的左侧 距离为300-100＝200px；距离canvas画布上侧的距离为210-10＝200px；根据第一目标坐标值和第二目标坐标值确定目标范围即为：20<＝x<＝200，10<＝y<＝200，其中，x为横坐标，y为纵坐标，凡是满足此目标范围的坐标都是被框选中的坐标。步骤S104，确定目标范围在Echarts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据。可选地，在本申请实施例提供的Echarts地图的显示方法中，确定目标范围在Echarts地图上对应的地理位置名称包括：在预设数据库中查找目标范围内的坐标值；以及获取查找到的坐标值在预设数据库中对应的地理位置名称。展示地理位置名称对应的目标数据包括：在与地理位置名称对应的多种数据中确定目标数据；创建目标列表，其中，目标列表中包括地理位置名称和地理位置名称对应的目标数据；以及显示目标列表。例如，目标范围为20<＝x<＝200，10<＝y<＝200，在预设数据库中查找目标范围内的坐标值；查找到预设数据库中(116.46，39.92)，(117.2，39.13)，(118.02，39.63)，(115.48，38.85)等等坐标在目标范围内，获取上述坐标值在预设数据库中对应的地理位置名称，获取到上述坐标值对应的地理位置名称为北京、天津、唐山、保定等等。在数据库中存储有与北京、天津、唐山、保定等等地区对应的多种数据，例如，网站访问量、微博情绪值、网站搜索关键词等等多种业务数据，确定需要在框选出的北京、天津、唐山、保定等等地区展示的目标数据，如果目标数据为网站访问量，北京地区的网站访问量为879542321、天津地区的网站访问量为51854705，根据北京地区的网站访问量，天津地区的网站访问量等等创建目标列表，创建的目标列表如下表1所示：表1地理位置名称网站访问量北京879542321天津51854705唐山35514220保定36715986显示创建的目标列表。用户可以直观的通过目标列表获取框选区域的相关数据，从而，提升了用户的体验度。综上所述，本申请通过计算框选区域的坐标范围，获取框选地图区域内的地理位置信息，再展示框选的区域的地理位置信息的相关数据，从而实现详细展示框选区域 内部的详细信息，也为数据的进一步详细展示提供了一种良好的交互方式。本申请实施例提供的ECharts地图的显示方法，通过在Echarts地图上检测鼠标操作事件；如果在Echarts地图上检测到鼠标操作事件，确定鼠标操作事件在页面上的起始坐标值和终止坐标值；根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标值在Echarts地图所处的canvas画布上确定的对应范围；以及确定目标范围在Echarts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据，解决了相关技术中由于在ECharts地图中无法查看选定的多个区域的相关数据，导致用户体验度较低的问题。通过在Echarts地图上计算目标范围(选定区域范围)的坐标范围，获取选定区域中包含的地理位置名称，从而展示地理位置名称对应的目标数据，实现了在ECharts地图中能够查看选定的多个区域的相关数据，进而达到了提升用户体验度的效果。需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。本申请实施例还提供了一种ECharts地图的显示装置，需要说明的是，本申请实施例的ECharts地图的显示装置可以用于执行本申请实施例所提供的用于ECharts地图的显示方法。以下对本申请实施例提供的ECharts地图的显示装置进行介绍。图2是根据本申请实施例的ECharts地图的显示装置的示意图。如图2所示，该装置包括：检测单元10、第一确定单元20、第二确定单元30和第三确定单元40。检测单元10，用于在Echarts地图上检测鼠标操作事件。第一确定单元20，用于在Echarts地图上检测到鼠标操作事件的情况下，确定鼠标操作事件在页面上的起始坐标值和终止坐标值。第二确定单元30，用于根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标值在Echarts地图所处的canvas画布上确定的对应范围。第三确定单元40，用于确定目标范围在Echarts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据。本申请实施例提供的ECharts地图的显示装置，通过检测单元10在Echarts地图上检测鼠标操作事件；第一确定单元20在Echarts地图上检测到鼠标操作事件的情况下，确定鼠标操作事件在页面上的起始坐标值和终止坐标值；第二确定单元30根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标 值在Echarts地图所处的canvas画布上确定的对应范围；以及第三确定单元40确定目标范围在Echarts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据，解决了相关技术中由于在ECharts地图中无法查看选定的多个区域的相关数据，导致用户体验度较低的问题。通过在Echarts地图上计算目标范围(选定区域范围)的坐标范围，获取选定区域中包含的地理位置名称，从而展示地理位置名称对应的目标数据，实现了在ECharts地图中能够查看选定的多个区域的相关数据，进而达到了提升用户体验度的效果。可选地，在本申请实施例提供的ECharts地图的显示装置中，第二确定单元30包括：第一获取模块，用于获取Echarts地图所处的canvas画布在页面上的定位坐标值；第一计算模块，用于根据起始坐标值和定位坐标值计算第一目标坐标值，其中，第一目标坐标值为起始坐标值在Echarts地图所处的canvas画布上对应的坐标值；第二计算模块，用于根据终止坐标值和定位坐标值计算第二目标坐标值，其中，第二目标坐标值为终止坐标值在Echarts地图所处的canvas画布上对应的坐标值；以及第一确定模块，用于根据第一目标坐标值和第二目标坐标值确定目标范围。可选地，在本申请实施例提供的ECharts地图的显示装置中，该装置还包括：第四确定单元，用于确定Echarts地图上所有的地理位置名称；获取单元，用于利用预设接口分别获取Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值；以及存储单元，用于将Echarts地图上所有的地理位置名称和Echarts地图上每个地理位置名称在Echarts地图所处的canvas画布上对应的坐标值存储至预设数据库。可选地，在本申请实施例提供的ECharts地图的显示装置中，第三确定单元40包括：查找模块，用于在预设数据库中查找目标范围内的坐标值；以及第二获取模块，用于获取查找到的坐标值在预设数据库中对应的地理位置名称。可选地，在本申请实施例提供的ECharts地图的显示装置中，第三确定单元40包括：第二确定模块，用于在与地理位置名称对应的多种数据中确定目标数据；创建模块，用于创建目标列表，其中，目标列表中包括地理位置名称和地理位置名称对应的目标数据；以及显示模块，用于显示目标列表。所述ECharts地图的显示装置包括处理器和存储器，上述检测单元、第一确定单元、第二确定单元和第三确定单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元实现相应功能。处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数显示ECharts地图。存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)，存储器包括至少一个存储芯片。本申请还提供了一种计算机程序产品的实施例，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：在ECharts地图上检测鼠标操作事件；如果在ECharts地图上检测到鼠标操作事件，确定鼠标操作事件在页面上的起始坐标值和终止坐标值；根据起始坐标值和终止坐标值确定目标范围，其中，目标范围为根据起始坐标值和终止坐标值在ECharts地图所处的canvas画布上确定的对应范围；以及确定目标范围在ECharts地图上对应的地理位置名称，并展示地理位置名称对应的目标数据。需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模 块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。以上所述仅为本申请的优选实施例，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。当前第1页1 2 3