CN111522565A - 基于组件化的实时更新数据可视化大屏方法及系统 - Google Patents

Abstract

本发明公开了一种基于组件化的实时更新数据可视化大屏方法及系统，其中，系统包括：数据源管理模块，用于提供多种类型数据配置，以用于处理多来源复杂数据，并为可视化图表提供数据连接支持；组件化编排模块，用于基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排；可视化视图配置模块，用于针对画布上放置的不同类型可视化视图，提供相对应的数据以及样式参数配置，以进行图表的自定义样式设计，以及数据相关设置；大屏展示模块，用于查看已经发布成功的数据可视化大屏。该系统构建能够支持多维数据图表展示以及多领域数据实时监控的数据可视化大屏，简单易实现。

Description

基于组件化的实时更新数据可视化大屏方法及系统

技术领域

本发明涉及数据可视化技术与数据应用领域技术领域，特别涉及一种基于组件化的实时更新数据可视化大屏方法及系统。

背景技术

数据可视化作为大数据分析最热门的研究领域之一，是研究如何利用图表、图形、地图等视觉元素，展现数据中隐含的信息，发掘数据中所包含规律的过程。将数据分析结果可视化能够帮助人们从信息中提取知识，从知识中收获价值。数据大屏作为数据可视化技术的展现形式之一，能够在有限的窗口内针对复杂的多源数据进行可视化展示，实时呈现隐藏在瞬息万变庞杂数据背后的业务洞察，被广泛应用在金融、医疗、城市交通等多种领域。

实时通信技术是大屏能够实现数据实时监控等功能的重要技术之一，目前实现实时通信的方式主要有三种，一种是由客户端发起的定时更新请求，另一种是由服务器端控制的，一旦数据发生变化立刻返回给客户端，还有一种是近年来逐渐兴起的基于WebSocket的双向实时通信，其作为目前较优的方案被广泛应用于处理数据实时更新问题。因此，目前大屏主要采取的实时更新策略大多也是基于WebSocket的，然而利用WebSocket机制解决大屏场景下的数据实时更新存在着一定弊端：数据可视化大屏为了能够全方位监控数据变化，所展示图表往往依托于多种数据来源，数目众多类型复杂，利用WebSocket机制需要为绑定每一种数据源的图表提供相对应的WebSocket连接，并为每个连接的服务器端设计针对不同数据源的实时更新逻辑，这种方式实现的数据实时会使大屏系统与其他数据提供系统存在高度耦合，所以WebSocket并不适用于数据大屏可视化场景。

因此，如何解决多来源复杂数据的实时展现，实现低延迟的实时数据分析，是实现数据可视化大屏亟待解决的重要问题。

发明内容

本发明旨在至少在一定程度上解决相关技术中的技术问题之一。

为此，本发明的一个目的在于提出一种基于组件化的实时更新数据可视化大屏系统，该系统通过图形化可拖拽界面支持用户自定义大屏可视化视图布局及图表配置，构建能够支持多维数据图表展示以及多领域数据实时监控的数据可视化大屏，简单易实现。

本发明的另一个目的在于提出一种基于组件化的实时更新数据可视化大屏方法。

为达到上述目的，本发明一方面实施例提出了一种基于组件化的实时更新数据可视化大屏系统，包括：数据源管理模块，用于提供多种类型数据配置，以用于处理多来源数据，并为可视化图表提供数据连接支持；组件化编排模块，用于基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排；可视化视图配置模块，用于针对画布上放置的不同类型可视化视图，提供相对应的数据以及样式参数配置，以进行所述图表的自定义样式设计，以及数据相关设置；大屏展示模块，用于查看已经发布成功的数据可视化大屏，且根据预先设置的布局、样式及数据展示实时更新的数据可视化大屏。

本发明实施例的基于组件化的实时更新数据可视化大屏系统，通过图形化可拖拽界面支持用户通过拖拽操作灵活编排图表组件，实现自定义大屏可视化视图布局，为可视化图表提供自定义样式及相关数据配置，构建能够支持多维数据图表展示以及多领域数据实时监控的数据可视化大屏。

另外，根据本发明上述实施例的基于组件化的实时更新数据可视化大屏系统还可以具有以下附加的技术特征：

进一步地，在本发明的一个实施例中，所述可视化视图配置模块还用于通过数据与样式分离渲染方法及多视图分时更新策略为所述大屏展示实时数据。

