界面布局方法、装置、电子设备和计算机可读存储介质

技术领域

本申请涉及计算机技术领域，具体涉及一种界面布局方法、装置、电子设备和计算机可读存储介质。

背景技术

AntV G6是一款基于图形语法的图表可视化库，它提供了丰富的图表类型和交互功能，实现各种数据可视化应用。在现有的AntV G6数据可视化技术中，经常使用的ComboCombined复合布局支持自由配置内部元素布局以及外层元素布局，可以将可视化数据分为内部元素节点及外部元素集合，并分别配置对应的布局。但是该布局方式不够灵活，无法满足部分业务需求。

发明内容

本申请实施例公开了一种界面布局方法、装置、电子设备和计算机可读存储介质，通过对中间层元素集合进行独立布局，使得多层嵌套场景下的布局方法更加灵活。

第一方面，本申请实施例公开了一种界面布局方法，包括：

获取图表数据，所述图表数据包括多个元素集合及所述多个元素集合之间的嵌套关系；

根据所述多个元素集合之间的嵌套关系，确定所述多个元素集合中包含的一个或多个中间层元素集合；所述中间层元素集合指的是具有父元素集合及子元素集合的元素集合；第一中间层元素集合属于所述第一中间层元素集合对应的父元素集合，且所述第一中间层元素集合的子元素集合属于所述第一中间层元素集合，所述第一中间层元素集合为任一所述中间层元素集合；

根据子图布局机制，确定所述一个或多个中间层元素集合对应的第一布局模式；所述第一布局模式用于定义所述一个或多个中间层元素集合在界面中的布局。

作为一种可选的实施方式，在本申请实施例的第一方面中，所述方法还包括：

根据所述多个元素集合之间的嵌套关系，确定所述多个元素集合中的一个或多个最外层元素集合及一个或多个最内层元素节点；所述最外层元素集合指的是不具有父元素集合的元素集合；所述最内层元素节点指的是不具有子元素节点的元素节点；

根据ComboCombined布局算法，确定所述一个或多个最外层元素集合对应的第二布局模式及所述一个或多个最内层元素节点对应的第三布局模式；所述第二布局模式用于定义所述一个或多个最外层元素集合在界面中的布局；所述第三布局模式用于定义所述一个或多个最内层元素节点在界面中的布局。

作为一种可选的实施方式，在本申请实施例的第一方面中，在所述根据ComboCombined布局算法，确定所述一个或多个最外层元素集合对应的第二布局模式及所述一个或多个最内层元素节点对应的第三布局模式之后，所述方法还包括：

根据所述一个或多个中间层元素集合及对应的第一布局模式、所述一个或多个最外层元素集合及所述第二布局模式生成第一界面字符串对象；

根据所述一个或多个最内层元素节点及所述第三布局模式，生成第二界面字符串对象；

将所述第一界面字符串对象作为外层输入对象导入到渲染引擎，将所述第二界面字符串对象作为内层输入对象导入到渲染引擎中，通过所述渲染引擎根据所述外层输入对象及所述内层输入对象对界面进行渲染。

作为一种可选的实施方式，在本申请实施例的第一方面中，在所述根据所述多个元素集合之间的嵌套关系，确定所述多个元素集合中包含的一个或多个中间层元素集合之后，所述方法还包括：

根据各个所述中间层元素集合对应的属性类别，对所述一个或多个中间层元素集合进行层级划分；

所述根据子图布局机制，确定各个所述中间层元素集合对应的第一布局模式，包括：

基于子图布局机制，根据各个所述中间层元素集合对应的层级，确定各个层级中包含的一个或多个中间层元素集合对应的第一布局模式，属于同一层级的中间层元素集合对应的第一布局模式相同。

作为一种可选的实施方式，在本申请实施例的第一方面中，所述一个或多个中间层元素集合分别对应不同的界面样式；所述界面样式用于界面渲染；

或者，

属于同一层级的中间层元素集合对应的界面样式相同，属于不同层级的中间层元素集合分别对应不同的界面样式。

作为一种可选的实施方式，在本申请实施例的第一方面中，所述基于子图布局机制，根据各个所述中间层元素集合对应的层级，确定各个层级中包含的一个或多个中间层元素集合对应的第一布局模式，包括：

若第一层级中包含的一个或多个中间层元素集合具有对应的自定义的布局模式，则将所述自定义的布局模式确定为所述第一层级中包含的一个或多个中间层元素集合对应的第一布局模式；所述第一层级为所述各个层级中的任一层级；

若第二层级中包含的一个或多个中间层元素集合不具有对应的自定义的布局模式，则将最外层元素集合对应的第二布局模式，确定为所述第二层级中包含的一个或多个中间层元素集合对应的第一布局模式；所述第二层级为所述各个层级中的任一层级。

作为一种可选的实施方式，在本申请实施例的第一方面中，所述基于子图布局机制，根据各个所述中间层元素集合对应的层级，确定各个层级中包含的一个或多个中间层元素集合对应的第一布局模式，包括：

