CN111061473A - 用于快速构建页面的可视化组件编辑方法和装置 - Google Patents

Abstract

本申请适用于数据可视化显示技术领域，提供了用于快速构建页面的可视化组件编辑方法及装置，该方法包括：在第一区域选取至少一个可视化组件并将其拖拽至第二区域，该第一区域和第二区域为一页面构建界面中的两个操作区域；确定该第二区域中任一可视化组件为当前待编辑对象，该当前待编辑对象在该第二区域中显示为允许移动的可编辑状态。本申请实现了可视化组件的在构建页面中的快速获取和便捷的可编辑状态，从而利于快速完成能源可视化项目的构建，有效降低了能源项目可视化项目的开发成本和交付时间。

Description

用于快速构建页面的可视化组件编辑方法和装置

技术领域

本申请属于数据可视化显示技术领域，尤其涉及用于快速构建页面的可视化组件编辑方法和装置。

背景技术

能源可视化业务是一些能源行业重点发展的能源项目型服务之一，但随着业务量的上涨，过重的研发和交付成本是制约可视化业务发展的关键因素。因此，如何有效降低开发成本并快速交付是当前能源可视化研发亟待解决的问题。

申请内容

有鉴于此，本申请实施例提供了一种用于快速构建页面的可视化组件编辑方法和装置，以解决能源可视化项目开发过程中开发成本高和交付不够快速的问题。

第一方面

本申请实施例提供了一种用于快速构建页面的可视化组件编辑方法，包括：在第一区域选取至少一个可视化组件并将其拖拽至第二区域，所述第一区域和第二区域为一页面构建界面中的两个操作区域；确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态。

在一些可选的实施方案中，所述确定所述第二区域中任一可视化组件为当前待编辑对象，包括：当所述第二区域第一次获取到所述至少一个可视化组件时，则确定所述至少一个可视化组件为当前待编辑对象；或者，当选中所述第二区域中的任一可视化组件时，则确定所述选中的可视化组件为当前待编辑对象。

在一些可选的实施方案中，在所述确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态的步骤之后，还包括：获取被确定为当前待编辑对象的可视化组件的配置信息；根据所述配置信息对所述可视化组件进行渲染，并在所述第二区域中更新显示所述可视化组件的步骤。

在一些可选的实施方案中，在所述获取被确定为当前待编辑对象的可视化组件的配置信息的步骤之后，还包括：在所述页面构建界面的第三区域显示被确定为当前待编辑对象的可视化组件的配置信息，所述配置信息在所述第三区域显示为可编辑状态的步骤。

在一些可选的实施方案中，该配置信息包括：数据信息、交互信息和属性信息中的至少一种信息。

在一些可选的实施方案中，所述允许移动的可编辑状态包括显示以下至少一种可编辑状态：显示分别与所述当前待编辑对象所在可视化组件的其中两边对齐的第一延长线和第二延长线，所述第一延长线和第二延长线垂直相交；显示所述当前待编辑对象所在可视化组件上其中一参考点的坐标，所述坐标包括所述第一延长线和第二延长线交点的坐标，且所述坐标显示于所述交点附近；显示允许对所述当前待编辑对象所在可视化组件进行缩放操作的可缩放边框。

在一些可选的实施方案中，在所述确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态的步骤之后，还包括：获取所述第二区域中的至少一个可视化组件的重叠顺序；当所述至少一个可视化组件的重叠顺序发生变化时，更新显示所述第二区中所述至少一个可视化组件的重叠顺序。

在一些可选的实施方案中，在所述获取所述第二区域中的至少一个可视化组件的重叠顺序的步骤之后，还包括：根据所述重叠顺序对所述至少一个可视化组件进行排序，并在所述第一区域显示所述排序的步骤。

在一些可选的实施方案中，所述当所述至少一个可视化组件的重叠顺序发生变化时，更新显示所述第二区中所述至少一个可视化组件的重叠顺序，包括：获取第一重叠顺序预设值或第二重叠顺序预设值；将所述第一重叠顺序预设值或第二重叠顺序预设值设置为所述至少一个可视化组件的重叠顺序，并在所述第二区域更新显示所述至少一个可视化组件。

在一些可选的实施方案中，所述当所述至少一个可视化组件的重叠顺序发生变化时，更新显示所述第二区中所述至少一个可视化组件的重叠顺序，包括：获取在所述第一区域对所述至少一个可视化组件进行拖拽排列后的重叠顺序；根据所述拖拽排列后的重叠顺序在所述第二区域中更新显示所述至少一个可视化组件