进一步地，在本发明的一个实施例中，所述组件化编排模块包括：初始化单元，用于创建大屏及大屏管理，并支持一个账户下创建并管理多个数据可视化大屏；编辑制作单元，用于提供多类型的支持多维数据展示的可视化视图组件库，以便用户通过选择拖拽，在画布内自由编辑放置制作大屏所需的数据展示图表；发布预览单元，用于在编辑大屏界面提供发布预览功能，以便查看大屏展示效果。

为达到上述目的，本发明另一方面实施例提出了一种基于组件化的实时更新数据可视化大屏方法，包括以下步骤：提供多种类型数据配置，以用于处理多来源数据，并为可视化图表提供数据连接支持；基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排；针对画布上放置的不同类型可视化视图组件，提供相对应的数据以及样式参数配置，采用数据与样式分离的存储方案，以实现图表的自定义样式设计和数据相关设置；基于多视图分时更新策略，以进行大屏中反映不同时效性数据可视化图表组件的分时更新，以实现更为优化的大屏实时更新。

本发明实施例的基于组件化的实时更新数据可视化大屏方法，设计面向大屏可视化的前端组件化平台开发架构，在组件化的基础上实现基于多视图分时更新的数据实时处理，为绑定不同来源、反应不同时效性数据的可视化图表提供分时更新设置，解决多来源复杂数据的实时展现。其次，针对可视化组件设计一种样式与数据分离存储的渲染方法，在大屏实时刷新的过程中，只需请求图表数据，无需获取样式配置，既避免了传输数据量过大造成的加载延迟，也不需要在每次更新数据时重新渲染图表样式，提升图表加载的流畅性，优化大屏展示性能。

另外，根据本发明上述实施例的基于组件化的实时更新数据可视化大屏方法还可以具有以下附加的技术特征：

进一步地，在本发明的一个实施例中，所述基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排，进一步用于：利用组件化思想将系统进行不同功能模块拆分，封装成更为具体的用于页面展示的功能组件库，以及用于可视化展示的可视化视图组件库，提高了系统的复用性和可扩展性。

进一步地，在本发明的一个实施例中，所述针对画布上放置的不同类型可视化视图组件，提供相对应的数据以及样式参数配置，采用数据与样式分离的存储方案，以实现图表的自定义样式设计和数据相关设置，进一步用于：通过数据与样式分离渲染方法在大屏实时刷新的过程中，只需请求图表数据，无需获取样式配置，既避免了传输数据量过大造成的加载延迟，也不需要在每次更新数据时重新渲染图表样式，提升图表加载的流畅性。

进一步地，在本发明的一个实施例中，所述基于多视图分时更新策略以进行大屏中反映不同时效性数据可视化图表组件的分时更新，进一步用于：通过多视图分时更新策略，为绑定不同来源的可视化图表组件提供自主更新设置，解决多来源复杂数据的实时展现。

本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为根据本发明实施例的基于组件化的实时更新数据可视化大屏系统的结构示意图；

图2为根据本发明一个实施例的基于组件化的实时更新数据可视化大屏系统的结构示意图；

图3为根据本发明实施例的基于组件化的数据可视化大屏前端开发框架示意图；

图4为根据本发明实施例的系统总体流程图；

图5为根据本发明实施例的多视图分时轮询方法示意图；

图6为根据本发明实施例的数据与样式分离的图表渲染方法示意图；

图7为根据本发明实施例的基于组件化的实时更新数据可视化大屏方法的流程图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

下面参照附图描述根据本发明实施例提出的基于组件化的实时更新数据可视化大屏方法及系统，首先将参照附图描述根据本发明实施例提出的基于组件化的实时更新数据可视化大屏系统。

图1是本发明一个实施例的基于组件化的实时更新数据可视化大屏系统的结构示意图。

如图1所示，该基于组件化的实时更新数据可视化大屏系统10包括：数据源管理模块100、组件化编排模块200、可视化视图配置模块300、大屏展示模块400。

其中，数据源管理模块100用于提供多种类型数据配置，以用于处理多来源数据，并为可视化图表提供数据连接支持；组件化编排模块200用于基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排；可视化视图配置模块300用于针对画布上放置的不同类型可视化视图，提供相对应的数据以及样式参数配置，以进行图表的自定义样式设计，以及多源数据绑定和自主更新设置；大屏展示模块400用于查看已经发布成功的数据可视化大屏，且根据预先设置的布局、样式及数据展示实时更新的数据可视化大屏。本发明实施例的系统10通过图形化可拖拽界面支持用户自定义大屏可视化视图布局及图表配置，构建能够支持多维数据图表展示以及多领域数据实时监控的数据可视化大屏。