若第一层级中包含的一个或多个中间层元素集合具有对应的自定义的布局模式，则将所述自定义的布局模式确定为所述第一层级中包含的一个或多个中间层元素集合对应的第一布局模式；所述第一层级为所述各个层级中的任一层级；

若第二层级中包含的一个或多个中间层元素集合不具有对应的自定义的布局模式，则将最内层元素节点对应的第三布局模式，确定为所述第二层级中包含的一个或多个中间层元素集合对应的第一布局模式；所述第二层级为所述各个层级中的任一层级。

第二方面，本申请实施例公开了一种界面布局装置，包括：

数据获取模块，用于获取图表数据，所述图表数据包括多个元素集合及所述多个元素集合之间的嵌套关系；

中间层确定模块，用于根据所述多个元素集合之间的嵌套关系，确定所述多个元素集合中包含的一个或多个中间层元素集合；所述中间层元素集合指的是具有父元素集合及子元素集合的元素集合；第一中间层元素集合属于所述第一中间层元素集合对应的父元素集合，且所述第一中间层元素集合的子元素集合属于所述第一中间层元素集合，所述第一中间层元素集合为任一所述中间层元素集合；

布局确定模块，用于根据子图布局机制，确定所述一个或多个中间层元素集合对应的第一布局模式；所述第一布局模式用于定义所述一个或多个中间层元素集合在界面中的布局。

第三方面，本申请实施例公开了一种电子设备，包括存储器及处理器，所述存储器中存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器实现如上任一实施例所述的方法。

第四方面，本申请实施例公开了一种计算机可读存储介质，所述计算机可读存储介质存储计算机程序，所述计算机程序被处理器执行时实现如上任一实施例所述的方法。

本申请实施例公开的界面布局方法、装置、电子设备和计算机可读存储介质，获取图表数据，图表数据包括多个元素集合及多个元素集合之间的嵌套关系；根据多个元素集合之间的嵌套关系，确定多个元素集合中包含的一个或多个中间层元素集合；中间层元素集合指的是具有父元素集合及子元素集合的元素集合；根据子图布局机制，确定一个或多个中间层元素集合对应的第一布局模式；第一布局模式用于定义该一个或多个中间层元素集合在界面中的布局。在本申请实施例中，通过将图表数据中的中间层元素集合单独提取出来，并进行独立布局，使得多层嵌套场景下的各个元素集合的布局更加灵活，使得图表数据的可视化呈现出更好的布局效果，以便于更加满足业务的需求。

附图说明

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

图1为一个实施例中图表数据的示意图；

图2为一个实施例中界面布局方法的流程图；

图3为另一个实施例中界面布局方法的流程图；

图4为另一个实施例中界面布局方法的流程图；

图5为一个实施例中界面布局装置的框图；

图6为一个实施例中电子设备的结构框图。

具体实施方式

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

需要说明的是，本申请实施例及附图中的术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

可以理解，本申请所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本申请的范围的情况下，可以将第一布局模式称为第二布局模式，且类似地，可将第二布局模式称为第一布局模式。第一布局模式和第二布局模式两者都是布局模式，但其可以是相同的布局模式，也可以是不相同的布局模式。

在相关技术中，现有的AntV G6布局方法在处理复杂图形结构时存在一些局限性，针对于嵌套的图布局场景，官方给出的解决方案是使用ComboCombined布局。该布局提供了内外两个布局属性，可以分别设置内部元素布局和外层元素布局。但针对嵌套布局中的中间层，由于它同时属于内层和外层，现有布局默认中间层跟随内层布局，但在一些业务场景下，中间层作为嵌套的集合，布局方式应该遵循外层布局方式，此时该布局无法满足业务需求。

本申请实施例公开了一种界面布局方法、装置、电子设备和计算机可读存储介质，通过对中间层元素集合进行独立布局，使得多层嵌套场景下的布局方法更加灵活。

下面对本案涉及的一些名词进行介绍：

图表数据：指的是用于构建可视化图表的数据，图表数据包括多个元素集合及该多个元素集合之间的嵌套关系，每个元素集合中包含一个或多个元素节点。

元素集合：又称combo集合，每个元素集合中包含的对象可为元素集合或元素节点；每个元素集合可具有对应的属性数据，元素集合对应的属性数据可包括元素集合的集合标识属性、父标识属性、集合样式属性、自定义属性等；其中，集合标识属性作为元素集合的唯一标识，父标识属性为元素集合对应的父元素集合的集合标识，集合样式属性用于配置元素集合渲染在界面中的颜色、形状、尺寸等样式，自定义属性可根据用户业务需求自定义设置。