第二方面

本申请实施例提供了一种用于快速构建页面的可视化组件编辑装置，包括：组件获取模块，用于在第一区域选取至少一个可视化组件并将其拖拽至第二区域，该第一区域和第二区域为一页面构建界面中的两个操作区域；组件编辑激活模块，用于确定该第二区域中任一可视化组件为当前待编辑对象，该当前待编辑对象在该第二区域中显示为允许移动的可编辑状态。

第三方面

本申请实施例提供了一种电子设备，包括存储器、处理器以及存储在该存储器中并可在该处理器上运行的计算机程序，该处理器执行该计算机程序时实现第一方面中任一项方法的步骤。

第四方面

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现第一方面中任一项方法的步骤。

本申请实施例与现有技术相比存在的有益效果是：本申请的用于快速构建页面的可视化组件编辑方法通过在第一区域选取至少一个可视化组件并将其拖拽至第二区域，该第一区域和第二区域为一页面构建界面中的两个操作区域；确定该第二区域中任一可视化组件为当前待编辑对象，该当前待编辑对象在该第二区域中显示为允许移动的可编辑状态。实现了可视化组件的在构建页面中的快速获取和便捷的可编辑状态，从而利于快速完成能源可视化项目的构建，有效降低了能源项目可视化项目的开发成本和交付时间。

附图说明

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

图1示出了可以应用本申请用于快速构建页面的可视化组件编辑方法和用于快速构建页面的可视化组件编辑装置的一些实施例的示例性开发平台。

图2示出了根据本申请提供的用于快速构建页面的可视化组件编辑方法的一实施例的实现流程图。

图3示出了图2所示实施例中步骤S202的一实施例的实现流程图。

图4示出了图2所示实施例中在步骤S202之后的一实施例的流程图。

图5示出了图4所示实施例中步骤S401的一实施例的实现流程图。

图6示出了根据本申请用于快速构建页面的可视化组件编辑方法的另一实施例的实现流程图。

图7示出了图6所示实施例中在步骤S601之后的一实施例的实现流程图。

图8示出了图6所示实施例中在步骤S602的一实施例的实现流程图。

图9A示出了图1所示开发平台的一实施例的示意图。

图9B示出了图1所示开发平台的另一实施例的示意图。

图10示出了图6所示实施例中在步骤S602的另一实施例的实现流程图。

图11示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置的一实施例的结构示意图一。

图12示出了图11所示实施例中组件编辑激活模块的一实施例的结构示意图。

图13示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置的一实施例的结构示意图二。

图14示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置的一实施例的结构示意图三。

图15示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置的一实施例的结构示意图四。

图16示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置的一实施例的结构示意图五。

图17A示出了图16所示实施例中组件重叠顺序更新模块152的一实施例的结构示意图。

图17B示出了图16所示实施例中组件重叠顺序更新模块152的另一实施例的结构示意图。

图18示出了根据本申请提供的一种电子设备的示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

为了说明本申请所述的技术方案，下面通过具体实施例来进行说明。

方法性实施例

图1示出了可以应用本申请用于快速构建页面的可视化组件编辑方法和用于快速构建页面的可视化组件编辑装置的一些实施例的示例性开发平台100。

如图1所示，该开发平台100包括一页面构建界面101，在该页面构建界面100上至少设有第一区域102、第二区域103和第三区域104。其中，该页面构建界面101可以为一个网页平台，例如，在浏览器中输入该网页平台的地址，然后进入到该网页平台或者输入账号和密码后进入到该网页平台；该第二区域103可以为一可移动的区域，例如可以对该第二区域103进行拖动、缩放大小等操作。

具体的，该第一区域102可以用于显示包含多种不同可视化组件的组件库，即在该第一区域102中显示多个预先编写好的可视化组件，可以将该可视化组件进行选中然后拖拽至第二区域103中。例如，图1所示第一区域102中的组件库可以包括可视化组件1、可视化组件2、可视化组件3等。该第一区域102可以用于显示多个项目，例如上述组件库；当然，还可以用于显示被拖拽至第二区域103中的可视化组件的图层关系。当第一区域102用于显示多个不同项目时，每个项目之间的显示可以通过设置项目图标来进行选择切换，例如，可以通过图1所示的“组件库”和“图层”项目图标来进行切换显示。

