图形组件显示方法、装置、存储介质及电子设备与流程

1.本技术涉及图像显示技术领域，尤其涉及一种图形组件显示方法、装置、存储介质及电子设备。


背景技术：

2.随着科技的不断发展，各领域都在时刻产生着海量的数据，为了更加有效地利用这些数据，需要对各数据进行有效地收集、整理以及分析。
3.在数据分析的过程中，通常需要先获取各数据之间的关联程度，以便于后续的数据分析、处理，例如，获取商品销量与商品浏览量之间的关联程度，为了提高数据分析的效率，当前通常将用于表征数据关联程度的图形组件展现在显示画面中，以便于用户快速、直观地获取各数据之间的关联程度，然而，当存在多个图形组件所表征的关联程度相同或相近，这些图形组件会分布在显示画面中的同一位置，出现图形组件重叠、堆积的现象，用户无法准确获取所有图形组件表征的关联程度，从而影响数据分析效率。


技术实现要素：

4.本技术提供一种图形组件显示方法、装置、存储介质及电子设备，能够缓解当前数据分析效率低的技术问题。
5.为了解决上述技术问题，本技术提供以下技术方案：
6.本技术提供一种图形组件显示方法，包括：
7.根据待显示图形组件表征的关联值，确定所述待显示图形组件对应的显示子区域；
8.根据所述待显示图形组件对应的所述显示子区域，确定所述待显示图形组件与显示区域参考组件的间隔距离；
9.基于图形组件分布模式以及所述间隔距离，确定所述待显示图形组件的位置信息；其中，不同所述待显示图形组件的位置信息不相同；
10.根据所述待显示图形组件的位置信息显示所述待显示图形组件。
11.其中，在所述根据待显示图形组件表征的关联值，确定所述待显示图形组件对应的显示子区域的步骤之前，还包括：
12.将显示区域划分为半径不相等，且以显示区域参考组件为圆心的若干个圆形；
13.将相邻所述圆形构成的圆环区域作为显示子区域；其中，各显示子区域表征对应的关联值范围。
14.其中，所述根据所述待显示图形组件对应的所述显示子区域，确定所述待显示图形组件与显示区域参考组件的间隔距离的步骤，包括：
15.当所述待显示图形组件对应的所述显示子区域所表征的关联值范围中的关联值均大于或等于预设数值，根据第一间隔距离计算公式计算所述待显示图形组件与所述显示区域参考组件的间隔距离；
16.当所述待显示图形组件对应的所述显示子区域所表征的关联值范围中的关联值均小于所述预设数值，根据第二间隔距离计算公式计算所述待显示图形组件与所述显示区域参考组件的间隔距离。
17.其中，在所述基于图形组件分布模式以及所述间隔距离，确定所述待显示图形组件的位置信息的步骤之前，还包括：
18.根据各显示子区域对应的所述待显示图形组件的数量，以及，各显示子区域对应的所述待显示图形组件与显示区域参考轴之间的距离阈值，确定对应的图形组件分布模式。
19.其中，所述基于图形组件分布模式以及所述间隔距离，确定所述待显示图形组件的位置信息的步骤，包括：
20.基于所述图形组件分布模式，确定所述待显示图形组件在第一方向的坐标信息；
21.基于所述间隔距离、所述待显示图形组件与显示区域参考轴之间的距离，确定所述待显示图形组件在第二方向的坐标信息；其中，所述第一方向垂直于所述第二方向。
22.其中，所述第一方向垂直于所述显示区域参考轴；所述待显示图形组件与显示区域参考轴之间的距离阈值包括上限距离阈值与下限距离阈值；所述第一方向包括竖直方向；所述基于所述图形组件分布模式，确定所述待显示图形组件在第一方向的坐标信息的步骤，包括：
23.将所述上限距离阈值减去所述下限距离阈值，得到距离阈值差值；
24.根据所述距离阈值差值，以及，所述显示子区域对应的所述待显示图形组件的数量，得到相邻所述待显示图形组件在所述竖直方向的距离差值；
25.根据所述距离差值，确定所述待显示图形组件与所述显示区域参考轴之间的距离；
26.根据所述待显示图形组件与所述显示区域参考轴之间的距离，确定所述待显示图形组件在所述竖直方向的坐标信息。
27.其中，所述第二方向包括水平方向；所述基于所述间隔距离与所述待显示图形组件与显示区域参考轴之间的距离，确定所述待显示图形组件在第二方向的坐标信息的步骤，包括：
28.采用预设算法对所述间隔距离与所述待显示图形组件与显示区域参考轴之间的距离进行计算，得到所述待显示图形组件在所述水平方向的坐标信息。
29.本技术实施例还提供了一种图形组件显示装置，包括：
30.显示子区域确定模块，用于根据待显示图形组件表征的关联值，确定所述待显示图形组件对应的显示子区域；
31.间隔距离确定模块，用于根据所述待显示图形组件对应的所述显示子区域，确定所述待显示图形组件与显示区域参考组件的间隔距离；
32.位置信息确定模块，用于基于图形组件分布模式以及所述间隔距离，确定所述待显示图形组件的位置信息；其中，不同所述待显示图形组件的位置信息不相同；
33.显示模块，用于根据所述待显示图形组件的位置信息显示所述待显示图形组件。
34.本技术实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行上述图形组件显示方法中的步骤。
35.本技术实施例还提供了一种电子设备，包括处理器和存储器，所述处理器与所述存储器电性连接，所述存储器用于存储指令和数据，所述处理器用于执行上述图形组件显示方法中的步骤。
36.本技术实施例提供一种图形组件显示方法、装置、存储介质及电子设备，首先根据待显示图形组件表征的关联值确定待显示图形组件对应的显示子区域，然后根据待显示图形组件对应的显示子区域确定待显示图形组件与显示区域参考组件的间隔距离，之后基于图形组件分布模式以及间隔距离确定待显示图形组件的位置信息，其中，不同待显示图形组件的位置信息不相同，最后根据待显示图形组件的位置信息显示待显示图形组件。由于各待显示图形组件的位置信息均不相同，因而各待显示图形组件分布于显示画面的不同位置，避免出现图形组件堆积、重叠的现象，用户可准确、快速地获取所有图形组件表征的关联程度，从而有效缓解当前数据分析效率低的技术问题。
附图说明
37.下面结合附图，通过对本技术的具体实施方式详细描述，将使本技术的技术方案及其它有益效果显而易见。
38.图1是本技术实施例提供的图形组件显示方法的流程示意图。
39.图2是本技术实施例提供的图形组件显示的场景示意图。
40.图3是现有技术中图形组件显示的场景示意图。
41.图4是本技术实施例提供的图形组件显示装置的结构示意图。
42.图5是本技术实施例提供的电子设备的结构示意图。
43.图6是本技术实施例提供的电子设备的另一结构示意图。
具体实施方式
44.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
45.本技术实施例提供一种图形组件显示方法、装置、存储介质及电子设备。
46.如图1所示，图1是本技术实施例提供的图形组件显示方法的流程示意图，具体流程可以如下：
47.s101.根据待显示图形组件表征的关联值，确定待显示图形组件对应的显示子区域。
48.其中，待显示图形组件包括符号、数字和/或图形组件，显示子区域为用于显示待显示图形组件的区域。可选地，为了便于区分，可将各待显示图形组件设置为互不相同，如图2所示，在本实施例中，将圆形和不同的数字的组合作为不同的待显示图形组件。
49.具体地，在实际应用过程中，为了从海量数据中提取出有效的信息，通常需要先获取众多数据与参考数据之间的关联性，再基于关联性对数据进行分析，从而得到对行业的发展具有促进作用的信息，例如，在电商行业的数据分析过程中，为了了解商品销量的影响因素，需要获取商品销量与其他数据的关联性：获取到商品销量与商品浏览量之间的关联
值(用于表征关联程度的具体数值)为0.3，而商品销量与商品收藏次数之间的关联值为0.9，由此可见，商品销量与商品浏览量之间的关联强度较小，商品销量与商品收藏次数之间的关联强度较大，因而在后续的商品推广过程中，可适当缩减用于吸引消费者浏览商品的广告设计成本，与此同时，适当采用各种推广、激励手段，以激励消费者收藏商品，从而增大商品的收藏次数，进而增大商品销量、促进电商行业发展。
50.进一步地，在上述步骤s101之前还包括：
51.将显示区域划分为半径不相等，且以显示区域参考组件为圆心的若干个圆形；
52.将相邻圆形构成的圆环区域作为显示子区域；其中，各显示子区域表征对应的关联值范围。
53.其中，在实际应用过程中，可实时根据显示屏幕的宽高比调整显示区域的尺寸，以使显示区域与显示屏幕的比例更加匹配，从而提高各图形组件的显示效果。
54.具体地，预先将显示区域细化为若干用于表征不同关联值范围的显示子区域，以使用户后续可以更加直观地查看各待显示图形组件所表征的关联值，例如，将显示区域划分为4个显示子区域，其中，第一个显示子区域的关联值范围为0.9～1，第二个显示子区域的关联值范围为0.8～0.9，第三个显示子区域的关联值范围为0.7～0.8，第四个显示子区域的关联值范围为0.6～0.7，若用户需要了解关联值位于0.7～0.8的待显示图形组件数量，只需查看第三个显示子区域并统计位于该显示子区域内的待显示图形组件数量。
55.显示区域参考组件为显示区域中起位置参考作用的图形组件，在本实施例中，如图2所示，将显示区域200划分为半径不等、以显示区域参考组件2001为圆心的第一圆形(图中显示的为第一圆形的部分圆弧2002)、第二圆形(图中显示的为第二圆形的部分圆弧2003)、第三圆形(图中显示的为第三圆形的部分圆弧2004)以及第四圆形(图中显示的为第四圆形的部分圆弧2005)，优选地，显示区域参考组件2001的形状为圆形，需要说明的是，显示区域参考组件2001的形状可以为任意形状，在此不对显示区域参考组件2001的形状作出具体限定。
56.进一步地，可根据实际应用情况设置显示区域参考组件2001的坐标以及各圆形的半径(即各圆形与显示区域参考组件2001之间的距离)。在本实施例中，将显示区域参考组件2001的坐标设置为(-1470，264)，并将第一圆形的半径设置为1740px，第二圆形的半径设置为1956px，第三圆形的半径设置为2172px，第四圆形的半径设置为2302px，且显示区域参考组件2001与第一圆形、第一圆形与第二圆形、第二圆形与第三圆形之间的距离均为216px，第三圆形与第四圆形之间的距离为130px，并将相邻圆形(第一圆形与第二圆形、第二圆形与第三圆形、第三圆形与第四圆形)构成的圆环区域、最接近显示区域参考组件2001的圆形(第一圆形)与显示区域参考组件2001之间的区域作为显示子区域。
57.另外，各显示子区域均表征了各自对应的关联值范围，为了更加直观地展示各显示子区域所对应的关联值范围，在显示区域内设置显示区域参考轴2006，该显示区域参考轴2006上设有用于标识关联值的刻度，可选地，显示区域参考轴2006上的关联值随着与显示区域参考组件2001的距离增大而减小，即关联值范围由大至小的顺序分别为第一圆形、第二圆形、第三圆形、第四圆形，且显示区域参考轴2006周围设有调节控件，用户可拖动该调节控件以调节显示区域参考轴2006所显示的刻度范围。
58.s102.根据待显示图形组件对应的显示子区域，确定待显示图形组件与显示区域
参考组件的间隔距离。
59.其中，为了保证各待显示图形组件后续的分布效果，需要先确定各待显示图形组件与显示区域参考组件之间的距离，为此，在本实施例中，根据待显示图形组件所表征的关联值，即可根据各显示子区域表征的关联值范围确定与待显示图形组件相对应的显示子区域，并根据所确定的显示子区域选择对应的计算公式以计算待显示图形组件与显示区域参考组件的间隔距离。
60.具体地，在本实施例中，将第三圆形边界线(即第三圆形的部分圆弧2004)所对应的关联值标记为end，其中，end＝0.7(第三圆形边界线与显示区域参考轴2006标识关联值为0.7的刻度对齐)，且各显示子区域所表征的关联值范围的幅度g＝(1-end)/3＝(1-0.7)/3＝0.1。
61.在一个实施方式中，当待显示图形组件对应的显示子区域所表征的关联值范围中的关联值均大于或等于预设数值，根据第一间隔距离计算公式计算待显示图形组件与显示区域参考组件的间隔距离。可选地，预设数值设置为end表征的关联值，第一间隔距离计算公式为：d1＝2172-(待显示图形组件表征的关联值-end)*(216/g)，例如，第一圆形与第二圆形构成的圆环区域表征的关联值范围为[0.8～0.9)，待显示图形组件a表征的关联值为0.82，也即待显示图形组件a对应的显示子区域为第一圆形与第二圆形构成的圆环区域，由于[0.8～0.9)内的关联值均大于0.7，故待显示图形组件a与显示区域参考组件的间隔距离为：d1(a)＝2172-(0.82-0.7)*(216/0.1)＝1910.8。
[0062]
在另一个实施方式中，当待显示图形组件对应的显示子区域所表征的关联值范围中的关联值均小于预设数值，根据第二间隔距离计算公式计算待显示图形组件与显示区域参考组件的间隔距离。可选地，预设数值设置为end表征的关联值，第二间隔距离计算公式为：d2＝(end-待显示图形组件表征的关联值)*(130/end)+2172，例如，第三圆形与第四圆形构成的圆环区域表征的关联值范围为[0.6，0.7)，待显示图形组件b表征的关联值为0.64，也即待显示图形组件b对应的显示子区域为第三圆形与第四圆形构成的圆环区域，由于[0.6，0.7)内的关联值均小于0.7，故待显示图形组件b与显示区域参考组件的间隔距离为：d2(b)＝(0.7-0.64)*(130/0.7)+2172＝2183.1。
[0063]
s103.基于图形组件分布模式以及间隔距离，确定待显示图形组件的位置信息，其中，不同待显示图形组件的位置信息不相同。
[0064]
其中，待显示图形组件的位置信息包括待显示图形组件的坐标，图形组件分布模式用于计算能将各待显示图形组件进行均匀分布的坐标。具体地，为了提高数据分析的效率，当前通常将用于表征数据关联程度的图形组件展现在显示画面中，以便于用户快速、直观地获取各数据之间的关联程度，然而，如图3所示，当存在多个图形组件所表征的关联程度相同或相近的情况，这些图形组件会分布在显示区域200中的同一位置，形成图形组件堆积组件3001，从而出现图形组件重叠、堆积的现象，用户无法准确获取所有图形组件表征的关联程度，从而影响数据分析效率。
[0065]
在本实施例中，通过将各待显示图形组件的位置信息设置为各不相同，即可有效避免上述情况的发生。
[0066]
具体地，上述步骤s103具体包括：
[0067]
基于图形组件分布模式，确定待显示图形组件在第一方向的坐标信息；
[0068]
基于间隔距离、待显示图形组件与显示区域参考轴之间的距离，确定待显示图形组件在第二方向的坐标信息；其中，第一方向垂直于第二方向。
[0069]
可选地，第一方向包括竖直方向，第二方向包括水平方向，且第一方向垂直于显示区域参考轴，在上述步骤s103之前，还包括：
[0070]
根据各显示子区域对应的待显示图形组件的数量，以及，各显示子区域对应的待显示图形组件与显示区域参考轴之间的距离阈值，确定对应的图形组件分布模式。
[0071]
在本实施例中，将各显示子区域划分为正相关区域与负相关区域，其中，正相关区域用于显示表征了与参考数据呈正相关性的数据所对应的待显示图形组件，负相关区域用于显示表征了与参考数据呈负相关性的数据所对应的待显示图形组件。
[0072]
具体地，待显示图形组件与显示区域参考轴之间的距离阈值包括上限距离阈值与下限距离阈值，优选地，下限距离阈值为30px，上限距离阈值为(显示区域的高度/2-15)px，在一个实施方式中，将上限距离阈值减去下限距离阈值，得到距离阈值差值，然后根据距离阈值差值以及显示子区域对应的待显示图形组件的数量p，得到相邻待显示图形组件在竖直方向的距离差值r。可选地，相邻待显示图形组件在竖直方向的距离差值r＝(上限距离阈值-下限距离阈值)/(p-1||1)(“p-1||1”指：当分母(即p-1的值)等于0，则将1作为分母的值)。
[0073]
在另一个实施方式中，根据上限距离阈值与下限距离阈值确定同一显示子区域的正、负相关区域内分别位于两端(即靠近显示区域参考轴的一端、靠近显示区域边界的一端)的待显示图形组件的坐标后，获取这两个待显示图形组件之间构成的圆弧，与，显示区域参考组件所形成的圆心角，并计算该圆心角的角度与剩余的待显示图形组件的数量的比值，即可获取各待显示图形组件之间在竖直方向y的距离差值r。
[0074]
可选地，可预先将每个显示子区域对应的待显示图形组件所表征的关联值按照由大至小或由小至大的顺序依次进行排序，并根据距离差值r确定待显示图形组件与显示区域参考轴之间的距离distoruler，例如，将每个显示子区域中的正、负相关区域对应的待显示图形组件所表征的关联值按照由小至大的顺序依次排序，每个显示子区域中的正、负相关区域内的第一个待显示图形组件与显示区域参考轴之间的距离distoruler1为30px，第二个待显示图形组件与显示区域参考轴之间的距离distoruler2为(30+r)px，第三个待显示图形组件与显示区域参考轴之间的距离distoruler3为(30+2r)px，第四个待显示图形组件与显示区域参考轴之间的距离distoruler4为(30+3r)px，
……
，如图2，最后根据待显示图形组件与显示区域参考轴之间的距离确定待显示图形组件在竖直方向y的坐标信息：若待显示图形组件位于正相关区域，则待显示图形组件在竖直方向y的坐标为：显示区域的高度/2-distoruler；若待显示图形组件位于负相关区域，则待显示图形组件在竖直方向y的坐标为：显示区域的高度/2+distoruler。
[0075]
例如，显示区域的高度为2160px，待显示图形组件a所表征的数据与参考数据之间呈正相关性，且待显示图形组件a与显示区域参考轴之间的距离distoruler1为30px，故待显示图形组件a在竖直方向y的坐标为：2160/2-30＝1050；待显示图形组件b所表征的数据与参考数据之间呈负相关性，且待显示图形组件b与显示区域参考轴之间的距离distoruler2为(30+2r)px，其中，r＝(1065-30)/(10-1||1)＝115，故待显示图形组件b在竖直方向y的坐标为：2160/2+(30+2*115)＝1340。
[0076]
进一步地，采用预设算法对间隔距离与待显示图形组件与显示区域参考轴之间的距离进行计算，得到待显示图形组件在水平方向x的坐标信息。在本实施例中，预设算法为：√(d2-distoruler2)-1470(即显示区域参考组件的水平方向x坐标值)，计算结果即为待显示图形组件在水平方向x的坐标。例如，待显示图形组件b与显示区域参考组件2001之间的间隔距离d为1740px，待显示图形组件b与显示区域参考轴之间的距离distoruler为30px，故待显示图形组件b在水平方向x的坐标为：√(17402-302)-1470＝270，故待显示图形组件b的坐标为(270，1340)。
[0077]
s104.根据待显示图形组件的位置信息显示待显示图形组件。
[0078]
其中，在确定各待显示图形组件的位置信息(即坐标)后，即可根据各自的位置信息将各待显示图形组件对应显示于显示区域中。
[0079]
在本实施例中，如图2所示，通过上述步骤将各待显示图形组件的坐标设置为各不相同，使得各待显示图形组件均匀、分散地分布于显示画面的不同位置，即使存在多个待显示图形组件表征的关联值相同或相近，也不会出现图形组件堆积、重叠的现象，用户可准确、快速地获取所有图形组件表征的关联程度，从而有效缓解当前数据分析效率低的技术问题。
[0080]
进一步地，如图2所示，还可在显示画面中设置数据详情组件2007，以便于用户更加清晰地读取各待显示图形组件表征的数据信息(例如，商品收藏次数)及其表征的关联值，可选地，在用户点击显示区域200内的待显示图形组件后出现对应的数据详情信息，例如，用户点击待显示图形组件2008，在待显示图形组件2008周围出现数据详情信息2009，用户可以根据实际需求有选择性地查看想要了解的数据详情，进一步提升了数据分析的效率。
[0081]
由上述可知，本技术提供的图形组件显示方法，首先根据待显示图形组件表征的关联值确定待显示图形组件对应的显示子区域，然后根据待显示图形组件对应的显示子区域确定待显示图形组件与显示区域参考组件的间隔距离，之后基于图形组件分布模式以及间隔距离确定待显示图形组件的位置信息，其中，不同待显示图形组件的位置信息不相同，最后根据待显示图形组件的位置信息显示待显示图形组件。由于各待显示图形组件的位置信息均不相同，因而各待显示图形组件分布于显示画面的不同位置，避免出现图形组件堆积、重叠的现象，用户可准确、快速地获取所有图形组件表征的关联程度，从而有效缓解当前数据分析效率低的技术问题。
[0082]
根据上述实施例所描述的方法，本实施例将从图形组件显示装置的角度进一步进行描述，该图形组件显示装置具体可以作为独立的实体来实现，也可以集成在电子设备中。
[0083]
请参阅图4，图4具体描述了本技术实施例提供的图形组件显示装置，可以实现本发明实施例所提供的任一种图形组件显示方法所能实现的有益效果，详见前面的实施例，在此不再赘述，具体地，该图形组件显示装置包括：显示子区域确定模块10、间隔距离确定模块20、位置信息确定模块30以及显示模块40，其中：
[0084]
(1)显示子区域确定模块10
[0085]
显示子区域确定模块10，用于根据待显示图形组件表征的关联值，确定待显示图形组件对应的显示子区域。
[0086]
(2)间隔距离确定模块20
[0087]
间隔距离确定模块20，用于根据待显示图形组件对应的显示子区域，确定待显示图形组件与显示区域参考组件的间隔距离。
[0088]
(3)位置信息确定模块30
[0089]
位置信息确定模块30，用于基于图形组件分布模式以及间隔距离，确定待显示图形组件的位置信息，其中，不同待显示图形组件的位置信息不相同。
[0090]
(4)显示模块40
[0091]
显示模块40，用于根据待显示图形组件的位置信息显示待显示图形组件。
[0092]
由上述可知，本技术提供的图形组件显示装置，首先通过显示子区域确定模块10根据待显示图形组件表征的关联值确定待显示图形组件对应的显示子区域，然后通过间隔距离确定模块20根据待显示图形组件对应的显示子区域确定待显示图形组件与显示区域参考组件的间隔距离，之后通过位置信息确定模块30基于图形组件分布模式以及间隔距离确定待显示图形组件的位置信息，其中，不同待显示图形组件的位置信息不相同，最后通过显示模块40根据待显示图形组件的位置信息显示待显示图形组件。由于各待显示图形组件的位置信息均不相同，因而各待显示图形组件分布于显示画面的不同位置，避免出现图形组件堆积、重叠的现象，用户可准确、快速地获取所有图形组件表征的关联程度，从而有效缓解当前数据分析效率低的技术问题。
[0093]
相应的，本发明实施例还提供一种图形组件显示系统，包括本发明实施例所提供的任一种图形组件显示装置，该图形组件显示装置可以集成在电子设备中。
[0094]
其中，首先根据待显示图形组件表征的关联值确定待显示图形组件对应的显示子区域，然后根据待显示图形组件对应的显示子区域确定待显示图形组件与显示区域参考组件的间隔距离，之后基于图形组件分布模式以及间隔距离确定待显示图形组件的位置信息，其中，不同待显示图形组件的位置信息不相同，最后根据待显示图形组件的位置信息显示待显示图形组件。
[0095]
由于该图形组件显示系统可以包括本发明实施例所提供的任一种图形组件显示装置，因此，可以实现本发明实施例所提供的任一种图形组件显示装置所能实现的有益效果，详见前面的实施例，在此不再赘述。
[0096]
另外，本技术实施例还提供一种电子设备。如图5所示，电子设备500包括处理器501、存储器502。其中，处理器501与存储器502电性连接。
[0097]
处理器501是电子设备500的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或加载存储在存储器502内的应用程序，以及调用存储在存储器502内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。
[0098]
在本实施例中，电子设备500中的处理器501会按照如下的步骤，将一个或一个以上的应用程序的进程对应的指令加载到存储器502中，并由处理器501来运行存储在存储器502中的应用程序，从而实现各种功能：
[0099]
根据待显示图形组件表征的关联值，确定待显示图形组件对应的显示子区域；
[0100]
根据待显示图形组件对应的显示子区域，确定待显示图形组件与显示区域参考组件的间隔距离；
[0101]
基于图形组件分布模式以及间隔距离，确定待显示图形组件的位置信息；其中，不同待显示图形组件的位置信息不相同；
[0102]
根据待显示图形组件的位置信息显示待显示图形组件。
[0103]
图6示出了本发明实施例提供的电子设备的具体结构框图，该电子设备可以用于实施上述实施例中提供的图形组件显示方法。
[0104]
rf电路610用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。rf电路610可包括各种现有的用于执行这些功能的电路元件，例如，天线、射频收发器、数字信号处理器、加密/解密芯片、用户身份模块(sim)卡、存储器等等。rf电路610可与各种网络如互联网、企业内部网、无线网络进行通讯或者通过无线网络与其他设备进行通讯。上述的无线网络可包括蜂窝式电话网、无线局域网或者城域网。上述的无线网络可以使用各种通信标准、协议及技术，包括但并不限于全球移动通信系统(global system for mobile communication，gsm)、增强型移动通信技术(enhanced data gsm environment，edge)，宽带码分多址技术(wideband code division multiple access，wcdma)，码分多址技术(code division access，cdma)、时分多址技术(time division multiple access，tdma)，无线保真技术(wireless fidelity，wi-fi)(如美国电气和电子工程师协会标准ieee 802.11a，ieee 802.11b，ieee802.11g和/或ieee 802.11n)、网络电话(voice over internet protocol，voip)、全球微波互联接入(worldwide interoperability for microwave access，wi-max)、其他用于邮件、即时通讯及短消息的协议，以及任何其他合适的通讯协议，甚至可包括那些当前仍未被开发出来的协议。
[0105]
存储器620可用于存储软件程序以及模块，处理器680通过运行存储在存储器620内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现存储5g能力信息的功能。存储器620可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器620可进一步包括相对于处理器680远程设置的存储器，这些远程存储器可以通过网络连接至电子设备600。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
[0106]
输入单元630可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元630可包括触敏表面631以及其他输入设备632。触敏表面631，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面631上或在触敏表面631附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面631可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器680，并能接收处理器680发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面631。除了触敏表面631，输入单元630还可以包括其他输入设备632。具体地，其他输入设备632可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
[0107]
显示单元640可用于显示由用户输入的信息或提供给用户的信息以及电子设备600的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元640可包括显示面板641，可选的，可以采用lcd(liquid crystal display，
液晶显示器)、oled(organic light-emitting diode，有机发光二极管)等形式来配置显示面板641。进一步的，触敏表面631可覆盖显示面板641，当触敏表面631检测到在其上或附近的触摸操作后，传送给处理器680以确定触摸事件的类型，随后处理器680根据触摸事件的类型在显示面板641上提供相应的视觉输出。虽然在图6中，触敏表面631与显示面板641是作为两个独立的部件来实现输入和输出功能，但是在某些实施例中，可以将触敏表面631与显示面板641集成而实现输入和输出功能。
[0108]
电子设备600还可包括至少一种传感器650，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板641的亮度，接近传感器可在电子设备600移动到耳边时，关闭显示面板641和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于电子设备600还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。
[0109]
音频电路660、扬声器661，传声器662可提供用户与电子设备600之间的音频接口。音频电路660可将接收到的音频数据转换后的电信号，传输到扬声器661，由扬声器661转换为声音信号输出；另一方面，传声器662将收集的声音信号转换为电信号，由音频电路660接收后转换为音频数据，再将音频数据输出处理器680处理后，经rf电路610以发送给比如另一终端，或者将音频数据输出至存储器620以便进一步处理。音频电路660还可能包括耳塞插孔，以提供外设耳机与电子设备600的通信。
[0110]
电子设备600通过传输模块670(例如wi-fi模块)可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图6示出了传输模块670，但是可以理解的是，其并不属于电子设备600的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。
[0111]
处理器680是电子设备600的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器620内的软件程序和/或模块，以及调用存储在存储器620内的数据，执行电子设备600的各种功能和处理数据。可选的，处理器680可包括一个或多个处理核心；在一些实施例中，处理器680可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器680中。
[0112]
电子设备600还包括给各个部件供电的电源690(比如电池)，在一些实施例中，电源可以通过电源管理系统与处理器680逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源690还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
[0113]
尽管未示出，电子设备600还可以包括摄像头(如前置摄像头、后置摄像头)、蓝牙模块等，在此不再赘述。具体在本实施例中，电子设备的显示单元是触摸屏显示器，电子设备还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行一个或者一个以上程序包含用于进行以下操作的指令：
[0114]
根据待显示图形组件表征的关联值，确定待显示图形组件对应的显示子区域；
[0115]
根据待显示图形组件对应的显示子区域，确定待显示图形组件与显示区域参考组件的间隔距离；
[0116]
基于图形组件分布模式以及间隔距离，确定待显示图形组件的位置信息；其中，不同待显示图形组件的位置信息不相同；
[0117]
根据待显示图形组件的位置信息显示待显示图形组件。
[0118]
具体实施时，以上各个模块可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个模块的具体实施可参见前面的方法实施例，在此不再赘述。
[0119]
本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。为此，本发明实施例提供一种存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本发明实施例所提供的任一种图形组件显示方法中的步骤。
[0120]
其中，该存储介质可以包括：只读存储器(rom，read only memory)、随机存取记忆体(ram，random access memory)、磁盘或光盘等。
[0121]
由于该存储介质中所存储的指令，可以执行本发明实施例所提供的任一种图形组件显示方法中的步骤，因此，可以实现本发明实施例所提供的任一种图形组件显示方法所能实现的有益效果，详见前面的实施例，在此不再赘述。
[0122]
以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
[0123]
综上，虽然本技术已以优选实施例揭露如上，但上述优选实施例并非用以限制本技术，本领域的普通技术人员，在不脱离本技术的精神和范围内，均可作各种更动与润饰，因此本技术的保护范围以权利要求界定的范围为准。