元素节点：指的是图表数据中的节点对象，元素节点可具有对应的属性数据，元素节点对应的属性数据可包括节点标识属性、所属的元素集合的集合标识属性、坐标属性、节点类型属性、节点样式属性、自定义属性等，其中，节点标识属性作为元素节点的唯一标识，坐标属性为元素节点在界面坐标系中的位置坐标，节点类型属性用于定义元素节点的类型，例如“circle圆形”等，节点样式属性用于配置元素节点渲染在界面中的颜色、形状、尺寸等样式，自定义属性可根据用户业务需求自定义设置。

嵌套关系：可指的是多个对象之间的包含与被包含关系。多个元素集合之间的嵌套关系可以指的是多个元素集合之间的包含与被包含关系。例如，若元素集合a包含元素集合b、元素集合c，但是元素集合b与元素集合c之间不存在包含与被包含关系，则元素集合a与元素集合b、元素集合c之间存在嵌套关系，且元素集合b、元素集合c嵌套在元素集合a内部，但元素集合b与元素集合c之间不存在嵌套关系。

父元素集合：当某个元素集合包含另一个元素集合的所有对象，则该元素集合可被认为是该另一个元素集合的父元素集合。例如，对于两个元素集合A、B，如果元素集合A中包含整个元素结合B象，则元素集合A是元素集合B的父元素集合。

父元素节点：某个元素节点所连接的上层元素节点，则可称为该元素节点的父元素节点。通常一个元素节点只对应一个父元素节点，也可能没有父元素节点，没有父元素节点的元素节点也可称为根元素节点。

子元素集合：指的是若该元素集合的所有对象都被包含在另一个元素集合中，则称该元素集合为另一个元素集合的子元素集合。例如，对于两个元素集合A、B，如果元素集合A被包含在元素集合B中，则元素集合A是元素集合B的子元素集合。父元素集合与子元素集合是相对的，即，若元素集合B是元素集合A的父元素集合，则元素集合A一定是元素集合B的子元素集合。

子元素节点：某个元素节点所连接的下层元素节点，则可称为该元素节点的子元素节点。通常一个元素节点可对应一个或多个子元素节点，也可能没有子元素节点，没有子元素节点的元素节点也可称为叶子元素节点。

在本申请实施例中，父元素集合与子元素集合的关系可通过连接线进行连接，且连接线具有起点与终点，连接线起点对象为连接线终点对象的父元素集合，连接线终点对象为连接线起点对象的子元素集合。

中间层元素集合：指的是既具有父元素集合，又具有子元素集合的元素集合。

最外层外素集合：指的是不具有父元素集合的元素集合。

最内层元素节点：指的是不具有子元素节点的元素节点。

ComboCombined布局算法：是一种复合布局算法，通过将图表数据分为内部元素及外部元素，并能够自由为内部元素和外层元素分别配置布局。内部元素布局和外层元素布局可以相同，也可以不同。

子图布局机制：指的是使用子图布局对子图数据进行布局的机制。子图布局独立于全局布局的思路，与graph不相同，子图布局是直接使用实例化布局方法的方式，在界面中灌入子图数据，通过布局将位置写到相应数据中。具体地，电子设备可使用G6.Layout.force实例化布局，通过配置G6.Layout中的layout.pipes数组，指定多个子图布局的布局类型(type)、布局参数、节点过滤函数(nodesFilter)等，完成对子图数据进行布局。

图1为一个实施例中图表数据的示意图。如图1所示，图表数据100可包含多个元素集合，例如，如图1中可包括六边形元素集合110、多个圆形元素集合120、多个矩形元素集合130及多个平行四边形元素节点140。

在本申请实施例中，可根据图表数据100中包含的多个元素集合之间的嵌套关系，确定一个或多个中间层元素集合、一个或多个最外层元素集合及一个或多个最内层元素节点。对于六边形元素集合110，没有父元素集合，所以六边形元素集合110为最外层元素集合；对于圆形元素集合120，父元素集合为六边形元素集合110及子元素集合为矩形元素集合130，所以圆形元素集合120为中间层元素集合；对于矩形元素集合130，父元素集合为圆形元素集合120，矩形元素集合130还包括子元素节点为平行四边形元素节点140，所以矩形元素集合130为中间层元素集合；对于平行四边形元素节点140，没有子元素节点，所以平行四边形元素节点140为最内层元素节点。

因此，在图1所示中，中间层元素集合包括多个圆形元素集合120及多个矩形元素集合130；最外层元素集合包括多个六边形元素集合110；最内层元素节点包括多个平行四边形元素节点140。

在本申请实施例中，可对中间层元素集合独立进行布局。在确定一个或多个中间层元素集合后，可根据子图布局机制，确定一个或多个中间层元素集合对应的第一布局模式，该第一布局模式可用于定义多个圆形元素集合120及多个矩形元素集合130在界面中的布局。

在一些实施例中，可对最外层元素集合及最内层元素节点分别进行布局，在确定一个或多个最外层元素集合及一个或多个最内层元素节点后，可根据ComboCombined布局算法，确定一个或多个最外层元素集合对应的第二布局模式及一个或多个最内层元素节点对应的第三布局模式，该第二布局模式可用于定义多个六边形元素集合110在界面中的布局，该第三布局模式可用于定义多个平行四边形元素节点140在界面中的布局。

