CN111736823A - 数据可视化方法、装置及计算机可读介质 - Google Patents

Abstract

本发明提供了数据可视化方法、装置及计算机可读介质，该方法包括：当接收到用户通过前端页面输入的编辑指令时，执行下述操作：在前端页面中创建实体画布，在实体画布中创建至少一个可视化模块，计算每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数，针对每一个可视化模块，在可视化模块中创建图表，当接收到用户发送的调节指令时，根据调节指令、第一最小基数和第二最小基数，对调节指令相对应的目标可视化模块进行调节。本方案创建的可视化模块，通过可视化模块上渲染获得图表，并根据用户需要，对可视化模块进行调节，能够解决数据可视化的开发周期长、维护成本高、改动复杂困难的问题。

Description

数据可视化方法、装置及计算机可读介质

技术领域

本发明涉及大数据可视化技术领域，尤其涉及数据可视化方法、装置及计算机可读介质。

背景技术

目前，大数据可视化是一种展示数据的最有效最直观的手段之一，但是常规的数据可视化的构建方法往往需要进行繁琐的设计、开发过程。

当前对于数据可视化的构建一般包括以下方式：

从数据获取、可视化的过程通常采用代码定制化方式开发成风格统一的展示方式，这种做法的缺点是每次的改动都需要将系统代码进行浸入式修改才能完成，改动涉及人员多且复杂，相当于重新开发一套不同统计维度和展示方式。

因此，针对以上不足，需要提供一种数据可视化方法、装置及计算机可读介质，以解决数据可视化的开发周期长、维护成本高、改动复杂困难的问题。

发明内容

本发明提供了一种数据可视化方法、装置及计算机可读介质，能够解决数据可视化的开发周期长、维护成本高、改动复杂困难的问题。

第一方面，本发明提供了一种数据可视化方法，包括：

当接收到用户通过前端页面输入的编辑指令时，执行下述操作：

在所述前端页面中创建实体画布；

在所述实体画布中创建至少一个可视化模块；

计算每一个所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数；

针对每一个所述可视化模块，在所述可视化模块中创建图表；

当接收到用户发送的调节指令时，根据所述调节指令、所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节。

可选地，所述根据所述调节指令、所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节，包括：

确定所述调节指令对应的目标可视化模块中的目标点在所述实体画布中的第一位置和所述调节指令中的所述目标点在所述实体画布中的第二位置；

确定所述第一最小基数和所述第二最小基数中数值最小的目标最小基数；

根据所述目标最小基数和所述第二位置对所述目标可视化模块进行调节。

可选地，所述根据所述目标最小基数和所述第二位置对所述调节指令相对应的目标可视化模块进行调节，包括：

A0：以所述目标最小基数为半径和所述第二位置为圆心设置预设圆；

A1：确定所述第一位置是否位于所述预设圆的圆内，如果是，执行A4，否则，执行A2；

A2：以所述目标最小基数的整数倍作为每次移动的位移量，对所述目标可视化模块进行移动；

A3：确定移动后的所述目标点在所述实体画布中的当前位置，并将所述当前位置作为第一位置，返回A1；

A4：将所述目标可视化模块从所述第一位置移动至所述第二位置处。

可选地，所述在所述实体画布中创建至少一个可视化模块，包括：

确定待配置区域在所述实体画布中的行数和列数；

根据所述行数、列数、所述实体画布的第二宽度值和第二高度值，计算每一个所述待配置区域的第三宽度值和第三高度值；

根据所述第三宽度值和所述第三高度值，确定每一个所述待配置区域在所述实体画布中的位置；

在确定出的所述位置中创建对应的所述待配置区域；

根据所述待配置区域生成对应的可视化模块。

可选地，所述根据所述待配置区域生成对应的可视化模块，包括：

创建每一个所述待配置区域对应的DOM节点；

确定每一个所述待配置区域对应的模块配置信息；

将所述模块配置信息赋值给对应的所述DOM节点，将所述DOM节点对应的所述待配置区域转化为能够调节的可视化模块。

可选地，在所述实体画布中创建至少一个可视化模块之后，在所述可视化模块中创建图表之前，进一步包括：

确定所述实体画布对应的时间范围和业务类型；

从至少一个数据源中获取属于所述业务类型且位于所述时间范围内的待渲染数据；

所述在所述可视化模块中创建图表，包括：

从所述待渲染数据中筛选出所述可视化模块对应的目标数据；

调用所述可视化模块根据所述目标数据创建图表。

可选地，所述计算每一个所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数，包括：

确定所述实体画布中在第一方向上的基础模块的第一数量；

确定所述实体画布中在第二方向上的基础模块的第二数量；

根据所述可视化模块在所述第一方向上的第一尺寸信息以及在所述第二方向上的第二尺寸信息；

