CN114153442A - 基于可视化组件的大屏可视化页面配置方法和系统 - Google Patents

Abstract

本发明属于数据处理技术领域，特别涉及一种基于可视化组件的大屏可视化页面配置方法和系统；所述方法包括：对前端可视化控件进行封装，形成若干可视化组件，存储于可视化组件库中；在页面初始化过程中，根据页面配置信息加载对应的可视化组件，根据各可视化组件的数据取数逻辑，动态请求获取数据，完成数据加载和页面初始化工作；功能应用过程中，基于页面的框架布局，针对指定模块区域的可视化组件进行配置和调整，将配置和调整后的页面配置信息保存在页面配置库中。本发明通过针对可视化大屏进行适度定制开发，同时兼顾用户一定时期内的业务需求，进行前端可视化组件封装，支持用户基于页面模板化布局进行简单自定义配置。

Description

基于可视化组件的大屏可视化页面配置方法和系统

技术领域

本发明属于数据处理技术领域，特别涉及一种基于可视化组件的大屏可视化页面配置方法和系统。

背景技术

大屏可视化系统，通常是将一些业务的关键指标以数据可视化的方式，在大屏页面上集中展示，经常用在公司的展览中心、城市交通管控中心、交易大厅等。大屏系统设计需要考虑的要素主要有如下几点：一是合理的指标设计，大屏首先是要服务于业务，合理的指标设计可以让业务内容更富有层次；二是合理的布局和配色，加上适当的动效设计，如背景动画、刷新的加载动画、轮播动画、图表的闪烁动画、地图的流向动画等等，可以增加大屏观感体验。三是针对同业对标的大屏系统中，在保证整体指标一致的基础上，还需要体现各系统的特色内容。为满足大屏可视化系统的这些功能需求，需要采用灵活的前端技术进行支撑。

目前大屏可视化的系统应用，一般有两种技术路线，一是通过提供自由配置页面元素的可视化编辑平台，由大屏设计人员，按照用户需求进行大屏页面设计；二是通过web功能页面开发，根据用户需求，进行功能页面定制。

这两种技术方案各有优缺点。对于基于可视化编辑平台，优点是不需要或者仅需要很少量的开发，支持快速搭建前端页面原型及框架。根据系统建设经验，一般初期由系统建设厂商负责搭建相关页面，正式运行后，由用户进行运维。但此类系统一般操作较为复杂，用户学习成本高，使用难度大；对于web功能页面开发，虽然可以灵活支持用户的定制化需求，但是系统建设周期长，后期系统投运后，不支持对页面进行任何调整，运维升级成本高。

发明内容

本发明的目的在于提供一种基于可视化组件的大屏可视化页面配置方法和系统，以解决现有大屏可视化的系统运维中存在的操作复杂、学习成本高、建设周期长、后期不支持对页面进行调整的技术问题。

为了实现上述目的，本发明采用如下技术方案：

基于可视化组件的大屏可视化页面配置方法，包括：

对前端可视化控件进行封装，形成若干可视化组件，存储于可视化组件库中；

在页面初始化过程中，根据页面配置信息加载对应的可视化组件，根据各可视化组件的数据取数逻辑，动态请求获取数据，完成数据加载和页面初始化工作；

功能应用过程中，基于页面的框架布局，针对指定模块区域的可视化组件进行配置和调整，将配置和调整后的页面配置信息保存在页面配置库中。

本发明进一步的改进在于：所述可视化组件通过前端可视化控件及关联数据的取数逻辑封装形成。

本发明进一步的改进在于：所述可视化组件中还包括配置信息，所述配置信息包括组件编号、组件名称、组件代码路径、组件数据类型、组件接口参数中的一种或多种。

本发明进一步的改进在于：所述针对指定模块区域的可视化组件进行配置和调整的步骤中，调整操作包括：可视化组件的替换、删除、隐藏、顺序调整中的一种或者多种。