在本申请实施例中，将中间层元素集合从图表数据中单独选择出来，并给予中间层元素集合对应的第一布局模式，使得多层嵌套场景下的各个元素集合的布局更加灵活，使得图表数据的可视化呈现出更好的布局效果，以便于更加满足业务的需求。

如图2所示，在一个实施例中，提供一种界面布局方法，可应用于电子设备，该电子设备可包括但不限于手机、智能穿戴设备、平板电脑、PC(Personal Computer，个人计算机)、计算机等。该方法可包括以下步骤：

步骤210，获取图表数据。

在电子设备需要进行可视化图表展示时，可获取图表数据。图表数据包括多个元素集合及多个元素集合之间的嵌套关系，每个元素集合中包含一个或多个元素节点。

在一些实施例中，图表数据可包括集合数据、节点数据及边数据，集合数据可包括各个元素集合对应的属性数据，例如各元素集合的集合标识属性、父标识属性等，节点数据可包括各个元素节点对应的属性数据，例如节点标识属性、所属的元素集合的集合标识属性等，边数据可包括各个元素节点之间和/或各个元素集合之间的连接关系。

作为一种具体实施方式，按照AntV G6的格式，图表数据可包括combos数组、nodes数组及edges数组。

combos数组用于存储集合数据，可用来存放各个元素集合对应的集合标识属性(如comboID)以及各个元素集合对应的父标识属性(如parentID，即父元素集合的comboID)，根据各个元素集合对应的父标识属性可以确定各个元素集合之间的嵌套关系，例如某个元素集合对应的parentID所对应的元素集合，即为该元素集合的父元素集合，父元素集合包含该元素集合。

nodes数组用于存储节点数据，可用于存储每个元素节点对应的节点标识属性，以及所属的元素集合的集合标识属性(如comboID)等，根据各个元素节点所属的元素集合的集合标识属性可确定各个元素节点所在的元素集合。

edges数组用于存储边数据，可用于存储各个元素节点或元素集合之间的连接关系，可以将各个元素节点对应的节点标识属性和/或元素集合对应的集合标识属性作为连接起点和终点，起点和终点可以是元素集合也可以是元素节点。

图表数据中的三个模块还可以拥有自定义属性，例如，combos数组中，每个元素集合还可以具备自定义的title类别属性等，title类别属性可用于表示将所有元素集合根据用户业务进行分类后得到的每个元素集合所属的类别。

步骤220，根据多个元素集合之间的嵌套关系，确定多个元素集合中包含的一个或多个中间层元素集合。

在一些实施例中，中间层元素集合指的是具有父元素集合及子元素集合的元素集合；以第一中间层元素集合为例，第一中间层元素集合可以是任一中间层元素集合，第一中间层元素集合属于(即被包含)第一中间层元素集合对应的父元素集合，且第一中间层元素集合的子元素集合属于第一中间层元素集合。

在一些实施例中，电子设备可通过检测各个元素集合对应的父标识属性(如parentID，即父元素集合的comboID)，确定各个元素集合是否具有父元素集合及子元素集合，将同时具有父元素集合及子元素集合的一个或多个元素集合确定为中间层元素集合。

步骤230，根据子图布局机制，确定一个或多个中间层元素集合对应的第一布局模式。

在一些实施例中，第一布局模式用于定义一个或多个中间层元素集合在界面中的布局。第一布局模式可包括但不限于Random Layout随机布局、gForce布局、CircularLayout环形布局、Radial Layout辐射状布局、MDS Layout高维数据降维算法布局、DagreLayout层次布局、Concentric Layout同心圆布局、Grid Layout网格布局等。一个或多个中间层元素集合对应的第一布局模式可根据用户的实际需求进行配置，一个或多个中间层元素集合可分别对应不同的第一布局模式，也可以对应相同的第一布局模式，或者可将中间层元素集合划分为多个组，一个组的中间层元素集合可对应一个第一布局模式等。

在一些实施例中，电子设备可将所有中间层元素集合、不同中间层元素集合之间的嵌套关系作为子图数据，将一个或多个中间层元素集合对应的第一布局模式作为子图布局，通过AntV G6的子图布局机制，使用子图布局对子图数据进行布局。

在一些实施例中，一个或多个中间层元素集合对应的第一布局模式可以是电子设备中存储的任一布局模式；也可以是用户自定义的布局模式；也可以是中间层元素集合中任一父元素集合或任一子元素集合对应的布局模式。

在一些实施例中，若一个或多个中间层元素集合对应的第一布局模式为用户自定义的布局模式，则用户自定义的布局模式可以是用户在电子设备出厂时，存储在电子设备中自定义的布局模式；也可以是电子设备在获取图表数据时，用户输入的自定义布局模式。