具体而言，如图2所示，本发明实施例的系统10主要包括四个功能模块：数据源管理模块、组件化编排模块、可视化视图配置模块和大屏展示模块，其中，

1、数据源管理模块：

提供包括静态数据、csv文件、API、数据库等多种类型数据配置，主要用于处理多来源复杂数据，并为可视化图表提供数据连接支持。

2、组件化编排模块

该模块基于组件化开发，为用户提供类型丰富的可拖拽可视化视图组件，能够实现大屏展示图表的自由编排，分为初始化、编辑制作、发布预览三个子模块。

(1)初始化模块：用于创建大屏及大屏管理，支持一个账户下创建并管理多个数据可视化大屏。

(2)编辑制作模块：提供类型丰富的支持多维数据展示的可视化视图组件库，用户通过选择拖拽，在画布内自由编辑放置制作大屏所需的数据展示图表。

(3)发布预览模块：在编辑大屏界面提供发布预览功能，用于随时查看大屏展示效果。

3、可视化视图配置模块：

针对画布上放置的不同类型可视化视图，该模块提供相对应的数据以及样式参数配置，实现图表的自定义样式设计，以及数据相关设置。其中该模块利用本发明提出的数据与样式分离渲染方法，以及多视图分时更新策略为大屏提供更优化的实时数据展示性能。

4、大屏展示模块：

查看已经发布成功的数据可视化大屏，根据预先设置的布局、样式及数据，实现具有实时更新功能的数据可视化大屏展示。

本发明实施例设计面向大屏可视化的前端组件化平台开发架构，在组件化的基础上实现基于多视图分时更新的数据实时处理，为绑定不同来源、反应不同时效性数据的可视化图表提供分时更新设置，解决多来源复杂数据的实时展现。下面将对基于组件化的数据可视化大屏前端开发框架进行详细阐述，具体如下：

本发明实施例首先基于MVVM(Model-View-ViewModel)模式的开发框架对数据大屏可视化构建系统进行组件化开发，MVVM设计模式能够实现视图层与逻辑层的解耦，提高模块可复用性，利用该模式思想将系统不同功能模块拆分，封装成更为具体的用于页面展示的功能组件，通过数据绑定的方式，实现组件间通信，从而构建由数据驱动的功能组件库，降低了不同功能组件间的耦合度，提高了系统的稳定性和可扩展性。

另外，在数据大屏可视化场景下需要大量的可支持不同数据类型及来源的视图满足大屏展示需求，本发明基于现有的可视化工具Echarts和Antv提供的各种类型的图表进行组件化封装，并利用D3.js设计并封装数据大屏可视化所需的其他自定义组件，构建适用于大屏展示的类型丰富、支持多数据源以及复杂数据类型的可视化视图组件库。

基于组件化的数据可视化大屏开发框架如图3所示，系统以管理大屏组件为入口，向下提供新建大屏、编辑大屏、发布大屏三个容器类型组件。其中，编辑大屏组件为本系统的核心，由左侧功能栏组件、中间画布组件、右侧配置项组件组合而成，用来实现组件化编排及可视化视图配置。

系统基于该框架将一个大屏从创建到发布展示的整体流程如图4所示。

进一步地，在本发明的一个实施例中，本发明实施例还提出一种适用于数据可视化大屏展示的基于组件化的多视图分时更新数据实时处理方法，解决了针对多来源反应不同时效性复杂数据的实时监控。下面将对多视图分时更新的数据实时处理方法进行详细阐述，具体如下：

根据上述的组件化开发框架可知，用于构建大屏的所有可展示图表都由可视化组件库提供，大屏上放置的每个可视化组件之间具有独立性，可进行用户自定义样式及数据配置。因此基于组件化提供的此特性，本发明采用基于轮询机制改进的多视图分时更新的关键技术，在每个可视化组件内部绑定自动更新定时器，由用户设置每个可视化图表的自动更新间隔，在大屏展示阶段根据之前的配置进行不同图表的分时刷新。基于轮询机制改进的多视图分时轮询方法如图5所示。

轮询方式具有较高的兼容性，针对不同数据源的多类型图表可使用统一的实时处理逻辑，解决了WebSocket机制在处理多源数据的弊端，降低了大屏和数据提供方的耦合性。