本发明进一步的改进在于：所述可视化组件包括树图可视化组件、散点图可视化组件、柱状图可视化组件、网状图可视化组件、饼状图可视化组件、折线图可视化组件中一种或多种。

一种基于可视化组件的大屏可视化页面配置系统，包括：

可视化组件库，用于存储封装的若干可视化组件；

页面配置库，用于存储若干页面配置信息；

页面配置单元，用于加载选择的页面配置信息并进行编辑后存储。

本发明进一步的改进在于：所述可视化组件通过前端可视化控件及关联数据的取数逻辑封装形成。

本发明进一步的改进在于：所述可视化组件中还包括配置信息，所述配置信息包括组件编号、组件名称、组件代码路径、组件数据类型、组件接口参数中的一种或多种。

本发明进一步的改进在于：所述可视化组件包括树图可视化组件、散点图可视化组件、柱状图可视化组件、网状图可视化组件、饼状图可视化组件、折线图可视化组件中一种或多种。

本发明进一步的改进在于：所述编辑包括可视化组件的替换、删除、隐藏和顺序调整中一种或多种。

相对于现有技术，本发明具有以下有益效果：

本发明提出了一种基于可视化组件的大屏可视化页面配置方法和系统，系统建设期间，针对可视化大屏进行适度定制开发，同时兼顾用户一定时期内的业务需求，进行前端可视化组件封装，支持用户基于页面模板化布局进行简单配置，例如可视化组件的替换、删除、隐藏和顺序调整等。这种方式既可满足用户大屏可视化的定制化需求，又支持用户未来对大屏内容进行自定义的调整，同时配置内容简单，满足系统的常看常新需求。

本发明提出的前端可视化组件，包括了组件的后端数据接口，通过绑定数据服务，实现前端可视化组件的即插即用。

为避免用户从零开始搭建系统页面，本发明通过提供若干基础大屏页面框架布局，支持用户在指定页面模板上，通过配置，替换相应的可视化组件，实现页面的自定义配置。

附图说明

构成本发明的一部分的说明书附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为本发明一种基于可视化组件的大屏可视化页面配置方法的流程示意图；

图2为本发明一种基于可视化组件的大屏可视化页面配置系统的结构框图。

具体实施方式

下面将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

以下详细说明均是示例性的说明，旨在对本发明提供进一步的详细说明。除非另有指明，本发明所采用的所有技术术语与本发明所属领域的一般技术人员的通常理解的含义相同。本发明所使用的术语仅是为了描述具体实施方式，而并非意图限制根据本发明的示例性实施方式。

用户权限控制：根据系统设置的安全规则或者安全策略，使用户可以访问而且只能访问自己被授权的资源，包括数据资源和页面资源。

前端组件化：组件化是指把重复的代码提取出来，合并成为一个个组件，以支持功能得到复用，位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。对于大屏可视化组件来说，组件化不仅包含前端控件可视化效果，还包括相应后端数据服务接口封装。一个完整的大屏前端可视化组件，可面向系统开发者或系统配置管理员提供服务。

实施例1

本发明提供了一种基于可视化组件的大屏可视化页面配置方法，以前端组件化技术为基础，通过将前端可视化控件进行模块封装，并绑定相应的数据请求参数和接口，完成粗颗粒度的组件封装，实现即插即用的可视化效果。这种颗粒度的组件化封装，其关键技术在于配置信息的整理。

为简化用户的配置信息，本发明从代码级别完成前端可视化效果的配置方法，同时开发标准的数据获取接口，基于组件配置信息，与可视化组件进行绑定，用以支持前端组件的即插即用。

请参阅图1所示，本发明提供一种基于可视化组件的大屏可视化页面配置方法，包括以下步骤：

具体包括：

S1、可视化组件封装：