在本申请实施例中，将图表数据中的中间层元素集合从图表数据中单独选择出来，并给予中间层元素集合对应的第一布局模式，使得多层嵌套场景下的各个元素集合的布局更加灵活，使得图表数据的可视化呈现出更好的布局效果，以便于更加满足用户业务的需求。

如图3所示，在另一个实施例中，提供一种界面布局方法，可应用于上述电子设备，包括以下步骤：

步骤302，获取图表数据。

步骤304，根据多个元素集合之间的嵌套关系，确定多个元素集合中包含的一个或多个中间层元素集合。

步骤302到步骤304的描述可参照上述实施例中的步骤210到步骤220的相关描述，在此不再赘述。

步骤306，根据多个元素集合之间的嵌套关系，确定多个元素集合中的一个或多个最外层元素集合及一个或多个最内层元素节点。

其中，最外层元素集合指的是不具有父元素集合的元素集合；最内层元素节点指的是不具有子元素节点的元素节点。

在一些实施例中，电子设备可通过检测各个元素集合对应的父标识属性(如parentID，即父元素集合的comboID)和各个元素节点所属的元素集合的集合标识属性(如comboID)，确定各个元素集合是否具有父元素集合，将不具有父元素集合的元素集合作为最外层元素集合；可通过检测各个元素节点所属的元素集合的集合标识属性(如comboID)和以元素节点对应的节点标识属性作为连接起点和终点的边数据，确定各个元素节点是否具有子元素节点，将不具备子元素节点的元素节点作为最内层元素节点；对于既不具有父元素集合，也不具有子元素集合或子元素节点的元素节点，可以根据用户实际需求定义为最外层元素节点或最内层元素节点，对于最外层元素节点的处理与最外层元素集合一致。

步骤308，根据ComboCombined布局算法，确定一个或多个最外层元素集合对应的第二布局模式及一个或多个最内层元素节点对应的第三布局模式。

其中，第二布局模式用于定义一个或多个最外层元素集合在界面中的布局；第三布局模式用于定义一个或多个最内层元素节点在界面中的布局。一个或多个中间层元素集合对应的第一布局模式、一个或多个最外层元素集合对应的第二布局模式及一个或多个最内层元素节点对应的第三布局模式可以是相同的布局模式，也可以分别是不同的布局模式，可以是电子设备设置的布局模式，也可以是自定义的布局模式，在此，本申请实施例不做限定。

ComboCombined布局算法可以分别为内部元素及外部元素设置对应的内部元素布局和外层元素布局。在一些实施例中，一个或多个最内层元素节点对应的第三布局模式可以认为是ComboCombined布局算法中的内部元素布局；一个或多个最外层元素集合对应的第二布局模式与一个或多个中间层元素集合对应的第一布局模式可以认为是ComboCombined布局算法的外部元素布局。因此，本申请实施例中，虽然基于ComboCombined布局算法依旧只有内部元素布局和外层元素布局，但是实际上外层元素布局包括第一布局模式及第二布局模式的两个布局模式。

步骤310，根据子图布局机制，确定一个或多个中间层元素集合对应的第一布局模式。

步骤310的描述可参照上述实施例中的步骤230的相关描述，在此不再赘述。

步骤312，根据一个或多个中间层元素集合及对应的第一布局模式、一个或多个最外层元素集合及第二布局模式生成第一界面字符串对象。

为了能够将图表数据可视化到界面，需要将图表数据中的各个元素集合或各个元素节点及对应的布局模式转换成渲染引擎能够识别的界面字符串对象。

在一些实施例中，一个或多个中间层元素集合可分别对应不同的界面样式；界面样式用于界面渲染；一个或多个最外层元素集合与一个或多个最内层元素节点也可对应不同的界面样式，界面样式决定图表数据中的各个元素集合或各个元素节点在界面上显示的格式。界面样式可包括但不限于各个元素节点或各个元素集合的颜色、形状、或边的颜色、粗细等。电子设备可采用出厂时设置的默认界面样式，也可采用用户输入是自定义界面样式。各个中间层元素集合、各个最外层元素集合与各个最内层元素节点可根据用户的实际需求，分别对应不同的界面样式，也可对应相同的界面样式，或者部分元素集合对应相同的界面样式，本实施例不做限定。

在一些实施例中，电子设备可基于JavaScript执行环境，根据一个或多个中间层元素集合及对应的第一布局模式和一个或多个最外层元素集合对应的第二布局模式，使用innerHTML方式生成第一界面字符串对象，或者使用DOMParser接口生成第一界面字符串对象；在生成第一界面字符串对象过程中，还电子设备可使用jQuery确保第一界面字符串对象的类型为HTML(HyperText Markup Language，超文本标记语言)。第一界面字符串对象指的是能够被渲染引擎能够识别的界面字符串对象，第一界面字符串对象由各个中间层元素集合及对应的第一布局模式和各个最外层元素集合及对应的第二布局模式分别转换为对应的界面字符串对象，并拼接得到的。