具体的，该第三区域104可以用于显示被拖拽至第二区域103中的可视化组件的配置信息，当在第二区域103选择某一可视化组件时，便可以在第三区域104中显示该可视化组件的配置信息，并允许对其进行修改；另外，在第三区域104对该配置信息修改后，该修改后的配置信息会同步至该第二区域103中对应的可视化组件中，并重新根据该修改后的配置信息进行渲染显示。

具体的，当在第二区域103上进行可视化组件设置后，可以对该第二区域103的设置内容进行保存，之后网络平台会将该第二区域103的可视化组件投影至显示屏或显示器中进行显示。通过上述网络平台可以快速的完成能源项目的开发成本和交付时间。

应当理解，上述网络平台可以实现为基于现有的网页前端开发平台的架构，再结合图1所示实施例的方案来进行个性化定制得到的开发平台。

需要理解的是，上述第一区域102、第二区域103、第三区域104在页面构建界面上用于提供编辑页面或内容显示，以及各区域之间的相对位置关系和各区域的数量仅为示例性的说明，本领域技术人员可以在上述实施例的基础上进行当然性的适应修改，但该适应修改也应当在本申请的保护范围之内。

请继续参考图2，示出了根据本申请提供的用于快速构建页面的可视化组件编辑方法的一实施例的流程图，该方法可以应用于可视化页面开发平台中，例如图1所示的能源页面的开发平台100。

如图2所示，该用于快速构建页面的可视化组件编辑方法，包括以下流程200：

S201，在第一区域选取至少一个可视化组件并将其拖拽至第二区域，该第一区域和第二区域为一页面构建界面中的两个操作区域；

S202，确定该第二区域中任一可视化组件为当前待编辑对象，该当前待编辑对象在第二区域中显示为允许移动的可编辑状态。

通过本实施例提供的方法可以在同一页面构建界面来实现可视化组件进行图形化的编辑，通过可视化组件的快速获取和丰富的可编辑状态，能够大大降低开发成本和开发时间，从而利于项目的快速交付。

在上述步骤S201中，可视化组件包括预先通过程序编写好的对数据进行图形化显示的组件对象，不同的可视化组件用于表示不同数据。例如，该可视化组件可以包括用于显示用户统计的可视化组件、用于显示行业用户的可视化组件、用于显示能源禀赋的可视化组件、用于显示能源设施的可视化组件和用于显示能源全价值链的可视化组件等。再例如，该可视化组件还可以包括用于页面排版的按钮可视化组价、地图可视化组件等辅助组件对象。应当理解，上述示例并非用于限制本申请中的可视化组件的类型，本领域技术人员完全可以根据具体需要来自定义可视化组件。

在上述步骤S201中，对可视化组件进行拖拽是指在第一区域中选中某一组件并保持选中，然后通过移动选中的位置至第二区域，即可实现该拖拽动作，该拖拽动作实现为被选中的可视化组件被克隆至第二区域中。具体的，该可视化组件由第一区域克隆至第二区域可以实现为根据该拖拽动作生成拖拽指令，根据该拖拽指令调用克隆函数来将第一区域中的可视化组件的文件克隆至第二区域所在的文件目录中，如图1所示拖拽箭头A所实现的效果。

在上述步骤S201中，在页面构建界面，第一区域在第二区域的左边，二者为两个相邻的操作区域，当然，第一区域也可以设置第二区域的周围，二者在同一页面构建界面，这样利于可视化组件的快速获取。此外，在页面构建界面中，该第一区域和第二区域也可以显示为可移动的和大小可编辑的状态。

在上述步骤S202中，当可视化组件被拖拽至第二区域后，可以对该可视化组件进行编辑，但在第二区域中存在多个可视化组件时，需要确定哪一个为当前待编辑对象。

在一些示例性实施例中，请参见图3，示出了图2所示实施例中步骤S202的一实施例的实现流程图，如图3所示，在步骤S202中，确定第二区域中任一可视化组件为当前待编辑对象，包括：

S301，当该第二区域第一次获取到至少一个可视化组件时，则确定该至少一个可视化组件为当前待编辑对象。

在本步骤S301中，在通过拖拽获取可视化组件至第二区域时，将该被拖拽的可视化组件确定为当前待编辑对象。本步骤创造性的考虑到第一次被获取至第二区域的可视化组件往往是新增的且需要进行适应性修改，为此直接将其设置为当前待编辑状态可以省却二次选中的重复操作，提高了操作效率。

