可视化大屏的生成方法、装置、设备及存储介质制造方法及图纸

本申请提供一种可视化大屏的生成方法、装置、设备及存储介质，涉及软件领域，该方法包括：获取目标插件的插件信息；目标插件为文件服务器中的插件；文件服务器包括多个插件；多个插件中的每个插件各自对应一种图表；插件信息用于指示插件的文件地址；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表。该方法适用于可视化大屏的生成过程中，用于提高交付产品的灵活性。于提高交付产品的灵活性。于提高交付产品的灵活性。

【技术实现步骤摘要】
可视化大屏的生成方法、装置、设备及存储介质


[0001]本申请涉及软件领域，尤其涉及一种可视化大屏的生成方法、装置、设备及存储介质。

技术介绍

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

技术实现思路

[0005]基于上述技术问题，本申请提供一种可视化大屏的生成方法、装置、设备及存储介质，可以通过将图表组件插件化来将可视化大屏中的主程序和图表可以完全解耦，提高了可视化大屏生成的灵活性。
[0006]第一方面，本申请提供一种可视化大屏的生成方法，该方法包括：获取目标插件的插件信息；目标插件为文件服务器中的插件；文件服务器包括多个插件；多个插件中的每个插件各自对应一种图表；插件信息用于指示插件的文件地址；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表。
[0007]一种可能的实现方式中，获取目标插件的插件信息，包括：获取目标插件的唯一标识pluginCode；基于目标插件的唯一标识和预设的插件列表，确定目标插件的插件信息；插件列表用于指示pluginCode和插件信息的对应关系；插件信息包括插件主入口文件的加载地址path、插件容器名称containerName、导出的模块名称exposedModule、以及插件在代码中的组件名称ngModuleName。
[0008]一种可能的实现方式中，该方法应用于Angular架构中；基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，包括：根据预设的load函数和目标插件的插件信息，加载目标插件的组件代码；利用Angular架构内置的动态组件渲染方法和目标插件的插件代码生成组件实例，渲染出目标插件对应的图表。
[0009]可选地，该方法应用于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字段用于指示共享依赖包的配置对象。
[0010]可选地，在设置output、optimization、plugins三种字段之后，该方法还包括：获取待注册插件；在Angular架构的应用程序目录下增加获取到的待注册插件；在exposes字段中增加获取到的待注册插件的名称和路径；将待注册插件打包为预设格式的压缩包，得到插件包。
[0011]可选地，在将待注册插件打包为预设格式的压缩包，得到插件包之后，该方法还包括：获取插件包中的待注册插件的唯一标识和插件信息；插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containerName、导出的模块名称exposedModule、以及待注册插件在代码中的组件名称ngModuleName；建立待注册插件的唯一标识和插件信息之间的对应关系，以完成待注册插件的注册。
[0012]本申请实施例提供的可视化大屏的生成方法中，电子设备可以获取目标插件的插件信息，并基于目标插件的插件信息所指示的目标插件的文件地址，从文件服务器中调用目标插件以显示目标插件对应的图表，插件的逻辑和样式都包含在单个组件中，开发方式更加灵活，目录管理更加清晰，主程序和图表库可以做到完全解耦，有效降低技术人员对产品的开发和维护成本，提高了产品交付的灵活性。
[0013]此外，本申中所有的图表库都可以写成插件包，并通过编译打包上传的方式进行更新，而不需要再对整个应用程序版本升级，从而减少了应用程序版本的迭代次数，可以有效提升产品的交付效率。
[0014]第二方面，本申请提供一种可视化大屏的生成装置，该装置包括用于之上第一方面所述的方法的各个单元。
[0015]第三方面，本申请提供一种计算机程序产品，当该计算程序产品在电子设备上运行时，使得电子设备执行上述第一方面所述相关方法的步骤，以实现上述第一方面所述的方法。
[0016]第四方面，本申请提供一种电子设备，该电子设备包括处理器和存储器；存储器中存储有处理器可执行的指令；处理器被配置为执行指令时，使得电子设备实现上述第一方面所述的方法。
[0017]第五方面，本申请提供一种可读存储介质，该可读存储介质包括：软件指令；当软件指令在电子设备中运行时，使得电子设备实现上述第一方面所述的方法。
[0018]上述第二方面至第五方面的有益效果可以参照第一方面所述，不再赘述。
附图说明
[0019]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他
的附图。
[0020]图1为本申请实施例提供的可视化大屏的生成系统的架构示意图；
[0021]图2为本申请实施例提供的电子设备的组成示意图
[0022]图3为本申实施例提供的可视化大屏的生成方法的流程示意图；
[0023]图4为本申请实施例提供的插件渲染流程示意图；
[0024]图5为本申请实施例提供的可视化大屏的生成装置的组成示意图。
具体实施方式
[0025]以下，术语“第一”、“第二”和“第三”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可视化大屏的生成方法，其特征在于，所述方法包括：获取目标插件的插件信息；所述目标插件为文件服务器中的插件；所述文件服务器包括多个插件；所述多个插件中的每个插件各自对应一种图表；所述插件信息用于指示插件的文件地址；基于所述目标插件的插件信息所指示的所述目标插件的文件地址，从所述文件服务器中调用所述目标插件以显示所述目标插件对应的图表。2.根据权利要求1所述的方法，其特征在于，所述获取目标插件的插件信息，包括：获取目标插件的唯一标识pluginCode；基于所述目标插件的唯一标识和预设的插件列表，确定所述目标插件的插件信息；所述插件列表用于指示所述pluginCode和插件信息的对应关系；所述插件信息包括插件主入口文件的加载地址path、插件容器名称containerName、导出的模块名称exposedModule、以及插件在代码中的组件名称ngModuleName。3.根据权利要求1或2所述的方法，其特征在于，所述方法应用于Angular架构中；所述基于所述目标插件的插件信息所指示的所述目标插件的文件地址，从所述文件服务器中调用所述目标插件以显示所述目标插件对应的图表，包括：根据预设的load函数和所述目标插件的插件信息，加载所述目标插件的组件代码；利用所述Angular架构内置的动态组件渲染方法和所述目标插件的插件代码生成组件实例，渲染出所述目标插件对应的图表。4.根据权利要求1所述的方法，其特征在于，所述方法应用于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字段用于指示共享依赖包的配置对象。5.根据权利要求4所述的方法，其特征在于，在所述设置output、optimization、plugins三种字段之后，所述方法还包括：获取待注册插件；
在所述Angular架构的应用程序目录下增加获取到的待注册插件；在所述exposes字段中增加获取到的待注册插件的名称和路径；将所述待注册插件打包为预设格式的压缩包，得到插件包。6.根据权利要求5所述的方法，其特征在于，在所述将所述待注册插件打包为预设格式的压缩包，得到插件包之后，所述方法还包括：获取所述插件包中的待注册插件的唯一标识和插件信息；所述插件信息包括待注册插件主入口文件的加载地址path、待注册插件容器名称containerName、导出的模块名称exposedModule、以及待注册插件在代码中的组件名称ngModuleName；建立所述待注册插件的唯一标识和插件信息之间的对应关系，以完成所述待注册插件的注册。7.一种可视化大屏的生成装置，其特征在于，所述装置包括：获取单...

【专利技术属性】
技术研发人员：牛宗滨，
申请(专利权)人：北京基调网络股份有限公司，
类型：发明
国别省市：