根据所述第一尺寸信息和所述第一数量，确定所述可视化模块沿所述第一方向移动时的第一最小基数；

根据所述第二尺寸信息和所述第二数量，确定所述可视化模块沿所述第二方向移动时的第二最小基数。

可选地，所述在所述前端页面中创建实体画布，包括：

调用window.innerWidth获取所述前端页面中的可视化区域的第一宽度值，并调用window.innerHeight获取所述可视化区域的第一高度值；

根据所述第一宽度值和所述第一高度值，在所述可视化区域中创建实体画布。

第二方面，本发明还提供了一种数据可视化装置，包括：接收模块、第一创建模块、第二创建模块、计算模块、第三创建模块和调节模块；

所述接收模块，用于接收用户通过前端页面输入的编辑指令；

所述第一创建模块，用于在所述前端页面中创建实体画布；

所述第二创建模块，用于在所述第一创建模块创建的所述实体画布中创建至少一个可视化模块；

所述计算模块，用于计算每一个所述第二创建模块创建的所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数；

所述第三创建模块，用于针对每一个所述第二创建模块创建的所述可视化模块，在所述可视化模块中创建图表；

所述调节模块，用于当接收到用户发送的调节指令时，根据所述调节指令、所述计算模块计算的所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节。

可选地，所述调节模块，用于执行以下步骤：

确定所述调节指令对应的目标可视化模块中的目标点在所述实体画布中的第一位置和所述调节指令中的所述目标点在所述实体画布中的第二位置；

确定所述第一最小基数和所述第二最小基数中数值最小的目标最小基数；

根据所述目标最小基数和所述第二位置对所述目标可视化模块进行调节。

可选地，所述调节模块，还用于执行以下步骤：

A0：以所述目标最小基数为半径和所述第二位置为圆心设置预设圆；

A1：确定所述第一位置是否位于所述预设圆的圆内，如果是，执行A4，否则，执行A2；

A2：以所述目标最小基数的整数倍作为每次移动的位移量，对所述目标可视化模块进行移动；

A3：确定移动后的所述目标点在所述实体画布中的当前位置，并将所述当前位置作为第一位置，返回A1；

A4：将所述目标可视化模块从所述第一位置移动至所述第二位置处。

可选地，所述第二创建模块，用于执行以下步骤：

确定待配置区域在所述实体画布中的行数和列数；

根据所述行数、列数、所述实体画布的第二宽度值和第二高度值，计算每一个所述待配置区域的第三宽度值和第三高度值；

根据所述第三宽度值和所述第三高度值，确定每一个所述待配置区域在所述实体画布中的位置；

在确定出的所述位置中创建对应的所述待配置区域；

根据所述待配置区域生成对应的可视化模块。

可选地，所述第二创建模块，还用于执行以下步骤：

创建每一个所述待配置区域对应的DOM节点；

确定每一个所述待配置区域对应的模块配置信息；

将所述模块配置信息赋值给对应的所述DOM节点，将所述DOM节点对应的所述待配置区域转化为能够调节的可视化模块。

可选地，进一步包括：确定模块和获取模块；

所述确定模块，用于确定所述实体画布对应的时间范围和业务类型；

所述获取模块，用于从至少一个数据源中获取属于所述业务类型且位于所述时间范围内的待渲染数据。

可选地，所述第三创建模块，用于执行以下步骤：

从所述待渲染数据中筛选出所述可视化模块对应的目标数据；

调用所述可视化模块根据所述目标数据创建图表。

可选地，所述计算模块，用于执行以下步骤：

确定所述实体画布中在第一方向上的基础模块的第一数量；

确定所述实体画布中在第二方向上的基础模块的第二数量；

根据所述可视化模块在所述第一方向上的第一尺寸信息以及在所述第二方向上的第二尺寸信息；

根据所述第一尺寸信息和所述第一数量，确定所述可视化模块沿所述第一方向移动时的第一最小基数；

根据所述第二尺寸信息和所述第二数量，确定所述可视化模块沿所述第二方向移动时的第二最小基数。

可选地，所述第一创建模块，用于执行以下步骤：

调用window.innerWidth获取所述前端页面中的可视化区域的第一宽度值，并调用window.innerHeight获取所述可视化区域的第一高度值；

根据所述第一宽度值和所述第一高度值，在所述可视化区域中创建实体画布。

第三方面，本发明提供了数据可视化装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行上述第一方面或第一方面的任一可能的实现方式所提供的方法。

第四方面，本发明提供了计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行上述第一方面或第一方面的任一可能的实现方式所提供的方法。