或者，在步骤S202中，确定第二区域中任一可视化组件为当前待编辑对象，还可以包括：

S302，当选中该第二区域中的任一可视化组件时，则确定该选中的可视化组件为当前待编辑对象。

在本步骤S302中，当前待编辑对象为自行选中的可视化组件，使得可视化组件编辑更加快捷。

在一些示例性实施方式中，请参见图4，示出了图2所示实施例中在步骤S202之后的一实施例的流程图，如图4所示，在上述步骤S202之后，还可以包括以下步骤：

S401，获取被确定为当前待编辑对象的可视化组件的配置信息；

S402，根据该配置信息对该可视化组件进行渲染，并在该第二区域中更新显示该可视化组件。

本上述步骤S401中，该可视化组件的配置信息包括：数据信息、交互信息和属性信息中的至少一种信息。通过获取当前待编辑对象所在可视化组件的配置信息，可以对该配置信息进行设置，实现可视化组件编辑的便捷性和高效性。

例如，见图5，示出了图4所示实施例中步骤S401的一实施例的实现流程图，如图5所示，在获取被确定为当前待编辑对象的可视化组件的配置信息的步骤之后，还包括以下步骤：

S501，在页面构建界面的第三区域显示该获取被确定为当前待编辑对象的可视化组件的配置信息，该配置信息在该第三区域显示为可编辑状态。

在本步骤S501中，通过在页面构建界面中的第三区域来显示可视化组件的配置信息，并允许对齐进行修改，在第三区域显示的配置信息与第二区域中对应的可视化组件为同步传递，当对配置进行修改后，即可在第二区域中显示出根据修改后的配置信息渲染的可视化组件。

在上述步骤S402中，通过在同一页面构建界面中的第三区域来显示可视化组件的配置信息，且该配置信息允许被修改，同时还在第二区域同步显示修改配置信息后的可视化组件的效果，创造性的实现了对可视化组件编辑的简便性和快捷性。

在一些示例性实施方式中，上述步骤S202中，该允许移动的可编辑状态包括显示以下至少一种可编辑状态：

第一可编辑状态，显示分别与当前待编辑对象所在可视化组件的其中两边对齐的第一延长线和第二延长线，该第一延长线和第二延长线垂直相交。

其中，所示第一延长线和第二延长线可以为图1所示第二区域中的可视化组件1的两条对齐线L1、L2，在该第一可编辑状态下创造性的实现了不同可视化组件在纵向和横向上可进行快速对齐的效果。

第二可编辑状态，显示当前待编辑对象所在可视化组件上其中一参考点的坐标，该坐标包括上述第一延长线和第二延长线交点的坐标，且该坐标显示于该交点附近。

其中，上述坐标可以为可视化组件基于第二区域显示位置的坐标，通过该坐标可以对可视化组件进行定位设置。此外，本实施例通过将第一延长线和第二延长线的垂直交点坐标作为该坐标予以显示，创造性的实现了通过当前可视化组件在与其他可视化组件进行对齐设置时可间接确定其他可视化组件的相对位置信息，从而便于各可视化组件的精准布局。

第三可编辑状态，显示允许对当前待编辑对象所在的可视化组件进行缩放操作的可缩放边框。

其中，该第三可编辑状态允许对可视化组件进行大小缩放设置，在进行可视化组件排版时，可以直接对可视化组件进行缩放操作，使得操作更加高效。

在一些实施场景中，可以当前待编辑对象所在的可视化组件同时显示上述第一可编辑状态、第二可编辑状态及第三可编辑状态，使得可视化组件的编辑更加丰富多元化，同时也可以提高编辑的效率，从而节约开发成本和开发时间。

具体的，在一些示例性实施方式中，上述第一可编辑状态、第二可编辑状态及第三可编辑状态可以基于avue-draggable插件来实现。

在一些示例性实施方式中，请参见图6，示出了根据本申请用于快速构建页面的可视化组件编辑方法的另一实施例的实现流程图。

本实施例与图2所示实施例不同之处在于：在步骤S202之后，还可以包括以下步骤：

S601，获取第二区域中的至少一个可视化组件的重叠顺序；

S602，当该至少一个可视化组件的重叠顺序发生变化时，更新显示第二区中该至少一个可视化组件的重叠顺序。