获取用户的指标数据需求；根据用户的每类指标数据需求匹配并绑定对应的前端可视化控件，实现数据的可视化展示的一致性；另外，针对不同用户，其数据内容也不相同，通过设计相应的后端数据服务接口，实现数据的动态获取与更新，便于用户快速进行数据预览。前端可视化控件及关联数据的取数逻辑封装形成可视化组件；多个可视化组件存储于可视化组件库中。可视化组件中还包括配置信息，所述配置信息至少包括组件编号、组件名称、组件代码路径、组件数据类型、组件接口参数。

大屏可视化一般采用图表类控件展示居多，前端基于前端可视化控件，如E-charts等。

S2、页面配置：

在页面配置库中选择待加载的页面配置信息；根据页面配置信息加载对应的可视化组件，根据各可视化组件的数据取数逻辑，请求获取数据，完成数据加载和页面初始化工作；

功能应用过程中，基于页面的框架布局，针对指定模块区域的可视化组件进行配置和调整，将配置和调整后的页面配置信息保存在页面配置库中；

所述配置为配置可视化组件的配置信息；

所述调整具体包括：

可视化组件的替换：根据页面的显示结果，用户判断是否需要进行可视化组件的替换；对于需要调整的可视化组件，用户从可视化组件库中选择需要的可视化组件进行替换；

可视化组件的删除：根据页面的显示结果，用户判断是否需要进行可视化组件的删除；对于需要删除的可视化组件，用户在页面直接删除；

可视化组件的隐藏：根据页面的显示结果，用户判断是否需要进行可视化组件的删除；对于需要隐藏的可视化组件，用户在页面直接删除；

可视化组件的顺序调整：根据页面的显示结果，用户判断是否需要进行可视化组件的顺序调整；对于需要顺序调整的可视化组件，用户在页面直接拖拽修改可视化组件的显示顺序；

可视化组件配置和调整完成后，保存大屏可视化页面的配置信息。

可视化组件调整的配置信息是保证组件自定义配置的重要保障，至少应包括如下核心信息：所属页面、所属标签、组件类型和组件编号。

S3、加载显示：

用户加载大屏可视化页面的页面配置信息，在指定显示器中进行显示。

本发明中，针对系统应用人员，根据业务角色，分为系统配置管理员和系统用户。系统配置管理员主要负责系统功能页面的相关配置，包括页面具体的展示数据内容，大屏页面的显示/隐藏，显示顺序等；系统用户则根据配置结果，开展系统功能应用。

具体的，配置管理员的操作步骤包括：

1、配置管理员登陆系统；

2、获取当前大屏可视化页面的配置信息，返回相关配置页面；

3、根据登陆用户角色，赋予用户的页面编辑调整权限；

4、页面自动进行数据初始化加载，根据配置的后端数据服务接口，请求获取数据，完成数据加载和页面初始化工作。

5、用户根据页面整体效果，判断是否需要调整相关内容；对于需要调整的可视化组件，用户从前端组件库中选择理想的可视化组件，替换当前可视化组件。

6、用户根据情况，设置可视化组件是否需要隐藏、调整顺序。

7、入库保存大屏可视化页面的配置信息。页面组件替换的配置信息是保证组件自定义配置的重要保障，至少应包括如下核心信息：所属页面、所属标签、组件类型和组件编号。

对于系统用户，则根据配置管理员的页面配置信息，正常开展页面功能应用。通过这种模式，既可以满足前期用户的定制化需求，又具备良好的灵活配置功能，同时系统扩展功能简单，降低了用户学习成本，实现零代码、零基础的功能页面扩展，有效延长了大屏可视化系统的生命周期。

实施例2

请参阅图2所示，本发明还提供了一种基于可视化组件的大屏可视化页面配置系统，包括：

可视化组件库，用于存储封装的若干可视化组件；所述可视化组件由前端可视化控件及关联数据的取数逻辑封装而成；所述可视化组件中还包括配置信息，所述配置信息至少包括组件编号、组件名称、组件代码路径、组件数据类型、组件接口参数；可视化组件可以为树图可视化组件、散点图可视化组件、柱状图可视化组件、网状图可视化组件、饼状图可视化组件、折线图可视化组件等；

