可视化大屏的生成方法、装置、设备及存储介质与流程

1.本技术涉及软件领域，尤其涉及一种可视化大屏的生成方法、装置、设备及存储介质。


背景技术：

2.随着云计算及大数据时代的到来，数据信息呈现出爆炸发展的态势，如何提取并展示海量数据中的有效信息已成为各行业的研究热点。其中，可视化是大数据生态链的最后一公里，也是用户最直接感知数据的环节，而可视化大屏作为最直观、最有效的信息传递方式，成为了一种主流的数据展示方式。
3.在可视化大屏产品中，图表是组成可视化大屏的基本单元。图表组件的数量以及灵活度会决定可视化大屏最终的呈现效果，所以图表组件经常会遇到定制化需求。
4.因此，如何灵活地满足各种定制化需求就成了亟需解决的问题。


技术实现要素：

5.基于上述技术问题，本技术提供一种可视化大屏的生成方法、装置、设备及存储介质，可以通过将图表组件插件化来将可视化大屏中的主程序和图表可以完全解耦，提高了可视化大屏生成的灵活性。
6.第一方面，本技术提供一种可视化大屏的生成方法，该方法包括：获取目标插件的插件信息；目标插件为文件服务器中的插件；文件服务器包括多个插件；多个插件中的每个插件各自对应一种图表；插件信息用于指示插件的文件地址；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表。
7.一种可能的实现方式中，获取目标插件的插件信息，包括：获取目标插件的唯一标识plugincode；基于目标插件的唯一标识和预设的插件列表，确定目标插件的插件信息；插件列表用于指示plugincode和插件信息的对应关系；插件信息包括插件主入口文件的加载地址path、插件容器名称containername、导出的模块名称exposedmodule、以及插件在代码中的组件名称ngmodulename。
8.一种可能的实现方式中，该方法应用于angular架构中；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，包括：根据预设的load函数和目标插件的插件信息，加载目标插件的组件代码；利用angular架构内置的动态组件渲染方法和目标插件的插件代码生成组件实例，渲染出目标插件对应的图表。
9.可选地，该方法应用于angular架构中；在获取目标插件的插件信息之前，该方法还包括：安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack；在webpack的配置文件中导入modulefederationplugin；设置output、optimization、plugins三种字段；其中，output字段包括publicpath字段和uniquename字段；publicpath字段被配置为auto；uniquename字段被配置为当前插件包的
名称；当前插件包包括一个或多个待注册插件；optimization字段包括runtimechunk字段；runtimechunk字段被配置为false；plugins字段包括如下字段：name字段，name字段与uniquename字段相同；library字段，library字段包括type字段和name字段，type字段被配置为var；filename字段，filename字段用于表示需要加载的入口文件的文件名；exposes字段，exposes字段用于表示导出的组件对象；shared字段，shared字段用于指示共享依赖包的配置对象。
10.可选地，在设置output、optimization、plugins三种字段之后，该方法还包括：获取待注册插件；在angular架构的应用程序目录下增加获取到的待注册插件；在exposes字段中增加获取到的待注册插件的名称和路径；将待注册插件打包为预设格式的压缩包，得到插件包。
11.可选地，在将待注册插件打包为预设格式的压缩包，得到插件包之后，该方法还包括：获取插件包中的待注册插件的唯一标识和插件信息；插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containername、导出的模块名称exposedmodule、以及待注册插件在代码中的组件名称ngmodulename；建立待注册插件的唯一标识和插件信息之间的对应关系，以完成待注册插件的注册。
12.本技术实施例提供的可视化大屏的生成方法中，电子设备可以获取目标插件的插件信息，并基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，插件的逻辑和样式都包含在单个组件中，开发方式更加灵活，目录管理更加清晰，主程序和图表库可以做到完全解耦，有效降低技术人员对产品的开发和维护成本，提高了产品交付的灵活性。
13.此外，本申中所有的图表库都可以写成插件包，并通过编译打包上传的方式进行更新，而不需要再对整个应用程序版本升级，从而减少了应用程序版本的迭代次数，可以有效提升产品的交付效率。
14.第二方面，本技术提供一种可视化大屏的生成装置，该装置包括用于之上第一方面所述的方法的各个单元。
15.第三方面，本技术提供一种计算机程序产品，当该计算程序产品在电子设备上运行时，使得电子设备执行上述第一方面所述相关方法的步骤，以实现上述第一方面所述的方法。
16.第四方面，本技术提供一种电子设备，该电子设备包括处理器和存储器；存储器中存储有处理器可执行的指令；处理器被配置为执行指令时，使得电子设备实现上述第一方面所述的方法。
17.第五方面，本技术提供一种可读存储介质，该可读存储介质包括：软件指令；当软件指令在电子设备中运行时，使得电子设备实现上述第一方面所述的方法。
18.上述第二方面至第五方面的有益效果可以参照第一方面所述，不再赘述。
附图说明
19.为了更清楚地说明本技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他
的附图。
20.图1为本技术实施例提供的可视化大屏的生成系统的架构示意图；
21.图2为本技术实施例提供的电子设备的组成示意图
22.图3为本申实施例提供的可视化大屏的生成方法的流程示意图；
23.图4为本技术实施例提供的插件渲染流程示意图；
24.图5为本技术实施例提供的可视化大屏的生成装置的组成示意图。
具体实施方式
25.以下，术语“第一”、“第二”和“第三”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”或“第三”等的特征可以明示或者隐含地包括一个或者更多个该特征。
26.随着云计算及大数据时代的到来，数据信息呈现出爆炸发展的态势，如何提取并展示海量数据中的有效信息已成为各行业的研究热点。其中，可视化是大数据生态链的最后一公里，也是用户最直接感知数据的环节，而可视化大屏作为最直观、最有效的信息传递方式，成为了一种主流的数据展示方式。
27.在可视化大屏产品中，图表是组成可视化大屏的基本单元。图表组件的数量以及灵活度会决定可视化大屏最终的呈现效果，所以图表组件经常会遇到定制化需求。而传统的可视化大屏架构中主程序和图表库是耦合在一起的，图表组件的任何修改都必须联通主程序一起打包发布，每次发布又必须经过开发、测试、运维等多道程序，这会严重消耗构建资源以及影响产品的交付周期。
28.因此，如何灵活地满足各种定制化需求就成了亟需解决的问题。
29.基于此，本技术实施例提供一种可视化大屏的生成方法、装置、设备及存储介质，可以通过将图表组件插件化来将可视化大屏中的主程序和图表可以完全解耦，提高了可视化大屏生成的灵活性。
30.以下结合附图进行介绍。
31.图1为本技术实施例提供的可视化大屏的生成系统的架构示意图。如图1所示，该系统可以包括文件服务器100、主程序模块200、以及插件包模块300。文件服务器100、主程序模块200、以及插件包模块300之间可以通过有线网络或无线网络连接。
32.文件服务器100可以是计算机或服务器等具有计算功能的电子设备。其中，服务器可以是单独的一个服务器，或者，也可以是由多个服务器构成的服务器集群。部分实施方式中，服务器集群还可以是分布式集群。可选地，服务器还可以在云平台上实现，例如，云平台可以包括私有云、公有云、混合云、社区云(community cloud)、分布式云、跨云(inter-cloud)以及多云(multi-cloud)等，或者它们的任意组合。
33.文件服务器100用于存储在主程序模块200中注册过的插件。
34.主程序模块200对应的实体装置可以参照文件服务器100所述，不再赘述。
35.主程序模块200包括插件管理模块210和大屏编辑器220。
36.插件管理模块210包括如下功能：
37.1、插件上传：上传插件包以及插件信息的新增或更新。
38.2、插件列表：用于展示插件信息以及提供大屏编辑器220的插件列表数据。
programmable read-only memory，eeprom)、cd-rom或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备等，本技术实施例对此不作限制。
55.需要说明的是，存储器20可以独立于处理器10存在，也可以和处理器10集成在一起。存储器20可以位于电子设备内，也可以位于电子设备外，本技术实施例对此不作限制。
56.通信线路30，用于在电子设备所包括的各部件之间传送信息。
57.通信接口40，用于与其他设备或其它通信网络进行通信。该其它通信网络可以为以太网，无线接入网(radio access network，ran)，无线局域网(wireless local area networks，wlan)等。通信接口40可以是模块、电路、收发器或者任何能够实现通信的装置。
58.输入输出接口50，用于实现用户和电子设备之间的人机交互。例如实现用户和电子设备之间的动作交互、文字交互或者语音交互等。
59.示例性地，输入输出接口50可以是键盘、或者鼠标等。通过键盘、或者鼠标等可以实现用户和电子设备之间的动作交互或文字交互。
60.需要说明的是，图2中示出的结构并不构成对电子设备的限定，除图2所示的部件之外，电子设备可以包括比图示更多或更少的部件，或者某些部件的组合，或者不同的部件布置。
61.下面结合附图对本技术实施例提供的可视化的大屏的生成方法进行介绍。
62.图3为本申实施例提供的可视化大屏的生成方法的流程示意图。如图3所示，该方法包括s101至s102。
63.s101、电子设备获取目标插件的插件信息。
64.其中，目标插件为文件服务器中的插件。文件服务器可以包括多个插件。该多个插件中的每个插件各自对应一种图表。插件信息用于指示插件(在文件服务器中的)文件地址。
65.例如，如上所述，电子设备可以包括输入输出接口，该输入输出接口可以包括鼠标、或者键盘等，电子设备可以通过鼠标、或者键盘等接收用户选择表插件的指令，并基于该选择执行确定目标插件。
66.一种可能的实现方式中，上述s101可以具体包括：电子设备获取目标插件的唯一标识plugincode；电子设备基于目标插件的唯一标识和预设的插件列表，确定目标插件的插件信息。
67.其中，插件列表用于指示plugincode和插件信息的对应关系。插件信息包括插件主入口文件的加载地址path、插件容器名称containername、导出的模块名称exposedmodule、以及插件在代码中的组件名称ngmodulename。
68.例如，电子设备可以将目标插件的唯一标识作为索引，遍历插件列表中的第一标识和插件信息的对应关系，确定插件列表中，目标插件的唯一标识对应的插件信息作为目标插件的插件信息。
69.示例性地，插件列表可以如下述表1所示。
70.表1
[0071][0072]
如表1所示，该表包括插件的唯一标识项、插件的主入口问价内的加载地址项、插件容器名称项、导出的模块名称项、插件在代码中的组件名称项。其中，插件的唯一标识项包括标识1、标识2、以及标识3。插件主入口文件的加载地址项包括地址1、地址2、以及地址3。插件容器名称项包括容器1、容器2、以及容器3。导出的模块名称项包括模块1、模块2、以及模块3。插件在代码中的组件名称项包括组件1、组件2、以及组件3。标识1、地址1、容器1、模块1、以及组件1之间具有对应关系；标识2、地址2、容器2、模块2、以及组件2之间具有对应关系；标识3、地址3、容器3、模块3、以及组件3之间具有对应关系。
[0073]
s102、电子设备基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表。
[0074]
一种可能的实现方式中，本技术实施例提供的可视化大屏的生成方法可以应用于angular架构中。在这种情况下，上述s102可以具体包括：电子设备根据预设的load函数和目标插件的插件信息，加载目标插件的组件代码；电子设备利用angular构架内置的动态组件渲染方法和目标插件的插件代码生成组件实例，渲染出目标插件对应的图表。
[0075]
其中，angular架构中预设的load函数和动态组件渲染方法可以参照相关技术中所述，此处不再赘述。
[0076]
示例性地，图4为本技术实施例提供的插件渲染流程示意图。如图4所示，电子设备可以利用预设的load函数，根据插件信息中的path、containername、exposedmodule、以及ngmodulename，加载到文件服务器中目标插件的组件代码文件，并返回一个promise对象，然后创建动态组件，使用angular架构中内置的动态组件渲染方法生成组件实例，渲染出目标插件对应的图表。
[0077]
一些可能的实施例中，在上述s101之前，电子设备还可以配置并获取插件包。在这种情况下，在上述s101之前，该方法还可以包括以下步骤：
[0078]
步骤1、电子设备安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack。
[0079]
步骤2、电子设备在webpack的配置文件中导入modulefederationplugin。
[0080]
步骤3、电子设备设置output、optimization、plugins三种字段。
[0081]
其中，output字段包括publicpath字段和uniquename字段；publicpath字段被配置为auto；uniquename字段被配置为当前插件包的名称；当前插件包包括一个或多个待注册插件；
[0082]
optimization字段包括runtimechunk字段；runtimechunk字段被配置为false；
[0083]
plugins字段包括如下字段：
[0084]
1)name字段，name字段与uniquename字段相同；
[0085]
2)library字段，library字段包括type字段和name字段，type字段被配置为var；
[0086]
3)filename字段，filename字段用于表示需要加载的入口文件的文件名；
[0087]
4)exposes字段，exposes字段用于表示导出的组件对象；
[0088]
5)shared字段，shared字段用于指示共享依赖包的配置对象。对于angular项目，主要设置@angular/core、@angular/common，rxjs三个包即可，如果有其它公共的依赖模块，也可以在此字段定义。
[0089]
可选地，在上述步骤3之后，电子设备还可以获取插件包，该方法还可以包括如下步骤：
[0090]
步骤1、电子设备获取待注册插件。
[0091]
例如，电子设备可以通过上述输入输出接口接收管理人员输入的待注册插件。
[0092]
步骤2、电子设备在angular架构的应用程序(app)目录下增加获取到的待注册插件。
[0093]
其中，每一个待注册插件都是一个angular组件，电子设备可以使用ng g c[name]指令快速创建一个组件，开发方式遵循angular规范。
[0094]
步骤3、电子设备在exposes字段中增加获取到的待注册插件的名称和路径。
[0095]
步骤4、电子设备将待注册插件打包为预设格式的压缩包，得到插件包。
[0096]
例如，预设格式可以是.rar格式、或者.zip格式等。本技术实施例对此不作限制。
[0097]
可选地，在获取插件包之后，电子设备还可以对插件包中的待注册插件进行注册。在这种情况下，该方法还可以包括如下步骤：
[0098]
步骤1、电子设备获取插件包中的待注册插件的唯一标识和插件信息。
[0099]
其中，插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containername、导出的模块名称exposedmodule、以及待注册插件在代码中的组件名称ngmodulename。
[0100]
步骤2、电子设备建立待注册插件的唯一标识和插件信息之间的对应关系，以完成待注册插件的注册。
[0101]
可选地，在电子设备对插件包中的待注册插件进行注册之前，还可以对主程序模块进行配置，具体步骤包括：
[0102]
步骤1、custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack。
[0103]
步骤2、在webpack的配置文件中导入modulefederationplugin。
[0104]
步骤3、设置output、optimization、plugins三种字段。
[0105]
其中，output字段包括publicpath字段和uniquename字段；publicpath字段被配置为auto；uniquename字段可以随意配置，例如可以配置为app。optimization字段包括runtimechunk字段，runtimechunk字段被配置为false。plugins字段包括shared字段，shared字段中依赖包的版本设置必须与插件包相同。
[0106]
应理解，传统的前端插件结构主要使用类似requirejs的模块加载器，通过注册信息加载对应的js模块，然后浏览器渲染出对应的插件。而本技术所提供的架构方案可以完全自由地使用angular开发，并且没有框架限制，比原生js相比，可以更方便第处理数据以
及dom变更。
[0107]
本技术实施例提供的可视化大屏的生成方法中，电子设备可以获取目标插件的插件信息，并基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，插件的逻辑和样式都包含在单个组件中，开发方式更加灵活，目录管理更加清晰，主程序和图表库可以做到完全解耦，有效降低技术人员对产品的开发和维护成本，提高了产品交付的灵活性。
[0108]
此外，本申中所有的图表库都可以写成插件包，并通过编译打包上传的方式进行更新，而不需要再对整个应用程序版本升级，从而减少了应用程序版本的迭代次数，可以有效提升产品的交付效率。
[0109]
上述主要从方法的角度对本技术实施例提供的方案进行了介绍。为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术目标应该很容易意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，本技术能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术目标可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
[0110]
在示例性的实施例中，本申实施例还提供一种可视化大屏的生成装置，图5为本技术实施例提供的可视化大屏的生成装置的组成示意图。如图5所示，该装置包括获取单元501和处理单元502。
[0111]
获取单元501，用于获取目标插件的插件信息；所述目标插件为文件服务器中的插件；所述文件服务器包括多个插件；所述多个插件中的每个插件各自对应一种图表；所述插件信息用于指示插件的文件地址。
[0112]
处理单元502，用于基于所述目标插件的插件信息所指示的所述目标插件的文件地址，从所述文件服务器中调用所述目标插件以显示所述目标插件对应的图表。
[0113]
一些可能的实施例中，获取单元501，具体用于获取目标插件的唯一标识plugincode；基于目标插件的唯一标识和预设的插件列表，确定目标插件的插件信息；插件列表用于指示plugincode和插件信息的对应关系；插件信息包括插件主入口文件的加载地址path、插件容器名称containername、导出的模块名称exposedmodule、以及插件在代码中的组件名称ngmodulename。
[0114]
另一些可能的实施例中，处理单元502，具体用于根据预设的load函数和目标插件的插件信息，加载目标插件的组件代码；利用angular架构内置的动态组件渲染方法和目标插件的插件代码生成组件实例，渲染出目标插件对应的图表。
[0115]
又一些可能的实施例中，处理单元502，还用于在获取单元获取目标插件的插件信息之前，安装custom-webpack插件，新建webpack的配置文件，并将angular.json文件中的打包配置更改为custom-webpack；在webpack的配置文件中导入modulefederationplugin；设置output、optimization、plugins三种字段；其中，output字段包括publicpath字段和uniquename字段；publicpath字段被配置为auto；uniquename字段被配置为当前插件包的名称；当前插件包包括一个或多个待注册插件；optimization字段包括runtimechunk字段；runtimechunk字段被配置为false；plugins字段包括如下字段：name字段，name字段与uniquename字段相同；library字段，library字段包括type字段和name字段，type字段被配
置为var；filename字段，filename字段用于表示需要加载的入口文件的文件名；exposes字段，exposes字段用于表示导出的组件对象；shared字段，shared字段用于指示共享依赖包的配置对象。
[0116]
又一些可能的实施例中，处理单元502，还用于在设置output、optimization、plugins三种字段之后，获取待注册插件；在angular架构的应用程序目录下增加获取到的待注册插件；在exposes字段中增加获取到的待注册插件的名称和路径；将待注册插件打包为预设格式的压缩包，得到插件包。
[0117]
又一些可能的实施例中，处理单元502，还用于在将待注册插件打包为预设格式的压缩包，得到插件包之后，获取插件包中的待注册插件的唯一标识和插件信息；插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containername、导出的模块名称exposedmodule、以及待注册插件在代码中的组件名称ngmodulename；建立待注册插件的唯一标识和插件信息之间的对应关系，以完成待注册插件的注册。
[0118]
需要说明的是，图5中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如，还可以将两个或两个以上的功能集成在一个处理单元中。本技术实施例对此不作限制。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。
[0119]
在示例性的实施例中，本技术实施例还提供了一种可读存储介质，包括：执行指令，当其在电子设备上运行时，使得电子设备执行上述实施例提供的任意一种方法。
[0120]
在示例性的实施例中，本技术实施例还提供了一种包含计算机执行指令的计算机程序产品，当其在电子设备上运行时，使得电子设备执行上述实施例提供的任意一种方法。
[0121]
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件程序实现时，可以全部或部分地以计算机程序产品的形式来实现。该计算机程序产品包括一个或多个计算机执行指令。在计算机上加载和执行计算机执行指令时，全部或部分地产生按照本技术实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机执行指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，计算机执行指令可以从一个网站站点、计算机、服务器或者数据中心通过有线(例如同轴电缆、光纤、数字用户线(digital subscriber line，dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可以用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质(例如，软盘、硬盘、磁带)，光介质(例如，dvd)、或者半导体介质(例如固态硬盘(solid state disk，ssd))等。
[0122]
尽管在此结合各实施例对本技术进行了描述，然而，在实施所要求保护的本技术过程中，本领域技术人员通过查看附图、公开内容、以及所附权利要求书，可理解并实现公开实施例的其他变化。在权利要求中，“包括”(comprising)一词不排除其他组成部分或步骤，“一”或“一个”不排除多个的情况。单个处理器或其他单元可以实现权利要求中列举的若干项功能。相互不同的从属权利要求中记载了某些措施，但这并不表示这些措施不能组合起来产生良好的效果。
[0123]
尽管结合具体特征及其实施例对本技术进行了描述，显而易见的，在不脱离本申
请的精神和范围的情况下，可对其进行各种修改和组合。相应地，本说明书和附图仅仅是所附权利要求所界定的本技术的示例性说明，且视为已覆盖本技术范围内的任意和所有修改、变化、组合或等同物。显然，本领域的技术人员可以对本技术进行各种改动和变型而不脱离本技术的精神和范围。这样，倘若本技术的这些修改和变型属于本技术权利要求及其等同技术的范围之内，则本技术也意图包含这些改动和变型在内。
[0124]
以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何在本技术揭露的技术范围内的变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应该以权利要求的保护范围为准。