在上述步骤S601中，可视化组件在该第二区域中的重叠顺序是指该可视化组件的一个图层位置属性值。例如，可视化组件可以视为一个三维模型，假设第二区域为由X方向和Y方向构成的二维空间，那么该重叠顺序则可以表示为该可视化组件垂直于该第二区域所在二维平面的Z方向的属性值，通过改变该重叠顺序，可以确实多个可视化组件在第二区域中的图层位置关系。

具体的，上述重叠顺序可以实现为可视化组件的CSS(英文全称：Cascading StyleSheets，中文翻译为：层叠样式表)的z-index属性。

在一些示例性实施方式中，请参见图7，示出了图6所示实施例中在步骤S601之后的一实施例的实现流程图，如图7所示，在该获取第二区域中的至少一个可视化组件的重叠顺序的步骤之后，还包括以下步骤：

S701，根据该重叠顺序对该至少一个可视化组件进行排序，并在第一区域显示该排序。

本实施例通过在第一区域中对第二区域中所有的可视化组件的重叠顺序进行排序，实现了从全局来对第二区域中所有可视化组件的图层关系进行显示和设置。例如，可以通过图1所示第一区域中的“图层”选项来切换显示该排序。

在一些示例性实施方式中，请参见图8，示出了图6所示实施例中在步骤S602的一实施例的实现流程图，如图8所示，上述步骤S602可以包括：

S801，获取第一重叠顺序预设值或第二重叠顺序预设值；

S802，将所述第一重叠顺序预设值或第二重叠顺序预设值设置为所述至少一个可视化组件的重叠顺序，并在所述第二区域更新显示所述至少一个可视化组件。

其中，上述第一重叠顺序预设值可以为可视化组件在第二区域中的最高重叠顺序，上述第二重叠顺序预设值可以为可视化组件在第二区域中的最低重叠顺序。

例如，请见图9A，示出了在图1所示开发平台100上实现图8所示实施例的示意图，如图9A所示，可以在第二区域103选中可视化组件1，然后点击鼠标右键获取该可视化组件的菜单列表105，在该菜单列表105中可以选择改变当前所选中可视化组件1的重叠顺序的选项，如“最顶图层”或“最低图层”，其中，如果选择“最顶图层”可以对应为将可视化组件1的重叠顺序设置为上述第一重叠顺序预设值，如果选择“最低图层”可以对应为将可视化组件1的重叠顺序设置为上述第二重叠顺序预设值，选择后即在第二区域103中更新显示该可视化组件1的重叠顺序。本实施例在对单个可视化组件进行重叠顺序修改时，显得非常的便利。

在一些示例性实施方式中，请参见图10，示出了图6所示实施例中在步骤S602的另一实施例的实现流程图，如图10所示，上述步骤S602可以包括：

S1011，获取在所述第一区域对所述至少一个可视化组件的重叠顺序进行拖拽排列后的排序结果；

S1012，根据所述排序结果在所述第二区域中更新显示所述至少一个可视化组件。

例如，请见图9B，示出了在图1所示开发平台100上实现图10所示实施例的示意图，如图9B所示，在第一区域中显示有对第二区域中的至少一个可视化组件的重叠顺序进行的排序，如以各可视化组件的名称作为排序的对象，在第一区域中显示的排序为：可视化组件2→可视化组件1→可视化组件3。该排序表示在第二区域中，可视化组件2的重叠顺序最大，可视化组件3的重叠顺序最小，可视化组件1的重叠顺序位于可视化组件2和可视化组件3的重叠顺序之间。如果要对第二区域中的可视化组件进行重新调整，则可以之间在该第一区域中对该排序进行重新的拖拽排列，以得到新的排序结构，然后将该进行拖拽排列后的排序结果传递给第二区域进行更新显示。本实施例在对第二区域中所有的可视化组件进行重叠顺序修改时，显得非常的便利。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

装置性实施例

基于与方法性实施例中各实施方式相同的申请构思，本实施例还提供了一种用于快速构建页面的可视化组件编辑装置110，该可视化组件编辑装置100可以应用至智能设备中。

请参见图11，示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置110的一实施例的结构示意图一，如图所示，可视化组件编辑装置110包括组件获取模块111和组件编辑激活模块112：组件获取模块111用于在第一区域选取至少一个可视化组件并将其拖拽至第二区域，所述第一区域和第二区域为一页面构建界面中的两个操作区域；组件编辑激活模块112用于确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态。