本发明提供的数据可视化方法、装置及计算机可读介质，当接收到用户通过前端页面输入的编辑指令时，执行下述操作：在前端页面中创建实体画布，在实体画布中创建至少一个可视化模块，计算每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数，针对每一个可视化模块，在可视化模块中创建图表，当接收到用户发送的调节指令时，根据调节指令、第一最小基数和第二最小基数，对调节指令相对应的目标可视化模块进行调节。本发明创建的可视化模块，通过可视化模块上渲染获得图表，并根据用户需要，对可视化模块进行调节，能够解决数据可视化的开发周期长、维护成本高、改动复杂困难的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一个实施例提-供的一种数据可视化方法的流程图；

图2是本发明另一个实施例提供的一种数据可视化方法的流程图；

图3是本发明一个实施例提供的一种数据可视化装置所在设备的示意图；

图4是本发明一个实施例提供的一种数据可视化装置的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1是本发明一个实施例提供的一种数据可视化方法的流程图，如图1所示，该方法可以包括以下步骤：

步骤101、当接收到用户通过前端页面输入的编辑指令时，执行下述操作：在前端页面中创建实体画布；

步骤102、在实体画布中创建至少一个可视化模块；

步骤103、计算每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数；

步骤104、针对每一个可视化模块，在可视化模块中创建图表；

步骤105、当接收到用户发送的调节指令时，根据调节指令、第一最小基数和第二最小基数，对调节指令相对应的目标可视化模块进行调节。

本发明实施例提供的数据可视化方法，当接收到用户通过前端页面输入的编辑指令时，执行下述操作：在前端页面中创建实体画布，在实体画布中创建至少一个可视化模块，计算每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数，针对每一个可视化模块，在可视化模块中创建图表，当接收到用户发送的调节指令时，根据调节指令、第一最小基数和第二最小基数，对调节指令相对应的目标可视化模块进行调节。本发明方法创建的可视化模块，通过可视化模块上渲染获得图表，并根据用户需要，对可视化模块进行调节，能够解决数据可视化的开发周期长、维护成本高、改动复杂困难的问题。

基于图1所示的一种数据可视化方法，在本发明的一种实施例中，所述根据所述调节指令、所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节，包括：

确定所述调节指令对应的目标可视化模块中的目标点在所述实体画布中的第一位置和所述调节指令中的所述目标点在所述实体画布中的第二位置；

确定所述第一最小基数和所述第二最小基数中数值最小的目标最小基数；

根据所述目标最小基数和所述第二位置对所述目标可视化模块进行调节。

在本发明实施例中，用户将可视化模块从一个位置移动到另一个位置过程中，获取可视化模块中的目标点在移动前后的两次位置，根据可视化在第一方向能够移动的最小位移值和在第二方向能够移动的最小位移值两者中的最小的一个位移值，调节可视化模块从第一位置移动到第二位置，保证可视化模块根据用户鼠标悬停的位置精准附着于可视化模块能够移动的最小基数范围中。

基于图1所示的一种数据可视化方法，在本发明的一种实施例中，所述根据所述目标最小基数和所述第二位置对所述调节指令相对应的目标可视化模块进行调节，包括：

A0：以所述目标最小基数为半径和所述第二位置为圆心设置预设圆；

A1：确定所述第一位置是否位于所述预设圆的圆内，如果是，执行A4，否则，执行A2；

A2：以所述目标最小基数的整数倍作为每次移动的位移量，对所述目标可视化模块进行移动；

A3：确定移动后的所述目标点在所述实体画布中的当前位置，并将所述当前位置作为第一位置，返回A1；

A4：将所述目标可视化模块从所述第一位置移动至所述第二位置处。

在本发明实施例中，用户将目标可视化模块从一个位置移动到另一个位置过程中，首先在目标可视化模块移动到的另一位置处，以该位置为圆心和以目标最小基数为半径创建一个预设圆，当目标可视化模块目标点的当前位置不在预设圆中时，调节目标可视化模块移动的幅度为目标最小基数的整数倍，因此，可以提高目标可视化模块的移动速度，当目标可视化模块目标点的当前位置在预设圆中时，调节目标可视化自动对齐可视化模块能够移动的最小基数范围，因此，该实施例既提高了目标可视化模块在移动过程中的速度，又能够保证目标可视化模块自动对齐最小基数范围。

基于图1所示的一种数据可视化方法，在本发明的一种实施例中，所述在所述实体画布中创建至少一个可视化模块，包括：

确定待配置区域在所述实体画布中的行数和列数；

根据所述行数、列数、所述实体画布的第二宽度值和第二高度值，计算每一个所述待配置区域的第三宽度值和第三高度值；

根据所述第三宽度值和所述第三高度值，确定每一个所述待配置区域在所述实体画布中的位置；

在确定出的所述位置中创建对应的所述待配置区域；

根据所述待配置区域生成对应的可视化模块。

