基于Echarts的数据处理方法、装置、设备和存储介质

技术领域

本申请涉及数据处理技术领域，特别是涉及基于Echarts的数据处理方法、装置、设备和存储介质。

背景技术

在大数据时代，数据的处理与可视化技术已经在各种领域被广泛应用，通过数据的处理与可视化技术，可以将单一的数据通过合适的可视化图表类型表现出来，使得数据的趋势、分布等能够更为直观地展现出来。在前端开发中，数据的可视化处理需要依赖图表库，Echarts是最常见的图表库之一，它是一个使用JavaScript实现的开源可视化库，涵盖了各行业的各种图表，且使用门槛低，兼容性好，可以在PC和移动设备上流畅运行。使用Echarts进行数据的可视化处理，可以快速简单地生成直观，生动，可交互，可高度个性化定制的数据可视化图表。因此，许多网站都利用Echarts展示数据，以供用户进行数据查询。

在相关技术中，在需要根据发生时间查找数据的场合，通常是展示某一固定时间范围内产生的数据后，用户对数据自行筛选，无法满足用户对范围外数据进行查找或对范围内数据进行精确定位的需求。并且由于Echarts本身并不支持拖拽，因此用户只能通过逐一点击数据，而无法通过其他操作方式来查看数据。

目前针对相关技术中，基于Echarts的数据处理方式无法满足用户对范围外数据查找和精确定位的需求，以及无法提供更多操作方式的问题，尚未提出有效的解决方案。

发明内容

本申请实施例提供了基于Echarts的数据处理方法、装置、设备和存储介质，以至少解决相关技术中基于Echarts的数据处理方式无法满足用户对范围外数据进行查找或对范围内数据进行精确定位的需求，以及无法提供更多操作方式的问题。

第一方面，本申请实施例提供了一种基于Echarts的数据处理方法，所述方法包括：

获取目标数据所对应的第一时间范围；

根据所述第一时间范围生成界面组件，所述界面组件包括第一界面元素、第二界面元素和时间轴；

在所述时间轴中移动所述第一界面元素和所述第二界面元素，根据所述第一界面元素和所述第二界面元素在所述时间轴上的移动位置，确定第二时间范围，并在界面中展示对应于所述第二时间范围的数据。

在其中一些实施例中，在获取目标数据所对应的第一时间范围后包括：

对所述第一时间范围内的数据进行分类，将多个分类结果按照时间顺序展示于所述界面中。

在其中一些实施例中，根据所述第一时间范围生成界面组件包括：

根据所述第一时间范围确定最小单位时间，并根据所述第一时间范围和所述最小单位时间，确定多个时间节点；

根据所述多个时间节点，生成所述时间轴。

在其中一些实施例中，根据所述第一界面元素和所述第二界面元素在所述时间轴上的移动位置，确定第二时间范围，并在界面中展示对应于所述第二时间范围的数据包括：

根据所述第一界面元素与所述第二界面元素的移动位置，确定所述第一界面元素和所述第二界面元素分别对应的时间节点；

根据所述第一界面元素和所述第二界面元素分别对应的时间节点，确定所述第二时间范围。

在其中一些实施例中，所述方法还包括：

在所述第一界面元素的移动位置不处于所述时间节点的情况下，以最接近所述第一界面元素的时间节点作为目标时间节点；和/或，

在所述第二界面元素的移动位置不处于所述时间节点的情况下，以最接近所述第二界面元素的时间节点作为目标时间节点。

在其中一些实施例中，在所述时间轴中移动所述第一界面元素和所述第二界面元素包括：

对所述第一界面元素和所述第二界面元素进行点击或拖拽。

在其中一些实施例中，在所述时间轴中移动所述第一界面元素和所述第二界面元素还包括：

监测所述第一界面元素和/或所述第二界面元素的运动状态；

在监测到所述第一界面元素和/或所述第二界面元素停止运动的情况下，触发在所述界面展示对应于所述第二时间范围的数据的事件。

第二方面，本申请实施例提供了一种数据处理装置，包括：

范围获取模块，用于获取目标数据所对应的第一时间范围；

界面组件模块，用于根据所述第一时间范围生成界面组件，所述界面组件包括第一界面元素、第二界面元素和时间轴；在所述时间轴中移动所述第一界面元素和所述第二界面元素，根据所述第一界面元素和所述第二界面元素在所述时间轴上的移动位置，确定第二时间范围；

展示模块，用于在所述界面中展示对应于所述第二时间范围的数据。