请参见图12，示出了图11所示实施例中组件编辑激活模块112的一实施例的结构示意图，如图所示，组件编辑激活模块112包括第一待编辑组件确定单元121和第二待编辑组件确定单元122中的至少一个，第一待编辑组件确定单元121用于当所述第二区域第一次获取到所述至少一个可视化组件时，则确定所述至少一个可视化组件为当前待编辑对象；第二待编辑组件确定单元122用于当选中所述第二区域中的任一可视化组件时，则确定所述选中的可视化组件为当前待编辑对象。

请参见图13，示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置110的一实施例的结构示意图二，如图所示，

可视化组件编辑装置110还包括配置信息获取模块131和组件同步预览模块132，配置信息获取模块131用于获取被确定为当前待编辑对象的可视化组件的配置信息；组件同步预览模块132用于根据所述配置信息对所述可视化组件进行渲染，并在所述第二区域中更新显示所述可视化组件。

请参见图14，示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置110的一实施例的结构示意图三，如图所示，所述可视化组件编辑装置110还包括配置信息编辑模块141，用于在所述页面构建界面的第三区域显示所述获取被确定为当前待编辑对象的可视化组件的配置信息，所述配置信息在所述第三区域显示为可编辑状态。

其中，所述配置信息包括：数据信息、交互信息和属性信息中的至少一种信息。

请参见图15，示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置110的一实施例的结构示意图四，如图所示，所述可视化组件编辑装置110还包括重叠顺序获取模块151和组件重叠顺序更新模块152，重叠顺序获取模块151用于获取所述第二区域中的至少一个可视化组件的重叠顺序；组件重叠顺序更新模块152用于当所述至少一个可视化组件的重叠顺序发生变化时，更新显示所述第二区中所述至少一个可视化组件的重叠顺序。

请参见图16，示出了根据本申请提供的用于快速构建页面的可视化组件编辑装置110的一实施例的结构示意图五，如图所示，所述可视化组件编辑装置110还包括组件重叠顺序显示模块161，用于根据所述重叠顺序对所述至少一个可视化组件进行排序，并在所述第一区域显示所述排序。

请参见图17A，示出了图16所示实施例中组件重叠顺序更新模块152的一实施例的结构示意图，如图所示，所述组件重叠顺序更新模块152包括：重叠顺序预设值获取单元171，用于获取第一重叠顺序预设值或第二重叠顺序预设值；第一重叠顺序设置单元172，用于将所述第一重叠顺序预设值或第二重叠顺序预设值设置为所述至少一个可视化组件的重叠顺序，并在所述第二区域更新显示所述至少一个可视化组件。

请参见图17B，示出了图16所示实施例中组件重叠顺序更新模块152的另一实施例的结构示意图，如图所示，所述组件重叠顺序更新模块152包括：重叠顺序排序获取单元173，用于获取在所述第一区域对所述至少一个可视化组件的重叠顺序进行拖拽排列后的排序结果；第二重叠顺序设置单元174，用于根据所述排序结果在所述第二区域中更新显示所述至少一个可视化组件。

应用性实施例

请参见图18，示出了根据本申请提供的一种电子设备的示意图，如图18所示，该电子设备180包括：处理器181、存储器182以及存储在所述存储器182中并可在所述处理器181上运行的计算机程序183。所述处理器181执行所述计算机程序183时实现上述各个方法性实施例中的步骤，例如图2所示的步骤201至202。或者，所述处理器181执行所述计算机程序183时实现上述各装置性实施例中各模块/单元的功能，例如图11所示模块111至112的功能。

示例性的，所述计算机程序183可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器182中，并由所述处理器181执行，以完成本申请。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序183在电子设备180中的执行过程。例如，所述计算机程序183可以被分割成图16所示实施例中的各种模块。

所述电子设备180可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。该电子设备可包括，但不仅限于，处理器181、存储器182。本领域技术人员可以理解，图18仅仅是电子设备180的示例，并不构成对电子设备180的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器181可以是中央处理单元(Central Processing Unit，CPU)，还可以是其它通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器182可以是电子设备180的内部存储单元，例如电子设备180的硬盘或内存。所述存储器182也可以是电子设备180的外部存储设备，例如电子设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器182还可以既包括电子设备180的内部存储单元也包括外部存储设备。所述存储器182用于存储所述计算机程序以及电子设备所需的其它程序和数据。所述存储器182还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法性实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (11)