在本发明实施例中，根据用户的编辑指令中包括的在实体画布中创建的可视化模块的行数和列数，按照顺序依次生成所需配置的所有可视化模块，如此设置，可以有效避免可视化模块在生成过程中存在混乱配置的问题。

基于图1所示的一种数据可视化方法，在本发明的一种实施例中，所述根据所述待配置区域生成对应的可视化模块，包括：

创建每一个所述待配置区域对应的DOM节点；

确定每一个所述待配置区域对应的模块配置信息；

将所述模块配置信息赋值给对应的所述DOM节点，将所述DOM节点对应的所述待配置区域转化为能够调节的可视化模块。

在本发明实施例中，基于vue-grid-layout拖拽框架，在待配置区域添加DOM节点功能，并生成带有唯一标识信息的DOM节点。本实施例先创建DOM节点，然后再DOM节点上渲染图表，如此设置，与从数据库中获取已经渲染好的DOM节点拖拽到实体画布中，能够避免当图表含有较多元素时的卡顿现象，同时，可在DOM节点上自由调节可视化模块的位置和大小，提高可视化模块调节状态的灵活性。

基于图1所示的一种数据可视化方法，在本发明的一种实施例中，在所述实体画布中创建至少一个可视化模块之后，在所述可视化模块中创建图表之前，进一步包括：

确定所述实体画布对应的时间范围和业务类型；

从至少一个数据源中获取属于所述业务类型且位于所述时间范围内的待渲染数据；

所述在所述可视化模块中创建图表，包括：

从所述待渲染数据中筛选出所述可视化模块对应的目标数据；

调用所述可视化模块根据所述目标数据创建图表。

在本发明实施例中，每个可视化模块都可配置当前DOM节点的业务类型、名称、图表类型、背景边框、背景颜色、定时更新及各种颜色配置。配置完成后根据配置数据去渲染当前DOM节点实现可视化图表功能。如此设置，能够在不改变原有布局的基础上通过上述步骤直接编辑需要更改的模块，达到灵活快速的更改，同时，当需要根据数据的重要程度改变各模块的位置时，可直接通过拖拽的方式进行位置改变，而不需要借助开发通过代码的形式进行更改，这很大程度上解决了大屏开发周期缓慢和修改复杂的问题。

基于图1所示的一种数据可视化方法，在本发明的一种实施例中，可选地，所述计算每一个所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数，包括：

确定所述实体画布中在第一方向上的基础模块的第一数量；

确定所述实体画布中在第二方向上的基础模块的第二数量；

根据所述可视化模块在所述第一方向上的第一尺寸信息以及在所述第二方向上的第二尺寸信息；

根据所述第一尺寸信息和所述第一数量，确定所述可视化模块沿所述第一方向移动时的第一最小基数；

根据所述第二尺寸信息和所述第二数量，确定所述可视化模块沿所述第二方向移动时的第二最小基数。

在本发明实施例中，根据可视化模块的尺寸信息和数量信息计算出每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数。如此设置，能够实现当需要根据数据的重要程度和屏幕占比大小时，可直接通过拖拽的方式进行可视化模块的大小改变，拖拽时会监听当前模块的坐标和宽高自动计算其他临近的模块的位置，避免出现重叠覆盖的现象。

基于图1所示的一种数据可视化方法，在本发明的一种实施例中， 所述在所述前端页面中创建实体画布，包括：

调用window.innerWidth获取所述前端页面中的可视化区域的第一宽度值，并调用window.innerHeight获取所述可视化区域的第一高度值；

根据所述第一宽度值和所述第一高度值，在所述可视化区域中创建实体画布。

在本发明实施例中，通过获取前端页面的可视化区域的宽度值和高度值，以保证在可视化区域内创建一个尺寸合适的实体画布，以用于后期在实体画布中创建可视化模块，由于各个终端设备的尺寸不统一的原因或者由于更新更换显示设备导致尺寸改变而产生的大屏适配问题，均根据获取到的当前显示设备前端页面的可视化区域的宽度和高度数值，在可视化区域创建实体画布，保证了实体画布在可视化区域中的有效性。

如图2所示，为了更加清楚地说明本发明的技术方案及优点，下面对本发明实施例提供的数据可视化方法进行详细说明，具体包括以下步骤：

步骤201、接收用户通过前端页面输入的编辑指令。

在本步骤中，接收用户通过页面输入的编辑指令，并根据该编辑指令，完成相对应的动作，每次接收到编辑指令时，均及时有效的完成该编辑指令赋予的动作信息。

步骤202、根据获取到的可视化区域的高度值和宽度值，在前端页面的可视化区域创建实体画布。

