异构散列组件合并展示方法和装置、电子设备、存储介质与流程

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.组件设置单元，将所述素材库内的组件内各标识和变量设置为不同名称。
39.进一步的，所述组件处理模块包括：
40.组件模板包含图形插件、数据、样式、脚本、图片在内的内容。
41.进一步的，所述组件处理模块包括：
42.组件标识是具有唯一值的字符串，各个组件有唯一的标识，不重复，不覆盖。
43.进一步的，所述组件保存模块包括：
44.图形生成单元，用于使生成的所述图形包含数据和现实效果；
45.标识生成单元，用于以时间戳的规则生成所述模板中的组件标识。
46.进一步的，所述组件合并模块包括：
47.页面设置单元，用于基于素材库中存在各种可视化组件，创建自定义的页面；
48.组件整合单元，用于在所述自定义的页面中添加素材，整合选中的组件。
49.进一步的，所述组件合并模块包括：
50.所述自定义页面包含标题添加、描述信息。
51.一种电子设备，包括存储器和处理器，所述存储器存储计算机程序，所述处理器调用所述存储器中的所述计算机程序执行时用于实现上述任一种方法。
52.一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序在存储介质中执行时用于实现上述任一种方法。
53.在本技术实施例中，通过将各种可视化组件的相关元素作为素材保存到素材库，再创建自定义页面通过添加素材随意组合可视化组件，实现了将需要的可视化组件组合展示的技术效果，进而解决了现有技术各可视化组件比较分散的技术问题。
附图说明
54.构成本技术的一部分的附图用来提供对本技术的进一步理解，使得本技术的其它特征、目的和优点变得更明显。本技术的示意性实施例附图及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
55.图1是根据本技术实施例的异构散列组件合并展示方法的流程图；
56.图2是根据本技术实施例的素材库的示意图；
57.图3是根据本技术实施例的添加素材的示意图；
58.图4是根据本技术实施例的素材合并的示意图；
59.图5是根据本技术实施例的组件合并展示的示意图。
具体实施方式
60.为了使本技术领域的人员更好地理解本技术方案，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分的实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本技术保护的范围。
61.需要说明的是，本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
62.应当理解，在本发明的各种实施例中，各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
63.在本技术中，术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本实用新型及其实施例，并非用于限定所指示的装置、元件或组成部分必须具有特定方位，或以特定方位进行构造和操作。
64.并且，上述部分术语除了可以用于表示方位或位置关系以外，还可能用于表示其他含义，例如术语“上”在某些情况下也可能用于表示某种依附关系或连接关系。对于本领域普通技术人员而言，可以根据具体情况理解这些术语在本实用新型中的具体含义。
65.此外，术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如，可以是固定连接，可拆卸连接，或整体式构造；可以是机械连接，或电连接；可以是直接相连，或者是通过中间媒介间接相连，又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言，可以根据具体情况理解上述术语在本实用新型中的具体含义。
66.需要说明的是，在不冲突的情况下，本技术中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本技术。
67.根据本发明实施例，如图1所示，提供了一种异构散列组件合并展示方法，该方法包括如下的步骤：
68.s100、获取所有不同种类的可视化组件；
69.s200、将每个组件制作一个组件模板，处理组件内各标识和变量；
70.s300、将该组件对应的模板复制并生成选中图的图形作为素材保存；
71.s400、将该组件的脚本和数据引入作为素材添加到自定义页面。
72.在进一步的实施例中，所述获取所有不同种类的可视化组件，包括：
73.获取包括饼图、柱图、区域图和折线图在内的可视化组件，其中，各可视化组件展示的数据有各自意义。
74.在进一步的实施例中，如图2所示，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
75.s201、将该组件相关的所有元素保存到独立的素材库；
76.s202、将所述素材库内的组件内各标识和变量设置为不同名称。
77.在进一步的实施例中，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
78.组件模板包含图形插件、数据、样式、脚本、图片在内的内容。
79.在进一步的实施例中，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
80.组件标识是具有唯一值的字符串，各个组件有唯一的标识，不重复，不覆盖。
81.在进一步的实施例中，所述将该组件对应的模板复制并生成选中图的图形作为素材保存，包括：
82.所述图形包含数据和现实效果；
83.所述模板中的组件标识以时间戳的规则生成。
84.在进一步的实施例中，如图3、4、5所示，所述将该组件的脚本和数据引入作为素材添加到自定义页面，包括：
85.s401、基于素材库中存在各种可视化组件，创建自定义的页面；
86.s402、在所述自定义的页面中添加素材，整合选中的组件。
87.进一步的，所述将该组件的脚本和数据引入作为素材添加到自定义页面，包括：
88.所述自定义页面包含标题添加、描述信息。
89.还包括一个实施例，本发明提供一种异构散列组件合并展示装置，包括：
90.组件获取模块，获取所有不同种类的可视化组件；
91.组件处理模块，将每个组件制作一个组件模板，处理组件内各标识和变量；
92.组件保存模块，将该组件对应的模板复制并生成选中图的图形作为素材保存；
93.组件合并模块，将该组件的脚本和数据引入作为素材添加到自定义页面。
94.在进一步的实施例中，所述组件获取模块
95.获取包括饼图、柱图、区域图和折线图在内的可视化组件，其中，各可视化组件展示的数据有各自意义。
96.在进一步的实施例中，所述组件处理模块包括：
97.元素保存单元，用于将该组件相关的所有元素保存到独立的素材库；
98.组件设置单元，将所述素材库内的组件内各标识和变量设置为不同名称。
99.在进一步的实施例中，所述组件保存模块包括：
100.图形生成单元，用于使生成的所述图形包含数据和现实效果；
101.标识生成单元，用于以时间戳的规则生成所述模板中的组件标识。
102.在进一步的实施例中，所述组件保存模块包括：
103.组件模板包含图形插件、数据、样式、脚本、图片在内的内容。
104.在进一步的实施例中，所述组件保存模块包括：
105.组件标识是具有唯一值的字符串，各个组件有唯一的标识，不重复，不覆盖。
106.在进一步的实施例中，所述组件合并模块包括：
107.页面设置单元，用于基于素材库中存在各种可视化组件，创建自定义的页面；
108.组件整合单元，用于在所述自定义的页面中添加素材，整合选中的组件。
109.在进一步的实施例中，所述组件合并模块包括：
110.所述自定义页面包含标题添加、描述信息。
111.本发明还包括一个实施例，在网上收集整理了几十个网站，找到了十几个统一类型的素材，通过这些素材说明论点。但现在这些素材都是散落在各个地方的，找起来不方便。如果使用本方案，就在将这些素材合并成一个页面，使之成文图文并茂的一遍网文，如图1所示，提供了一种异构散列组件合并展示方法，该方法包括如下的步骤：
112.s100、获取所有不同种类的可视化组件；
113.获取整理的几十个网站的可视化组件，这些组件包括但不限于饼图、柱图、区域图和折线图，其中，每个组件都有自身含义，不能互相替代；
114.s200、将每个组件制作一个组件模板，处理组件内各标识和变量；
115.将整理的几十个网站的可视化组件制作为组件模板，设置有不同的标识和变量；
116.s300、将该组件对应的模板复制并生成选中图的图形作为素材保存；
117.将几十个网站的可视化组件对应制作的模板生成选中图的图形，以时间戳作为标识；
118.s400、将该组件的脚本和数据引入作为素材添加到自定义页面；
119.将保存的脚本和数据作为素材添加到自定义页面，生成图文并茂的网文。
120.在进一步的实施例中，所述获取所有不同种类的可视化组件，包括：
121.获取包括饼图、柱图、区域图和折线图在内的可视化组件，其中，各可视化组件展示的数据有各自意义。
122.在进一步的实施例中，如图2所示，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
123.s201、将该组件相关的所有元素保存到独立的素材库；
124.s202、将所述素材库内的组件内各标识和变量设置为不同名称。
125.在进一步的实施例中，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
126.组件模板包含图形插件、数据、样式、脚本、图片在内的内容。
127.在进一步的实施例中，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
128.组件标识是具有唯一值的字符串，各个组件有唯一的标识，不重复，不覆盖。
129.在进一步的实施例中，所述将该组件对应的模板复制并生成选中图的图形作为素材保存，包括：
130.所述图形包含数据和现实效果；
131.所述模板中的组件标识以时间戳的规则生成。
132.在进一步的实施例中，如图3、4、5所示，所述将该组件的脚本和数据引入作为素材添加到自定义页面，包括：
133.s401、基于素材库中存在各种可视化组件，创建自定义的页面；
134.s402、在所述自定义的页面中添加素材，整合选中的组件。
135.进一步的，所述将该组件的脚本和数据引入作为素材添加到自定义页面，包括：
136.所述自定义页面包含标题添加、描述信息。
137.本发明还包括一个实施例，在网上收集整理了几十个网站，找到了十几个统一类型的素材，通过这些素材说明论点。但现在这些素材都是散落在各个地方的，找起来不方便。如果使用本方案，就在将这些素材合并成一个页面，使之成文图文并茂的一遍网文，如图1所示，提供了一种异构散列组件合并展示装置，该装置包括如下的模块：
138.组件获取模块，获取所有不同种类的可视化组件；
139.获取整理的几十个网站的可视化组件，这些组件包括但不限于饼图、柱图、区域图和折线图，其中，每个组件都有自身含义，不能互相替代；
140.组件处理模块，将每个组件制作一个组件模板，处理组件内各标识和变量；
141.将整理的几十个网站的可视化组件制作为组件模板，设置有不同的标识和变量；
142.组件保存模块，将该组件对应的模板复制并生成选中图的图形作为素材保存；
143.将几十个网站的可视化组件对应制作的模板生成选中图的图形，以时间戳作为标识；
144.组件合并模块，将该组件的脚本和数据引入作为素材添加到自定义页面；
145.将保存的脚本和数据作为素材添加到自定义页面，生成图文并茂的网文。
146.在进一步的实施例中，所述组件获取模块
147.获取包括饼图、柱图、区域图和折线图在内的可视化组件，其中，各可视化组件展示的数据有各自意义。
148.在进一步的实施例中，所述组件处理模块包括：
149.元素保存单元，用于将该组件相关的所有元素保存到独立的素材库；
150.组件设置单元，将所述素材库内的组件内各标识和变量设置为不同名称。
151.在进一步的实施例中，所述组件保存模块包括：
152.图形生成单元，用于使生成的所述图形包含数据和现实效果；
153.标识生成单元，用于以时间戳的规则生成所述模板中的组件标识。
154.在进一步的实施例中，所述组件保存模块包括：
155.组件模板包含图形插件、数据、样式、脚本、图片在内的内容。
156.在进一步的实施例中，所述组件保存模块包括：
157.组件标识是具有唯一值的字符串，各个组件有唯一的标识，不重复，不覆盖。
158.在进一步的实施例中，所述组件合并模块包括：
159.页面设置单元，用于基于素材库中存在各种可视化组件，创建自定义的页面；
160.组件整合单元，用于在所述自定义的页面中添加素材，整合选中的组件。
161.在进一步的实施例中，所述组件合并模块包括：
162.所述自定义页面包含标题添加、描述信息。
163.本发明还包括一个实施例，一个网站的页面中，每个页面元素的id都是唯一的，如果出现相同id的元素会影响页面渲染显示。
164.提供一种异构散列组件合并展示方法，该方法包括：
165.s100、获取所有不同种类的可视化组件；
166.s200、将每个组件制作一个组件模板，处理组件内各标识和变量；
167.s300、将该组件对应的模板复制并生成选中图的图形作为素材保存；
168.s400、将该组件的脚本和数据引入作为素材添加到自定义页面。
169.在此实施例中，在一个页面中包含了2个图表，这2个图标是相同的模板生成的。这就会出现相同的2个id在一起显示，即出现两个id＝"citytalk_time001"。
170.其中，citytalk是指元素模板类型；time001是一个占位符。
171.在进一步的实施例中，所述获取所有不同种类的可视化组件，包括：
172.获取包括饼图、柱图、区域图和折线图在内的可视化组件，其中，各可视化组件展示的数据有各自意义。
173.在进一步的实施例中，如图2所示，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
174.s201、将该组件相关的所有元素保存到独立的素材库；
175.s202、将所述素材库内的组件内各标识和变量设置为不同名称。
176.在进一步的实施例中，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
177.组件模板包含图形插件、数据、样式、脚本、图片在内的内容。
178.在进一步的实施例中，所述将每个组件制作一个组件模板，处理组件内各标识和变量，包括：
179.组件标识是具有唯一值的字符串，各个组件有唯一的标识，不重复，不覆盖。
180.在进一步的实施例中，所述将该组件对应的模板复制并生成选中图的图形作为素材保存，包括：
181.所述图形包含数据和现实效果；
182.所述模板中的组件标识以时间戳的规则生成。
183.在使用模板生成实际代码过程中会将占位符替换成唯一的一段字符，这里采用的方案为时间戳+随机字符的形式，最终这个id会变为id＝"citytalk_1635306417448elulaqob"。
184.按照此方法，生成所有这些可能会出现冲突的地方。保证整个页面正常显示。
185.在进一步的实施例中，如图3、4、5所示，所述将该组件的脚本和数据引入作为素材添加到自定义页面，包括：
186.s401、基于素材库中存在各种可视化组件，创建自定义的页面；
187.s402、在所述自定义的页面中添加素材，整合选中的组件。
188.进一步的，所述将该组件的脚本和数据引入作为素材添加到自定义页面，包括：
189.所述自定义页面包含标题添加、描述信息。
190.还包括一个实施例，本发明提供一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序在存储介质中执行时用于实现上述的异构散列组件合并展示方法，该
方法包括：
191.s100、获取所有不同种类的可视化组件；
192.s200、将每个组件制作一个组件模板，处理组件内各标识和变量；
193.s300、将该组件对应的模板复制并生成选中图的图形作为素材保存；
194.s400、将该组件的脚本和数据引入作为素材添加到自定义页面。
195.其中，可读存储介质可以是计算机存储介质，也可以是通信介质。通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。计算机存储介质可以是通用或专用计算机能够存取的任何可用介质。例如，可读存储介质耦合至处理器，从而使处理器能够从该可读存储介质读取信息，且可向该可读存储介质写入信息。当然，可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(ppliction specific integrted circuits，sic)中。另外，该sic可以位于用户设备中。当然，处理器和可读存储介质也可以作为分立组件存在于通信设备中。可读存储介质可以是只读存储器(rom)、随机存取存储器(rm)、cd-rom、磁带、软盘和光数据存储设备等。
196.本发明还提供一种程序产品，该程序产品包括执行指令，该执行指令存储在可读存储介质中。设备的至少一个处理器可以从可读存储介质读取该执行指令，至少一个处理器执行该执行指令使得设备实施上述的各种实施方式提供的方法。
197.还包括一个实施例，本发明提供一种电子设备，包括存储器和处理器，所述存储器存储计算机程序，所述处理器调用所述存储器中的所述计算机程序执行时用于实现上述的异构散列组件合并展示方法，该方法包括：
198.s100、获取所有不同种类的可视化组件；
199.s200、将每个组件制作一个组件模板，处理组件内各标识和变量；
200.s300、将该组件对应的模板复制并生成选中图的图形作为素材保存；
201.s400、将该组件的脚本和数据引入作为素材添加到自定义页面。
202.需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
203.显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。
204.以上所述仅为本技术的优选实施例而已，并不用于限制本技术，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。