1.一种用于快速构建页面的可视化组件编辑方法，其特征在于，包括：

在第一区域选取至少一个可视化组件并将其拖拽至第二区域，所述第一区域和第二区域为一页面构建界面中的两个操作区域；

确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态。

2.根据权利要求1所述的用于快速构建页面的可视化组件编辑方法，其特征在于，所述确定所述第二区域中任一可视化组件为当前待编辑对象，包括：

当所述第二区域第一次获取到所述至少一个可视化组件时，则确定所述至少一个可视化组件为当前待编辑对象；

或者，当选中所述第二区域中的任一可视化组件时，则确定所述选中的可视化组件为当前待编辑对象。

3.根据权利要求1所述的用于快速构建页面的可视化组件编辑方法，其特征在于，在所述确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态的步骤之后，还包括：

获取被确定为当前待编辑对象的可视化组件的配置信息；

根据所述配置信息对所述可视化组件进行渲染，并在所述第二区域中更新显示所述可视化组件的步骤。

4.根据权利要求3所述的用于快速构建页面的可视化组件编辑方法，其特征在于，在所述获取被确定为当前待编辑对象的可视化组件的配置信息的步骤之后，还包括：在所述页面构建界面的第三区域显示被确定为当前待编辑对象的可视化组件的配置信息，所述配置信息在所述第三区域显示为可编辑状态的步骤。

5.根据权利要求3或4所述的用于快速构建页面的可视化组件编辑方法，其特征在于，所述配置信息包括：数据信息、交互信息和属性信息中的至少一种信息。

6.根据权利要求1所述的用于快速构建页面的可视化组件编辑方法，其特征在于，所述允许移动的可编辑状态包括显示以下至少一种可编辑状态：

显示分别与所述当前待编辑对象所在可视化组件的其中两边对齐的第一延长线和第二延长线，所述第一延长线和第二延长线垂直相交；

显示所述当前待编辑对象所在可视化组件上其中一参考点的坐标，所述坐标包括所述第一延长线和第二延长线交点的坐标，且所述坐标显示于所述交点附近；

显示允许对所述当前待编辑对象所在可视化组件进行缩放操作的可缩放边框。

7.根据权利要求1所述的用于快速构建页面的可视化组件编辑方法，其特征在于，在所述确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态的步骤之后，还包括：

获取所述第二区域中的至少一个可视化组件的重叠顺序；

当所述至少一个可视化组件的重叠顺序发生变化时，更新显示所述第二区中所述至少一个可视化组件的重叠顺序。

8.根据权利要求7所述的用于快速构建页面的可视化组件编辑方法，其特征在于，在所述获取所述第二区域中的至少一个可视化组件的重叠顺序的步骤之后，还包括：根据所述重叠顺序对所述至少一个可视化组件进行排序，并在所述第一区域显示所述排序的步骤。

9.根据权利要求7所述的用于快速构建页面的可视化组件编辑方法，其特征在于，所述当所述至少一个可视化组件的重叠顺序发生变化时，更新显示所述第二区中所述至少一个可视化组件的重叠顺序，包括：

获取第一重叠顺序预设值或第二重叠顺序预设值；

将所述第一重叠顺序预设值或第二重叠顺序预设值设置为所述至少一个可视化组件的重叠顺序，并在所述第二区域更新显示所述至少一个可视化组件。

10.根据权利要求8所述的用于快速构建页面的可视化组件编辑方法，其特征在于，所述当所述至少一个可视化组件的重叠顺序发生变化时，更新显示所述第二区中所述至少一个可视化组件的重叠顺序，包括：

获取在所述第一区域对所述至少一个可视化组件的重叠顺序进行拖拽排列后的排序结果；

根据所述排序结果在所述第二区域中更新显示所述至少一个可视化组件。

11.一种用于快速构建页面的可视化组件编辑装置，其特征在于，包括：

组件获取模块，用于在第一区域选取至少一个可视化组件并将其拖拽至第二区域，所述第一区域和第二区域为一页面构建界面中的两个操作区域；

组件编辑激活模块，用于确定所述第二区域中任一可视化组件为当前待编辑对象，所述当前待编辑对象在所述第二区域中显示为允许移动的可编辑状态。

Images