在本步骤中，通过获取前端页面的可视化区域的宽度值和高度值，以保证在可视化区域内创建一个尺寸合适的实体画布，以用于后期在实体画布中创建可视化模块，由于各个终端设备的尺寸不统一的原因或者由于更新更换显示设备导致尺寸改变而产生的大屏适配问题，均根据获取到的当前显示设备前端页面的可视化区域的宽度和高度数值，在可视化区域创建实体画布，保证了实体画布在可视化区域中的有效性。

步骤203、确定实体画布对应的时间范围和业务类型，并从至少一个数据源中获取属于业务类型且位于时间范围内的待渲染数据。

在本发明实施例中，首先确定实体画布对应的时间范围和业务类型，再从数据库中选取与该时间范围和业务类型相对应的数据，将该数据确定为待渲染的数据，如此设置，当实体画布中每一个可视化模块在配置属性信息过程中，从确定的待渲染数据中进行该可视化模块属性信息的配置，能够提高属性信息配置的效率，同时节约处理器运行内存，提高处理器运行效率。

步骤204、在实体画布中创建至少一个与待配置区域相对应的DOM节点，并确定每一个待配置区域对应的模块配置信息，将模块配置信息赋值给对应的DOM节点，将DOM节点对应的待配置区域转化为能够调节的可视化模块。

在本步骤中，首先确定待配置区域在实体画布中的行数和列数，根据行数、列数、实体画布的第二宽度值和第二高度值，计算每一个待配置的第三宽度值和第三高度值，根据第三宽度值和第三高度值，确定每一个待配置区域在实体画布中的位置，在确定出的位置中创建对应的所述待配置区域，基于vue-grid-layout拖拽框架，在待配置区域添加DOM节点功能，并生成带有唯一标识信息的DOM节点。本实施例先创建DOM节点，然后再DOM节点上渲染图表，如此设置，与从数据库中获取已经渲染好的DOM节点拖拽到实体画布中，能够避免当图表含有较多元素时的卡顿现象，同时，可在DOM节点上自由调节可视化模块的位置和大小，提高可视化模块调节状态的灵活性。

步骤205、计算每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数。

在本步骤中，根据可视化模块的尺寸信息和数量信息计算出每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数。如此设置，能够实现当需要根据数据的重要程度和屏幕占比大小时，可直接通过拖拽的方式进行可视化模块的大小改变，拖拽时会监听当前模块的坐标和宽高自动计算其他临近的模块的位置，避免出现重叠覆盖的现象。

步骤206、针对每一个可视化模块，从待渲染数据中筛选出可视化模块对应的目标数据，调用可视化模块根据目标数据创建图表。

在本步骤中，每个可视化模块都可配置当前DOM节点的业务类型、名称、图表类型、背景边框、背景颜色、定时更新及各种颜色配置。配置完成后根据配置数据去渲染当前DOM节点实现可视化图表功能。如此设置，能够在不改变原有布局的基础上通过上述步骤直接编辑需要更改的模块，达到灵活快速的更改，同时，当需要根据数据的重要程度改变各模块的位置时，可直接通过拖拽的方式进行位置改变，而不需要借助开发通过代码的形式进行更改，这很大程度上解决了大屏开发周期缓慢和修改复杂的问题。

步骤207、当接收到用户发送的调节指令时，确定调节指令对应的目标可视化模块中的目标点在实体画布中的第一位置和调节指令中的目标点在实体画布中的第二位置以及确定第一最小基数和第二最小基数中数值最小的目标最小基数。

在本步骤中，用户将可视化模块从一个位置移动到另一个位置过程中，获取可视化模块中的目标点在移动前后的两次位置，根据可视化在第一方向能够移动的最小位移值和在第二方向能够移动的最小位移值两者中的最小的一个位移值，调节可视化模块从第一位置移动到第二位置，保证可视化模块根据用户鼠标悬停的位置精准附着于可视化模块能够移动的最小基数范围中。

步骤208、根据目标最小基数和第二位置对目标可视化模块进行调节。

在本步骤中，用户将目标可视化模块从一个位置移动到另一个位置过程中，首先在目标可视化模块移动到的另一位置处，以该位置为圆心和以目标最小基数为半径创建一个预设圆，当目标可视化模块目标点的当前位置不在预设圆中时，调节目标可视化模块移动的幅度为目标最小基数的整数倍，因此，可以提高目标可视化模块的移动速度，当目标可视化模块目标点的当前位置在预设圆中时，调节目标可视化自动对齐可视化模块能够移动的最小基数范围，因此，该实施例既提高了目标可视化模块在移动过程中的速度，又能够保证目标可视化模块自动对齐最小基数范围。

如图3和图4所示，本发明实施例提供了数据可视化装置所在的设备和数据可视化装置。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。从硬件层面而言，如图3所示，为本发明实施例提供的数据可视化装置所在设备的一种硬件结构图，除了图3所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的设备通常还可以包括其他硬件，如负责处理报文的转发芯片等等。以软件实现为例，如图4所示，作为一个逻辑意义上的装置，是通过其所在设备的CPU将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。