第三方面，本申请实施例提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面所述的的基于Echarts的数据处理方法的步骤。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述第一方面所述的基于Echarts的数据处理方法的步骤。

相比于相关技术，本申请实施例提供的基于Echarts的数据处理方法、装置、设备和存储介质，通过获取目标数据所对应的第一时间范围；根据所述第一时间范围生成界面组件，所述界面组件包括第一界面元素、第二界面元素和时间轴；在所述时间轴中移动所述第一界面元素和所述第二界面元素，根据所述第一界面元素和所述第二界面元素在所述时间轴上的移动位置，确定第二时间范围，并在界面中展示对应于所述第二时间范围的数据，解决了相关技术中基于Echarts的数据处理方式无法满足用户对范围外数据进行查找或对范围内数据进行精确定位的需求，以及无法提供更多操作方式的问题。

本申请的一个或多个实施例的细节在一下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是本实施例的基于Echarts的数据处理方法的终端的硬件结构框图；

图2是本实施例的基于Echarts的数据处理方法的流程图；

图3是本申请的基于Echarts的数据处理方法的一个具体实施例的流程图；

图4是本申请的基于Echarts的数据处理方法的一个具体实施例的界面示意图；

图5是根据本申请实施例的基于Echarts的数据处理装置的结构框图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“多个”是指两个或两个以上。