另外，轮询机制在解决大屏实时性问题过程中也存在一定弊端，轮询方式在每次定时请求更新大屏时会渲染所有可视化图表的相关数据，然而一个大屏主题包含了很多展示视图，每个视图所展示数据的时效性有所不同，如果大屏中反映不同时效性数据的图表每次都随着大屏同步更新，那么更新的时间间隔设置存在很大问题，如果时间间隔设置过短，有些视图在刷新多次后数据都未更新，造成了资源的浪费，时间间隔设置过长，有些视图的数据会没有及时反映出趋势变化，影响分析决策。针对这个弊端本发明利用组件化的独立性实现大屏图表数据的分时轮询处理，不仅为多来源反应不同时效性数据提供一个更加合理的实时更新策略，同时也避免了一次更新所有展示图表导致的大屏渲染过慢，影响大屏展示性能。

该方案的伪代码实现如表1和表2所示。

表1

表2

进一步地，在本发明的一个实施例中，本发明实施例还提出一种数据与样式分离的图表渲染方法，降低数据传输延迟，提升图表加载的流畅性，优化大屏展示性能。下面将对数据与样式分离的图表渲染方法进行详细阐述，具体如下：

大屏为满足实时刷新需求，需要在每次更新时重新获取数据以更新每个可视化图表，大屏中所展示图表大多依托于Echarts等开源图表库，由此会带来一些图表自定义功能的局限，比如Echarts提供的每个图表都有一个一体化不可分割的option配置数据，因此在每次更新图表时需要重新获取这个图表包含样式和数据在内的所有配置，然而数据可视化大屏包含丰富多样的外观酷炫的可视化图表，每次都需要重新渲染图表样式必定会由于渲染时间过长影响图表加载的流畅性。然而大屏在发布展示的过程中，所有图表样式均已按照提前配置的参数固定无须更改，每次刷新大屏只有数据需要实时变化。因此本发明在将图表二次封装成可视化视图组件的基础上提出一种样式与数据分离的图表渲染方法。

如图6所示，该方法在封装组件的过程中将可视化视图组件的样式参数与坐标轴绑定数据分离存储，对外分别开放属性配置和数据绑定两个接口，在大屏实时刷新的过程中组件只需按照定时器设置的时间间隔自动请求数据接口监听数据变化，无需获取包含样式在内的属性配置参数，避免了由于图表样式配置复杂传输大量无用的属性参数数据造成数据传输延迟，同时，也不需要在每次更新数据时重新渲染图表样式，避免刷新频繁影响图表加载的流畅性，进而提升大屏展示性能，优化用户体验。

该方案伪代码实现如表3和表4所示。

表3

表4

综上，本发明实施例提出的基于组件化的实时更新数据可视化大屏系统，设计面向大屏可视化的前端组件化平台开发架构，在组件化的基础上实现基于多视图分时更新的数据实时处理，为绑定不同来源、反应不同时效性数据的可视化图表提供分时更新设置，解决多来源复杂数据的实时展现；针对可视化组件设计一种样式与数据分离存储的渲染方法，在大屏实时刷新的过程中，只需请求图表数据，无需获取样式配置，既避免了传输数据量过大造成的加载延迟，也不需要在每次更新数据时重新渲染图表样式，提升图表加载的流畅性，优化大屏展示性能。

其次参照附图描述根据本发明实施例提出的基于组件化的实时更新数据可视化大屏方法。

图7是本发明一个实施例的基于组件化的实时更新数据可视化大屏方法的流程图。

如图7所示，该基于组件化的实时更新数据可视化大屏方法包括以下步骤：

在步骤S701中，提供多种类型数据配置，以用于处理多来源复杂数据，并为可视化图表提供数据连接支持；

在步骤S702中，基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排；

在步骤S703中，针对画布上放置的不同类型可视化视图组件，提供相对应的数据以及样式参数配置，采用数据与样式分离的存储方案，以实现图表的自定义样式设计和数据相关设置；

在步骤S704中，基于多视图分时更新策略，以进行大屏中反映不同时效性数据可视化图表组件的分时更新，以实现更为优化的大屏实时更新。

进一步地，在本发明的一个实施例中，针对画布上放置的不同类型可视化视图组件，提供相对应的数据以及样式参数配置，采用数据与样式分离的存储方案，以实现图表的自定义样式设计和数据相关设置，进一步用于：通过数据与样式分离渲染方法及多视图分时更新策略为大屏展示实时数据，从而优化可视化图表的实时展示性能。