步骤314，根据一个或多个最内层元素节点及第三布局模式，生成第二界面字符串对象。

步骤314生成第二界面字符串对象的方法与步骤312生成第一界面字符串对象的方法相同，在此不再赘述。

步骤316，将第一界面字符串对象作为外层输入对象导入到渲染引擎，将第二界面字符串对象作为内层输入对象导入到渲染引擎中，通过渲染引擎根据外层输入对象及内层输入对象对界面进行渲染。

渲染引擎是浏览器两大内核之一，负责对网页语法的解释(如HTML、XML(Extensible Markup Language，可扩展标记语言)等)并渲染网页(CSS(Cascading StyleSheets，层叠样式表)。渲染引擎决定了浏览器如何显示界面的内容以及界面的格式信息。

界面执行环境通常情况下由JavaScript与HTML相互作用，在使用ComboCombined布局算法进行渲染时，是将外层元素及外层元素布局对应的外层输入对象与内层元素及内层元素布局对应的内层输入对象分别导入渲染引擎中，完成对界面的渲染。

在一些实施例中，电子设备可基于ComboCombined布局算法，将第一界面字符串对象作为外层输入对象导入到渲染引擎，将第二界面字符串对象作为内层输入对象导入到渲染引擎中，通过渲染引擎根据外层输入对象及内层输入对象对界面进行渲染。

在一些实施例中，若电子设备使用DOMParser接口生成第一界面字符串对象和第二界面字符串对象，则电子设备还可使用JavaScript携带的算法对界面进行渲染。电子设备可使用JavaScript携带的parseFromString算法分别将第一界面字符串对象和第二界面字符串对象解析为对应的文档对象doc；再使用appendChild算法将第一界面字符串对象对应的文档对象和第二界面字符串对象对应的文档对象分别插入到对应的界面实例graph中，实现对界面的渲染，得到界面的渲染效果图。

在一些实施例中，电子设备可查看界面的渲染效果图，通过修改各个元素集合或各个元素节点对应的界面样式，或通过修改各个元素集合或各个元素节点对应的布局模式，对界面的渲染效果进行优化和调整，以满足用户的实际需求。

在一些实施例中，还可通过修改各个元素集合对应的集合样式属性或各个元素节点对应的节点样式属性，来修改各个元素集合或各个元素节点对应的界面样式。

另外，由于AntV G6的ComboCombined布局算法的内外层布局均仅支持同步算法，因此，电子设备在确定中间层元素集合、最外层元素集合及最内层元素节点时，需要注意避免使用异步算法，以免出现未知的错误，导致渲染失败或渲染效果不满足需求。

在本申请实施例中，通过将图表数据划分为中间层元素集合、最外层元素集合及最内层元素节点，能够有助于快速处理复杂图形结构；尤其是将中间层元素集合从图表数据中单独选择出来，并给予中间层元素集合对应的第一布局模式，使得多层嵌套场景下的各个元素集合的布局模式更加灵活，且可根据用户需求灵活的使用自定义布局模式，使得图表数据的可视化呈现出更好的布局效果，适用于不同的图形可视化场景；并解决了现有ComboCombined布局算法中，针对嵌套场景的中间层集合对应的布局模式不能自定义调整的问题，以便于更加满足用户业务的需求。

如图4所示，在另一个实施例中，提供一种界面布局方法，可应用于上述电子设备，包括以下步骤：

步骤402，获取图表数据。

步骤404，根据多个元素集合之间的嵌套关系，确定多个元素集合中包含的一个或多个中间层元素集合。

步骤402到步骤404的描述可参照上述实施例中的步骤210到步骤220的相关描述，在此不再赘述。

步骤406，根据各个中间层元素集合对应的属性类别，对一个或多个中间层元素集合进行层级划分。

在一些实施例中，各个中间层元素集合对应的属性类别可以是用户根据业务需求自定义的属性(如title类别属性等)，还可以是元素集合包含的各个元素节点包含的自定义属性等。

在一些实施例中，属于同一层级的中间层元素集合对应的界面样式相同，属于不同层级的中间层元素集合分别对应不同的界面样式。同一层级的中间层元素集合使用相同的界面样式，不同层级的中间层元素集合使用不同的界面样式，能够在界面的渲染效果图中体现中间层元素集合的层级关系，使得用户不仅能够观察到中间层元素集合，还可以掌握各个中间层元素集合的属性类别。

步骤408，基于子图布局机制，根据各个中间层元素集合对应的层级，确定各个层级中包含的一个或多个中间层元素集合对应的第一布局模式。

在一些实施例中，属于同一层级的中间层元素集合对应的第一布局模式相同；属于不同层级的中间层元素集合对应的第一布局模式可以根据用户实际需求，设置相同的布局模式或设置不同的布局模式，即第一层级的中间层元素集合对应的第一布局模式与第二层级的中间层元素集合对应的第一布局模式可以相同也可以不同，第一层级为各个层级中的任一层级，第二层级为各个层级中非第一层级的任一层级。

在一些实施例中，为了更好的满足用户业务需求，各个层级中包含的一个或多个中间层元素集合对应的第一布局模式可以全都是自定义布局模式，但各个层级不一定都具有自定义布局模式，因此，对于不具有自定义布局模式的层级，电子设备可通过确定该层级的相邻层级对应的第一布局模式，作为该层级中包含的一个或多个中间层元素集合对应的第一布局模式。

在一些具体地实施例中，若第一层级中包含的一个或多个中间层元素集合具有对应的自定义的布局模式，则将自定义的布局模式确定为第一层级中包含的一个或多个中间层元素集合对应的第一布局模式；第一层级为各个层级中的任一层级；若第二层级中包含的一个或多个中间层元素集合不具有对应的自定义的布局模式，则将最外层元素集合对应的第二布局模式，确定为第二层级中包含的一个或多个中间层元素集合对应的第一布局模式；第二层级为各个层级中的任一层级。

在一些具体地实施例中，若第一层级中包含的一个或多个中间层元素集合具有对应的自定义的布局模式，则将自定义的布局模式确定为第一层级中包含的一个或多个中间层元素集合对应的第一布局模式；第一层级为各个层级中的任一层级；若第二层级中包含的一个或多个中间层元素集合不具有对应的自定义的布局模式，则将最内层元素节点对应的第三布局模式，确定为第二层级中包含的一个或多个中间层元素集合对应的第一布局模式；第二层级为各个层级中的任一层级。

在本申请实施例中，不仅将中间层元素集合从图表数据中单独选择出来，还对中间层元素集合进行层级划分，并给予相同层级的中间层元素集合相同的第一布局模式，通过对不同层级的中间层元素集合使用不同的界面样式，能够将中间层元素集合的层级关系进行可视化，使得多层嵌套场景下的各个元素集合的布局更加灵活，使得图表数据的可视化呈现出更好的布局效果，以便于更加满足用户业务的需求。

如图5所示，在一个实施例中，提供一种界面布局装置500，可应用于上述的电子设备。该界面布局装置500，可包括获取数据模块510、确定中间层模块520及确定布局模块530。

数据获取模块510，用于获取图表数据，图表数据包括多个元素集合及多个元素集合之间的嵌套关系；

中间层确定模块520，用于根据多个元素集合之间的嵌套关系，确定多个元素集合中包含的一个或多个中间层元素集合；中间层元素集合指的是具有父元素集合及子元素集合的元素集合；第一中间层元素集合属于第一中间层元素集合对应的父元素集合，且第一中间层元素集合的子元素集合属于第一中间层元素集合，第一中间层元素集合为任一中间层元素集合；

布局确定模块530，用于根据子图布局机制，确定一个或多个中间层元素集合对应的第一布局模式；第一布局模式用于定义一个或多个中间层元素集合在界面中的布局。

在一些实施例中，一个或多个中间层元素集合分别对应不同的界面样式；界面样式用于界面渲染。

作为一种可选的实施方式，界面布局装置500还包括内外层确定模块、内外层布局模块及渲染模块。

内外层确定模块，用于根据多个元素集合之间的嵌套关系，确定多个元素集合中的一个或多个最外层元素集合及一个或多个最内层元素节点；最外层元素集合指的是不具有父元素集合的元素集合；最内层元素节点指的是不具有子元素节点的元素节点；

内外层布局模块，用于根据ComboCombined布局算法，确定一个或多个最外层元素集合对应的第二布局模式及一个或多个最内层元素节点对应的第三布局模式；第二布局模式用于定义一个或多个最外层元素集合在界面中的布局；第三布局模式用于定义一个或多个最内层元素节点在界面中的布局。

在一些实施例中，渲染模块包括对象生成单元及对象渲染单元。

对象生成单元，用于根据一个或多个中间层元素集合及对应的第一布局模式、一个或多个最外层元素集合及第二布局模式生成第一界面字符串对象；根据一个或多个最内层元素节点及第三布局模式，生成第二界面字符串对象。

对象渲染单元，用于将第一界面字符串对象作为外层输入对象导入到渲染引擎，将第二界面字符串对象作为内层输入对象导入到渲染引擎中，通过渲染引擎根据外层输入对象及内层输入对象对界面进行渲染。

作为一种可选的实施方式，界面布局装置500还包括层级划分单元。

层级划分单元，用于根据各个中间层元素集合对应的属性类别，对一个或多个中间层元素集合进行层级划分；属于同一层级的中间层元素集合对应的界面样式相同，属于不同层级的中间层元素集合分别对应不同的界面样式。

在一些实施例中，布局确定模块530还用于基于子图布局机制，根据各个中间层元素集合对应的层级，确定各个层级中包含的一个或多个中间层元素集合对应的第一布局模式，属于同一层级的中间层元素集合对应的第一布局模式相同。

在一些实施例中，布局确定模块530还用于若第一层级中包含的一个或多个中间层元素集合具有对应的自定义的布局模式，则将自定义的布局模式确定为第一层级中包含的一个或多个中间层元素集合对应的第一布局模式；第一层级为各个层级中的任一层级；若第二层级中包含的一个或多个中间层元素集合不具有对应的自定义的布局模式，则将最外层元素集合对应的第二布局模式，确定为第二层级中包含的一个或多个中间层元素集合对应的第一布局模式；第二层级为各个层级中的任一层级。

在一些实施例中，布局确定模块530还用于若第一层级中包含的一个或多个中间层元素集合具有对应的自定义的布局模式，则将自定义的布局模式确定为第一层级中包含的一个或多个中间层元素集合对应的第一布局模式；第一层级为各个层级中的任一层级；若第二层级中包含的一个或多个中间层元素集合不具有对应的自定义的布局模式，则将最内层元素节点对应的第三布局模式，确定为第二层级中包含的一个或多个中间层元素集合对应的第一布局模式；第二层级为各个层级中的任一层级。

在本申请实施例中，通过将图表数据划分为中间层元素集合、最外层元素集合及最内层元素节点，能够有助于快速处理复杂图形结构；尤其是将中间层元素集合从图表数据中单独选择出来，并给予中间层元素集合对应的第一布局模式，使得多层嵌套场景下的各个元素集合的布局更加灵活，且可根据用户需求灵活的使用自定义布局模式，使得图表数据的可视化呈现出更好的布局效果，适用于不同的图形可视化场景；并解决了现有ComboCombined布局算法中，针对嵌套场景的中层布局不能自定义调整的问题，以便于更加满足用户业务的需求。

图6为一个实施例中电子设备的结构框图。电子设备可以是手机、平板电脑、智能穿戴设备等设备。如图6所示，电子设备600可以包括一个或多个如下部件：处理器610、与处理器610耦合的存储器620，其中存储器620可存储有一个或多个计算机程序，一个或多个计算机程序可以被配置为由一个或多个处理器610执行时实现如上述各实施例中所描述的方法。

处理器610可以包括一个或者多个处理核。处理器610利用各种接口和线路连接整个电子设备600内的各个部分，通过运行或执行存储在存储器620内的指令、程序、代码集或指令集，以及调用存储在存储器620内的数据，执行电子设备600的各种功能和处理数据。可选地，处理器610可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器610可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器610中，单独通过一块通信芯片进行实现。

存储器620可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。存储器620可用于存储指令、程序、代码、代码集或指令集。存储器620可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于实现至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等。存储数据区还可以存储电子设备600在使用中所创建的数据等。

可以理解地，电子设备600可包括比上述结构框图中更多或更少的结构元件，例如，包括电源、输入按键、摄像头、扬声器、屏幕、RF(Radio Frequency，射频)电路、Wi-Fi(Wireless Fidelity，无线保真)模块、蓝牙模块、传感器等，还可在此不进行限定。

本申请实施例公开一种计算机可读存储介质，其存储计算机程序，其中，该计算机程序被处理器执行时实现如上述各实施例中描述的方法。

本申请实施例公开一种计算机程序产品，该计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，且该计算机程序可被处理器执行时实现如上述各实施例描述的方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等。

如此处所使用的对存储器、存储、数据库或其它介质的任何引用可包括非易失性和/或易失性存储器。合适的非易失性存储器可包括ROM、可编程ROM(Programmable ROM，PROM)、可擦除PROM(Erasable PROM，EPROM)、电可擦除PROM(Electrically ErasablePROM，EEPROM)或闪存。易失性存储器可包括随机存取存储器(random access memory，RAM)，它用作外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(Static RAM，SRAM)、动态RAM(Dynamic Random Access Memory，DRAM)、同步DRAM(synchronous DRAM，SDRAM)、双倍数据率SDRAM(Double Data Rate SDRAM，DDR SDRAM)、增强型SDRAM(Enhanced Synchronous DRAM，ESDRAM)、同步链路DRAM(Synchlink DRAM，SLDRAM)、存储器总线直接RAM(Rambus DRAM，RDRAM)及直接存储器总线动态RAM(DirectRambus DRAM，DRDRAM)。

应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定特征、结构或特性可以以任意适合的方式结合在一个或多个实施例中。本领域技术人员也应该知悉，说明书中所描述的实施例均属于可选实施例，所涉及的动作和模块并不一定是本申请所必须的。

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

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

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物单元，即可位于一个地方，或者也可以分布到多个网络单元上。可根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。

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

上述集成的单元若以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可获取的存储器中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或者部分，可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干请求用以使得一台计算机设备(可以为个人计算机、服务器或者网络设备等，具体可以是计算机设备中的处理器)执行本申请的各个实施例上述方法的部分或全部步骤。

以上对本申请实施例公开的一种界面布局方法、装置、电子设备和计算机可读存储介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。