如图4所示，本实施例提供的数据可视化装置，包括：接收模块401、第一创建模块402、第二创建模块403、计算模块404、第三创建模块405和调节模块406；

所述接收模块401，用于接收用户通过前端页面输入的编辑指令；

所述第一创建模块402，用于在所述前端页面中创建实体画布；

所述第二创建模块403，用于在所述第一创建模块402创建的所述实体画布中创建至少一个可视化模块；

所述计算模块404，用于计算每一个所述第二创建模块403创建的所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数；

所述第三创建模块405，用于针对每一个所述第二创建模块403创建的所述可视化模块，在所述可视化模块中创建图表；

所述调节模块406，用于当接收到用户发送的调节指令时，根据所述调节指令、所述计算模块404计算的所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节。

在本发明实施例中，接收模块401可用于执行上述方法实施例中的步骤101，第一创建模块402也可用于执行上述方法实施例中的步骤101，第二创建模块403可用于执行上述方法实施例中的步骤102，计算模块404可用于执行上述方法实施例中的步骤103，第三创建模块405可用于执行上述方法实施例中的步骤104，调节模块406可用于执行上述方法实施例中的步骤105。

在本发明一个实施例中，所述调节模块，用于执行以下步骤：

确定所述调节指令对应的目标可视化模块中的目标点在所述实体画布中的第一位置和所述调节指令中的所述目标点在所述实体画布中的第二位置；

确定所述第一最小基数和所述第二最小基数中数值最小的目标最小基数；

根据所述目标最小基数和所述第二位置对所述目标可视化模块进行调节。

在本发明一个实施例中，所述调节模块，还用于执行以下步骤：

A0：以所述目标最小基数为半径和所述第二位置为圆心设置预设圆；

A1：确定所述第一位置是否位于所述预设圆的圆内，如果是，执行A4，否则，执行A2；

A2：以所述目标最小基数的整数倍作为每次移动的位移量，对所述目标可视化模块进行移动；

A3：确定移动后的所述目标点在所述实体画布中的当前位置，并将所述当前位置作为第一位置，返回A1；

A4：将所述目标可视化模块从所述第一位置移动至所述第二位置处。

在本发明一个实施例中，所述第二创建模块，用于执行以下步骤：

确定待配置区域在所述实体画布中的行数和列数；

根据所述行数、列数、所述实体画布的第二宽度值和第二高度值，计算每一个所述待配置区域的第三宽度值和第三高度值；

根据所述第三宽度值和所述第三高度值，确定每一个所述待配置区域在所述实体画布中的位置；

在确定出的所述位置中创建对应的所述待配置区域；

根据所述待配置区域生成对应的可视化模块。

在本发明一个实施例中，所述第二创建模块，还用于执行以下步骤：

创建每一个所述待配置区域对应的DOM节点；

确定每一个所述待配置区域对应的模块配置信息；

将所述模块配置信息赋值给对应的所述DOM节点，将所述DOM节点对应的所述待配置区域转化为能够调节的可视化模块。

在本发明一个实施例中，进一步包括：确定模块和获取模块；

所述确定模块，用于确定所述实体画布对应的时间范围和业务类型；

所述获取模块，用于从至少一个数据源中获取属于所述业务类型且位于所述时间范围内的待渲染数据。

在本发明一个实施例中，所述第三创建模块，用于执行以下步骤：

从所述待渲染数据中筛选出所述可视化模块对应的目标数据；

调用所述可视化模块根据所述目标数据创建图表。

在本发明一个实施例中，所述计算模块，用于执行以下步骤：

确定所述实体画布中在第一方向上的基础模块的第一数量；

确定所述实体画布中在第二方向上的基础模块的第二数量；

根据所述可视化模块在所述第一方向上的第一尺寸信息以及在所述第二方向上的第二尺寸信息；

根据所述第一尺寸信息和所述第一数量，确定所述可视化模块沿所述第一方向移动时的第一最小基数；

根据所述第二尺寸信息和所述第二数量，确定所述可视化模块沿所述第二方向移动时的第二最小基数。

在本发明一个实施例中，所述第一创建模块，用于执行以下步骤：

调用window.innerWidth获取所述前端页面中的可视化区域的第一宽度值，并调用window.innerHeight获取所述可视化区域的第一高度值；

根据所述第一宽度值和所述第一高度值，在所述可视化区域中创建实体画布。

本发明实施例还提供了数据可视化装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行本发明任一实施例中的数据可视化方法。