进一步地，在本发明的一个实施例中，基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排，进一步包括：创建大屏及大屏管理，并支持一个账户下创建并管理多个数据可视化大屏；提供多类型的支持多维数据展示的可视化视图组件库，以便用户通过选择拖拽，在画布内自由编辑放置制作大屏所需的数据展示图表；在编辑大屏界面提供发布预览功能，以便查看大屏展示效果。

需要说明的是，前述对基于组件化的实时更新数据可视化大屏系统实施例的解释说明也适用于该实施例的基于组件化的实时更新数据可视化大屏方法，此处不再赘述。

根据本发明实施例提出的基于组件化的实时更新数据可视化大屏方法，设计面向大屏可视化的前端组件化平台开发架构，在组件化的基础上实现基于多视图分时更新的数据实时处理，为绑定不同来源、反应不同时效性数据的可视化图表提供分时更新设置，解决多来源复杂数据的实时展现；针对可视化组件设计一种样式与数据分离存储的渲染方法，在大屏实时刷新的过程中，只需请求图表数据，无需获取样式配置，既避免了传输数据量过大造成的加载延迟，也不需要在每次更新数据时重新渲染图表样式，提升图表加载的流畅性，优化大屏展示性能。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

在本发明中，除非另有明确的规定和限定，第一特征在第二特征“上”或“下”可以是第一和第二特征直接接触，或第一和第二特征通过中间媒介间接接触。而且，第一特征在第二特征“之上”、“上方”和“上面”可是第一特征在第二特征正上方或斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”可以是第一特征在第二特征正下方或斜下方，或仅仅表示第一特征水平高度小于第二特征。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (6)

1.一种基于组件化的实时更新数据可视化大屏系统，其特征在于，包括：

数据源管理模块，用于提供多种类型数据配置，以用于处理多来源数据，并为可视化图表提供数据连接支持；

组件化编排模块，用于基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排；

可视化视图配置模块，用于针对画布上放置的不同类型可视化视图，提供相对应的数据以及样式参数配置，以进行所述图表的自定义样式设计，以及多源数据绑定和自主更新数据相关设置；

大屏展示模块，用于查看已经发布成功的数据可视化大屏，且根据预先设置的布局、样式及数据展示实时更新的数据可视化大屏。

2.根据权利要求1所述的系统，其特征在于，所述可视化视图配置模块还用于通过数据与样式分离渲染方法及多视图分时更新策略为所述大屏展示实时数据，从而优化可视化图表的实时展示性能。

3.根据权利要求1所述的系统，其特征在于，所述组件化编排模块包括：

初始化单元，用于创建大屏及大屏管理，并支持一个账户下创建并管理多个数据可视化大屏；

编辑制作单元，用于提供多类型的支持多维数据展示的可视化视图组件库，以便用户通过选择拖拽，在画布内自由编辑放置制作大屏所需的数据展示图表；

发布预览单元，用于在编辑大屏界面提供发布预览功能，以便查看大屏展示效果。

4.一种基于组件化的实时更新数据可视化大屏方法，其特征在于，包括以下步骤：

提供多种类型数据配置，以用于处理多来源数据，并为可视化图表提供数据连接支持；

基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排；

针对画布上放置的不同类型可视化视图组件，提供相对应的数据以及样式参数配置，采用数据与样式分离的存储方案，以实现图表的自定义样式设计和数据相关设置；

基于多视图分时更新策略，以进行大屏中反映不同时效性数据可视化图表组件的分时更新，以实现更为优化的大屏实时更新。

5.根据权利要求4所述的方法，其特征在于，所述针对画布上放置的不同类型可视化视图组件，提供相对应的数据以及样式参数配置，采用数据与样式分离的存储方案，以实现图表的自定义样式设计和数据相关设置，进一步用于：

通过数据与样式分离渲染方法及多视图分时更新策略为所述大屏展示实时数据，从而优化可视化图表的实时展示性能。

6.根据权利要求4所述的方法，其特征在于，所述基于组件化开发为用户提供多类型的可拖拽可视化视图组件，以实现大屏展示图表的自由编排，进一步包括：

创建大屏及大屏管理，并支持一个账户下创建并管理多个数据可视化大屏；

提供多类型的支持多维数据展示的可视化视图组件库，以便用户通过选择拖拽，在画布内自由编辑放置制作大屏所需的数据展示图表；

在编辑大屏界面提供发布预览功能，以便查看大屏展示效果。

Images