在本实施例中提供的方法实施例可以在终端、计算机或者类似的运算装置中执行。比如在终端上运行，图1是本实施例的校正参数生成方法的终端的硬件结构框图。如图1所示，终端可以包括一个或多个(图1中仅示出一个)处理器102和用于存储数据的存储器104，其中，处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置。上述终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述终端的结构造成限制。例如，终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示出的不同配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如在本实施例中的校正参数生成方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输设备106用于经由一个网络接收或者发送数据。上述的网络包括终端的通信供应商提供的无线网络。在一个实例中，传输设备106包括一个网络适配器(NetworkInterface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

在本实施例中提供了一种基于Echarts的数据处理方法，图2是本实施例的基于Echarts的数据处理方法的流程图，如图2所示，该流程包括如下步骤：

步骤S201，获取目标数据所对应的第一时间范围。

具体地，第一时间范围是一个概括性的时间范围，例如24小时内、7天内、30天内等。第一时间范围是由系统或平台管理员设定的范围，可以通过下拉时间栏、时间表等形式进行选项的展示与交互。用户首先对第一时间范围进行选择，得到第一时间范围对应的数据。

步骤S202，根据第一时间范围生成界面组件，界面组件包括第一界面元素、第二界面元素和时间轴；

具体地，第一界面元素和第二界面元素均位于时间轴上，且为可操作元素，其有效操作范围不超过时间轴的范围。第一界面元素和第二界面元素的样式可以为操作点，也可以为其他任意样式，本申请对此不做限定。

步骤S203，在时间轴中移动第一界面元素和第二界面元素，根据移动位置，确定第二时间范围。

具体地，移动位置可以是移动后第一界面元素与第二界面元素的相对距离，也可以是移动后第一界面元素或第二界面元素所处的位置。第二时间范围可以是一个时间段，也可以是一个准确的时间点。

进行移动后，当第一界面元素与第二界面元素的位置不重合时，选取两者在时间轴上的相对距离作为第二时间范围的时间跨度，并将第一界面元素在时间轴上的位置对应的时间节点作为第二时间范围的起始时间点，将第二界面元素在时间轴上的位置对应的时间节点作为第二时间范围的终止时间点；当第一界面元素与第二界面元素的位置重合时，选取第一界面元素或第二界面元素在时间轴上的位置对应的时间节点作为第二时间范围。

步骤S204，在界面中展示对应于第二时间范围的数据。

在界面中展示在第二时间范围内产生的所有分类的数据，其中，对于第二时间范围内数据的展示形式可以是Echarts库中的任意形式，例如柱状图、折线图、饼图、气泡图等，本申请对此不做限定。

通过上述步骤S201至S204，通过获取目标数据所对应的第一时间范围，根据第一时间范围生成包括第一界面元素、第二界面元素和时间轴的界面组件，通过第一界面元素、第二界面元素的移动位置确定第二时间范围，并展示第二时间范围对应的数据，解决了相关技术中基于Echarts的数据处理方式无法满足用户对范围外数据进行查找或对范围内数据进行精确定位的需求，以及无法提供更多操作方式的问题，提高了对数据的查找效率，提升了用户的使用体验，为数据的可视化提供了更加清晰明确的处理和展示方法。

在其中一些实施例中，在获取目标数据所对应的第一时间范围之后还包括：

对第一时间范围内的数据进行分类，将多个分类结果按照时间顺序展示于界面中。

获取第一时间范围内的数据后，建立vue框架，通过npm下载Echarts资源包，在目标展示界面中注册Echarts，基于Echarts对数据进行可视化的展示。在展示时，还可以根据需要对展示元素的属性进行设置和更改，例如展示元素的宽高与形状、距离边框的位置、提示信息的样式、字体的颜色和大小等。

具体地，可以根据场景不同对数据进行对应的分类，例如在xdr安全防御平台，可以根据警告或攻击的类型，将数据分为恶劣影响、命令与控制、数据渗漏等。将同一个分类下的数据作为一个集合，按照时间顺序展示不同分类的集合，用户可以根据需要选择某一时间节点的某一分类集合，并对其中的数据进行浏览和查看。

在其中一些实施例中，根据所述第一时间范围生成界面组件包括：

根据第一时间范围确定最小单位时间，并根据第一时间范围和最小单位时间，确定多个时间节点；根据多个时间节点，生成所述时间轴。

具体地，时间轴的分度值与最大范围取决于第一时间范围。当第一时间范围在24小时内时，最小单位时间为一小时；当第一时间范围大于24小时，例如为7天内或30天内时，最小时间单位为一天。将最小时间单位作为分度值，对第一时间范围进行划分，得到多个时间节点，将多个时间节点按照顺序排列在时间轴上，并对不同的时间节点进行时间标注，同时将时间轴的最大时间范围设置为与第一时间范围相同。如此一来，时间轴的颗粒度会随着第一时间范围的变化而改变，提高了组件与界面的适配度，优化了实际的使用体验。

在其中一些实施例中，根据第一界面元素和第二界面元素在时间轴上的移动位置，确定第二时间范围，并在界面中展示对应于第二时间范围的数据包括：

根据第一界面元素与所述第二界面元素的移动位置，确定第一界面元素和第二界面元素分别对应的时间节点；

根据第一界面元素和第二界面元素分别对应的时间节点，确定第二时间范围。

具体地，第一界面元素、第二界面元素和时间轴通过css中的position相对定位至第一时间范围对应数据的展示图表的横坐标上，并通过v-model绑定与横坐标对应的值。这样可以使第一界面元素和第二界面元素移动后，可以通过横坐标快速准确地定位两者对应的时间节点，从而确定第二时间范围。同时，第一时间范围发生变化时，第一时间范围对应数据的展示图表的横坐标也会随之进行适配性的改变，相应地，展示图表上的提示信息也会发生变化。

在时间轴上移动第一界面元素和第二界面元素，可以根据需要起到对第一时间范围内的数据进行精确筛选和查看。进行移动后，当第一界面元素与第二界面元素的位置不重合时，选取两者在时间轴上的相对距离作为第二时间范围的时间跨度，并将第一界面元素在时间轴上的位置对应的时间节点作为第二时间范围的起始时间点，将第二界面元素在时间轴上的位置对应的时间节点作为第二时间范围的终止时间点；当第一界面元素与第二界面元素的位置重合时，选取第一界面元素或第二界面元素在时间轴上的位置对应的时间节点作为第二时间范围。

在其中一些实施例中，还包括：

在第一界面元素的移动位置不处于时间节点的情况下，以最接近第一界面元素的时间节点作为目标时间节点；和/或，

在第二界面元素的移动位置不处于时间节点的情况下，以最接近第二界面元素的时间节点作为目标时间节点。

在实际使用过程中，有可能出现第一界面元素和/或第二界面元素超出时间轴的移动范围的情况，在这种情况下，组件将距离第一界面元素和/或第二界面元素最近的时间节点作为目标时间节点，以该目标时间节点作为第二时间范围进行后续的步骤，保证了界面组件在界面元素位置异常时也可以正常运行，提高了组件的稳定性。

在其中一些实施例中，在时间轴中移动第一界面元素和第二界面元素包括：

对第一界面元素和第二界面元素进行点击或拖拽。

本申请的第一界面元素和第二界面元素支持点击和拖拽两种操作，用户可以通过将界面元素拖拽至时间轴上的目标时间点，或直接对时间轴上的目标时间点进行点击，来完成对界面元素的移动。由于Echarts本身没有提供封装好的拖拽改变图表的功能，因此界面元素的拖拽是靠目标页面引入滑动输入器(slide)实现的，滑动输入器对当前值和可选范围进行展示，当用户需要在数值区间或自定义区间内进行选择时，可使用滑动输入器，选择的值可为连续值或离散值。滑动输入器包括滑杆和滑块两个组成部分，滑杆与界面组件的时间轴绑定，滑块与界面组件的第一界面元素和第二界面元素绑定，以此实现界面组件的拖拽功能。

在其中一些实施例中，在时间轴中移动第一界面元素和第二界面元素还包括：

监测第一界面元素和/或第二界面元素的运动状态；

在监测到第一界面元素和/或第二界面元素停止运动的情况下，触发在界面展示对应于第二时间范围的数据的事件。

由于本申请的界面元素支持拖拽移动，因此如果将界面元素设置为拖动时同步触发对应操作，会导致当界面元素被拖拽多个跨度时，事件也会相应地触发多次，从而使得系统的处理性能降低。为了减轻系统的处理负荷，在界面组件中引入lodash，并在事件中使用debounce防抖，在监测到界面元素停止运动时，才触发相应的事件，并在目标界面中展示对应于第二时间范围的数据，这样即使界面元素移动多个跨度或快速进行多次移动，也只根据最后停止的位置触发一次操作，提高了系统的处理效率。

在一个具体的实施例中，图3是本申请的基于Echarts的数据处理方法的一个具体实施例的流程图，如图3所示，该流程包括如下步骤：

步骤S301，使用vue框架搭建项目。

步骤S302，选择第一时间范围，本实施例中采用下拉时间栏的方法，选择第一时间范围为7天内。

步骤S303，在目标页面下载并引入echarts，并设置界面的宽高以及options属性，例如，设置展示界面为点状图，并根据不同分类设置数据集合点的颜色，在xdr安全防御平台，可以根据产生警报的攻击链进行分类，例如分为恶劣影响、命令与控制、数据渗漏等。

步骤S304，在界面中下载并使用slide，组成界面组件。

步骤S305，将界面组件的时间轴相对定位至第一时间范围对应数据的图表横坐标轴上，并进行绑定。

步骤S306，拖拽或点击界面元素后，计算第一界面元素和第二界面元素的移动距离，例如，将第一界面元素移动至5.23，将第二界面元素移动至5.26，两者的时间跨度为5.23至5.26的三天时间。

步骤S307，设置滑动防抖，停止移动时再触发对应操作。

步骤S308，根据第一界面元素和第二界面元素的移动距离，搜索对应于该跨度的第二时间范围内的数据，并将数据进行展示。

在一个具体的实施例中，图4是本申请的基于Echarts的数据处理方法的一个具体实施例的界面示意图，界面的主要功能包括第一时间范围选择、第一时间范围对应的数据展示、界面组件和第二时间范围对应的数据展示。

本实施例还提供了一种基于Echarts的数据处理装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

在一些实施例中，图5是根据本申请实施例的基于Echarts的数据处理装置的结构框图，如图5所示，基于Echarts的数据处理装置包括：范围获取模块51、界面组件模块52和展示模块53；

范围获取模块，用于获取目标数据所对应的第一时间范围；

界面组件模块，用于根据第一时间范围生成界面组件，界面组件包括第一界面元素、第二界面元素和时间轴；在所述时间轴中移动第一界面元素和第二界面元素，根据第一界面元素和第二界面元素在时间轴上的移动位置，确定第二时间范围；

展示模块，用于在界面中展示对应于第二时间范围的数据。

通过上述基于Echarts的数据处理装置，获取目标数据所对应的第一时间范围，根据第一时间范围生成包括第一界面元素、第二界面元素和时间轴的界面组件，通过第一界面元素、第二界面元素的移动位置确定第二时间范围，并展示第二时间范围对应的数据，解决了相关技术中基于Echarts的数据处理方式无法满足用户对范围外数据进行查找或对范围内数据进行精确定位的需求，以及无法提供更多操作方式的问题，提高了对数据的查找效率，提升了用户的使用体验，为数据的可视化提供了更加清晰明确的处理和展示方法。

在其中一些实施例中，范围获取模块51、界面组件模块52和展示模块53还用于实现上述各实施例提供的基于Echarts的数据处理方法中的步骤，在这里不再赘述。

需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述各实施例提供的基于Echarts的数据处理方法中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各个实施例提供的基于Echarts的数据处理方法中的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。