本发明实施例还提供了一种计算机可读介质，存储用于使一计算机执行如本文所述的数据可视化方法的指令。具体地，可以提供配有存储介质的方法或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该方法或者装置的计算机（或CPU或MPU）读出并执行存储在存储介质中的程序代码。

在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。

用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘（如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RAM、DVD-RW、DVD+RW）、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。

此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作方法等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。

此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。

综上所述，本发明各个实施例所提供的数据可视化方法、装置及计算机可读介质，至少具有如下有益效果：

1、在本发明实施例中，当接收到用户通过前端页面输入的编辑指令时，执行下述操作：在前端页面中创建实体画布，在实体画布中创建至少一个可视化模块，计算每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数，针对每一个可视化模块，在可视化模块中创建图表，当接收到用户发送的调节指令时，根据调节指令、第一最小基数和第二最小基数，对调节指令相对应的目标可视化模块进行调节。本发明实施例创建的可视化模块，通过可视化模块上渲染获得图表，并根据用户需要，对可视化模块进行调节，能够解决数据可视化的开发周期长、维护成本高、改动复杂困难的问题。

2、在本发明实施例中，通过获取前端页面的可视化区域的宽度值和高度值，以保证在可视化区域内创建一个尺寸合适的实体画布，以用于后期在实体画布中创建可视化模块，由于各个终端设备的尺寸不统一的原因或者由于更新更换显示设备导致尺寸改变而产生的大屏适配问题，均根据获取到的当前显示设备前端页面的可视化区域的宽度和高度数值，在可视化区域创建实体画布，保证了实体画布在可视化区域中的有效性。

3、在本发明实施例中，用户将可视化模块从一个位置移动到另一个位置过程中，获取可视化模块中的目标点在移动前后的两次位置，根据可视化在第一方向能够移动的最小位移值和在第二方向能够移动的最小位移值两者中的最小的一个位移值，调节可视化模块从第一位置移动到第二位置，保证可视化模块根据用户鼠标悬停的位置精准附着于可视化模块能够移动的最小基数范围中。

4、在本发明实施例中，用户将目标可视化模块从一个位置移动到另一个位置过程中，首先在目标可视化模块移动到的另一位置处，以该位置为圆心和以目标最小基数为半径创建一个预设圆，当目标可视化模块目标点的当前位置不在预设圆中时，调节目标可视化模块移动的幅度为目标最小基数的整数倍，因此，可以提高目标可视化模块的移动速度，当目标可视化模块目标点的当前位置在预设圆中时，调节目标可视化自动对齐可视化模块能够移动的最小基数范围，因此，该实施例既提高了目标可视化模块在移动过程中的速度，又能够保证目标可视化模块自动对齐最小基数范围。

5、在本发明实施例中，根据用户的编辑指令中包括的在实体画布中创建的可视化模块的行数和列数，按照顺序依次生成所需配置的所有可视化模块，如此设置，可以有效避免可视化模块在生成过程中存在混乱配置的问题。

6、在本发明实施例中，基于vue-grid-layout拖拽框架，在待配置区域添加DOM节点功能，并生成带有唯一标识信息的DOM节点。本实施例先创建DOM节点，然后再DOM节点上渲染图表，如此设置，与从数据库中获取已经渲染好的DOM节点拖拽到实体画布中，能够避免当图表含有较多元素时的卡顿现象，同时，可在DOM节点上自由调节可视化模块的位置和大小，提高可视化模块调节状态的灵活性。

7、在本发明实施例中，每个可视化模块都可配置当前DOM节点的业务类型、名称、图表类型、背景边框、背景颜色、定时更新及各种颜色配置。配置完成后根据配置数据去渲染当前DOM节点实现可视化图表功能。如此设置，能够在不改变原有布局的基础上通过上述步骤直接编辑需要更改的模块，达到灵活快速的更改，同时，当需要根据数据的重要程度改变各模块的位置时，可直接通过拖拽的方式进行位置改变，而不需要借助开发通过代码的形式进行更改，这很大程度上解决了大屏开发周期缓慢和修改复杂的问题。

8、在本发明实施例中，根据可视化模块的尺寸信息和数量信息计算出每一个可视化模块沿实体画布的第一方向移动时的第一最小基数和沿实体画布的第二方向移动时的第二最小基数。如此设置，能够实现当需要根据数据的重要程度和屏幕占比大小时，可直接通过拖拽的方式进行可视化模块的大小改变，拖拽时会监听当前模块的坐标和宽高自动计算其他临近的模块的位置，避免出现重叠覆盖的现象。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (10)

1.数据可视化方法，其特征在于，包括：

当接收到用户通过前端页面输入的编辑指令时，执行下述操作：

在所述前端页面中创建实体画布；

在所述实体画布中创建至少一个可视化模块；

计算每一个所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数；