页面配置库，用于存储若干页面配置信息；

页面配置单元，用于加载选择的页面配置信息并进行编辑；所述编辑包括可视化组件的替换、删除、隐藏和顺序调整；以及可视化组件的配置。

浏览器，用于加载选择的页面配置信息进行显示。

本发明对前端可视化控件及关联数据的取数逻辑进行封装，形成若干可视化组件，存储于可视化组件库中；在页面配置库中选择页面配置信息初始化过程中，根据页面配置信息加载对应的可视化组件，根据各可视化组件的后端数据取数逻辑服务接口，动态请求获取数据，完成数据加载和页面初始化工作；对加载的可视化组件进行调整后保存在页面配置库中；加载选择的页面配置信息，基于浏览器进行显示，功能应用过程中，可基于页面的框架布局，针对指定模块区域内容，通过设置不同的可视化组件，进行配置和调整，并将调整后的配置信息保存在页面配置库中，实现配置信息持久化。本发明通过针对可视化大屏进行适度定制开发，同时兼顾用户一定时期内的业务需求，进行前端可视化组件封装，支持用户基于页面模板化布局进行简单自定义配置。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

最后应当说明的是：以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者等同替换，而未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明的权利要求保护范围之内。

Claims (10)

1.基于可视化组件的大屏可视化页面配置方法，其特征在于，包括：

对前端可视化控件进行封装，形成若干可视化组件，存储于可视化组件库中；

在页面初始化过程中，根据页面配置信息加载对应的可视化组件，根据各可视化组件的数据取数逻辑，动态请求获取数据，完成数据加载和页面初始化工作；

功能应用过程中，基于页面的框架布局，针对指定模块区域的可视化组件进行配置和调整，将配置和调整后的页面配置信息保存在页面配置库中。

2.根据权利要求1所述的基于可视化组件的大屏可视化页面配置方法，其特征在于，所述可视化组件通过前端可视化控件及关联数据的取数逻辑封装形成。

3.根据权利要求1所述的基于可视化组件的大屏可视化页面配置方法，其特征在于，所述可视化组件中还包括配置信息，所述配置信息包括组件编号、组件名称、组件代码路径、组件数据类型、组件接口参数中的一种或多种。

4.根据权利要求1所述的基于可视化组件的大屏可视化页面配置方法，其特征在于，所述针对指定模块区域的可视化组件进行配置和调整的步骤中，调整操作包括：可视化组件的替换、删除、隐藏、顺序调整中的一种或者多种。

5.根据权利要求1所述的基于可视化组件的大屏可视化页面配置方法，其特征在于，所述可视化组件包括树图可视化组件、散点图可视化组件、柱状图可视化组件、网状图可视化组件、饼状图可视化组件、折线图可视化组件中一种或多种。

6.一种基于可视化组件的大屏可视化页面配置系统，其特征在于，包括：

可视化组件库，用于存储封装的若干可视化组件；

页面配置库，用于存储若干页面配置信息；

页面配置单元，用于加载选择的页面配置信息并进行编辑后存储。

7.根据权利要求6所述的一种基于可视化组件的大屏可视化页面配置系统，其特征在于，所述可视化组件通过前端可视化控件及关联数据的取数逻辑封装形成。

8.根据权利要求6所述的一种基于可视化组件的大屏可视化页面配置系统，其特征在于，所述可视化组件中还包括配置信息，所述配置信息包括组件编号、组件名称、组件代码路径、组件数据类型、组件接口参数中的一种或多种。

9.根据权利要求6所述的一种基于可视化组件的大屏可视化页面配置系统，其特征在于，所述可视化组件包括树图可视化组件、散点图可视化组件、柱状图可视化组件、网状图可视化组件、饼状图可视化组件、折线图可视化组件中一种或多种。

10.根据权利要求6所述的一种基于可视化组件的大屏可视化页面配置系统，其特征在于，所述编辑包括可视化组件的替换、删除、隐藏和顺序调整中一种或多种。

Images