针对每一个所述可视化模块，在所述可视化模块中创建图表；

当接收到用户发送的调节指令时，根据所述调节指令、所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节。

2.根据权利要求1所述的数据可视化方法，其特征在于，

所述根据所述调节指令、所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节，包括：

确定所述调节指令对应的目标可视化模块中的目标点在所述实体画布中的第一位置和所述调节指令中的所述目标点在所述实体画布中的第二位置；

确定所述第一最小基数和所述第二最小基数中数值最小的目标最小基数；

根据所述目标最小基数和所述第二位置对所述目标可视化模块进行调节。

3.根据权利要求2所述的数据可视化方法，其特征在于，

所述根据所述目标最小基数和所述第二位置对所述调节指令相对应的目标可视化模块进行调节，包括：

A0：以所述目标最小基数为半径和所述第二位置为圆心设置预设圆；

A1：确定所述第一位置是否位于所述预设圆的圆内，如果是，执行A4，否则，执行A2；

A2：以所述目标最小基数的整数倍作为每次移动的位移量，对所述目标可视化模块进行移动；

A3：确定移动后的所述目标点在所述实体画布中的当前位置，并将所述当前位置作为第一位置，返回A1；

A4：将所述目标可视化模块从所述第一位置移动至所述第二位置处。

4.根据权利要求1所述的数据可视化方法，其特征在于，

所述在所述实体画布中创建至少一个可视化模块，包括：

确定待配置区域在所述实体画布中的行数和列数；

根据所述行数、列数、所述实体画布的第二宽度值和第二高度值，计算每一个所述待配置区域的第三宽度值和第三高度值；

根据所述第三宽度值和所述第三高度值，确定每一个所述待配置区域在所述实体画布中的位置；

在确定出的所述位置中创建对应的所述待配置区域；

根据所述待配置区域生成对应的可视化模块。

5.根据权利要求4所述的数据可视化方法，其特征在于，

所述根据所述待配置区域生成对应的可视化模块，包括：

创建每一个所述待配置区域对应的DOM节点；

确定每一个所述待配置区域对应的模块配置信息；

将所述模块配置信息赋值给对应的所述DOM节点，将所述DOM节点对应的所述待配置区域转化为能够调节的可视化模块。

6.根据权利要求1所述的数据可视化方法，其特征在于，

在所述实体画布中创建至少一个可视化模块之后，在所述可视化模块中创建图表之前，进一步包括：

确定所述实体画布对应的时间范围和业务类型；

从至少一个数据源中获取属于所述业务类型且位于所述时间范围内的待渲染数据；

所述在所述可视化模块中创建图表，包括：

从所述待渲染数据中筛选出所述可视化模块对应的目标数据；

调用所述可视化模块根据所述目标数据创建图表。

7.根据权利要求1至6中任一所述的数据可视化方法，其特征在于，

所述计算每一个所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数，包括：

确定所述实体画布中在第一方向上的基础模块的第一数量；

确定所述实体画布中在第二方向上的基础模块的第二数量；

根据所述可视化模块在所述第一方向上的第一尺寸信息以及在所述第二方向上的第二尺寸信息；

根据所述第一尺寸信息和所述第一数量，确定所述可视化模块沿所述第一方向移动时的第一最小基数；

根据所述第二尺寸信息和所述第二数量，确定所述可视化模块沿所述第二方向移动时的第二最小基数；

和/或，

所述在所述前端页面中创建实体画布，包括：

调用window.innerWidth获取所述前端页面中的可视化区域的第一宽度值，并调用window.innerHeight获取所述可视化区域的第一高度值；

根据所述第一宽度值和所述第一高度值，在所述可视化区域中创建实体画布。

8.数据可视化装置，其特征在于，包括：接收模块、第一创建模块、第二创建模块、计算模块、第三创建模块和调节模块；

所述接收模块，用于接收用户通过前端页面输入的编辑指令；

所述第一创建模块，用于在所述前端页面中创建实体画布；

所述第二创建模块，用于在所述第一创建模块创建的所述实体画布中创建至少一个可视化模块；

所述计算模块，用于计算每一个所述第二创建模块创建的所述可视化模块沿所述实体画布的第一方向移动时的第一最小基数和沿所述实体画布的第二方向移动时的第二最小基数；

所述第三创建模块，用于针对每一个所述第二创建模块创建的所述可视化模块，在所述可视化模块中创建图表；

所述调节模块，用于当接收到用户发送的调节指令时，根据所述调节指令、所述计算模块计算的所述第一最小基数和所述第二最小基数，对所述调节指令相对应的目标可视化模块进行调节。

9.一种数据可视化装置，其特征在于，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行权利要求1至7中任一所述的方法。

10.计算机可读介质，其特征在于，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行权利要求1至7任一所述的方法。

Images