CN114706584A - 一种数据可视化展示制作系统 - Google Patents

Abstract

本发明提供一种数据可视化展示制作系统，包括：配置单元、解析单元和存储单元；所述配置单元，用于对多个组件模型进行配置，确定每个组件模型的配置信息；所述解析单元，用于对所述配置信息进行解析，获取解析结果，并基于画布，对所述解析结果进行渲染，生成目标前端对应的前端作品；所述存储单元，用于将组件模型以半结构化数据的形式进行存储。本发明提供的数据可视化展示制作系统，通过利用半结构化数据形式的组件模型，实现了数据可视化前端作品的快速搭建、调试和发布，提高了数据可视化展示系统的搭建效率，有效降低了系统使用门槛。

Description

一种数据可视化展示制作系统

技术领域

本发明涉及数据处理技术领域，尤其涉及一种数据可视化展示制作系统。

背景技术

数据可视化展示系统能够对海量的数据信息进行高效率的分析和直观的展示，帮助管理决策人员发现数据背后的关系，为科学决策提供参考。

传统的数据可视化展示系统开发需要开发人员熟悉各种图表库和地图库，熟悉Canvas、WebGL等网页绘图技术。

上述对操作人员专业技术水平要求较高。

发明内容

本发明提供一种数据可视化展示制作系统，用以解决现有技术中门槛教改的缺陷，实现数据图层的快速简单搭建。

本发明提供一种数据可视化展示制作系统，包括：配置单元、解析单元和存储单元；

所述配置单元，用于对多个组件模型进行配置，确定每个组件模型的配置信息；

所述解析单元，用于对所述配置信息进行解析，获取解析结果，并基于画布，对所述解析结果进行渲染，生成目标前端对应的前端作品；

所述存储单元，用于将组件模型以半结构化数据的形式进行存储。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：封装单元；

所述封装单元，具体用于：

从引入的多个组件库中，提取多个组件的公共属性进行封装；

对所述多个组件中的每个组件引入已封装的公共属性，并进行独立封装，获取多个封装组件；

构建每个封装组件对应的组件模型，以获取多个组件模型；每个组件模型通过版本升级更新，动态拓展组件模型配置内容。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：

设计单元，用于根据所述目标前端的前端类型，确定所述目标前端对应的设计器；

所述设计器，用于：

从所述组件模型中确定多个目标组件模型；

对所述多个目标组件模型进行配置。

根据本发明提供的一种数据可视化展示制作系统，所述设计器，具体用于：

根据所述前端作品的作品需求，对所述多个目标组件模型进行属性配置；

并根据每个目标组件模型的数据来源，对所述多个目标组件模型数据源配置；

并根据每个组件之间的交互联动，对所述多个目标组件模型交互配置。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：构建单元，用于构建可视化引擎；所述可视化引擎，用于根据所述目标组件模型，以及每个目标组件模型之间的图层关系，调用组件模型关联的数据源获取数据，以渲染前端作品。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：监听单元，用于监听所述画布上每个目标组件模型的配置变化，在所述配置信息变化的情况下，将所述每个目标组件模型的新的配置信息发送至解析单元。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：

图层控制单元，用于控制所述画布上多个目标组件模型的布局顺序，以使用所述布局顺序控制所述多个目标组件模型的层叠次序。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：分组管理单元，根据所述目标前端的前端类型，对所述前端作品进行分组。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：数据源管理单元，用于储存所述目标组件模型的数据库连接池；

所述存储单元，还用于存储所述前端作品。

根据本发明提供的一种数据可视化展示制作系统，所述系统还包括：访问控制单元，用于根据所述目标前端发送的访问密钥，将所述前端作品发送至所述目标前端。

本发明提供的数据可视化展示制作系统，通过利用半结构化数据形式的组件模型，实现了数据可视化前端作品的快速搭建、调试和发布，提高了数据可视化展示系统的搭建效率，有效降低了系统使用门槛。

附图说明

为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明提供的数据可视化展示制作系统的结构示意图；

图2是本发明提供的组件模型的属性配置方法的流程示意图；

图3是本发明提供的数据可视化展示制作系统的工作原理示意图；

图4是本发明提供的前端作品生成方法的流程示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

随着社会高度发展，信息以指数级爆炸式递增，信息可视化需求急剧扩大，数据可视化技术成为热门趋势，特别是一些监控中心、指挥调度中心等重要场所，数据可视化展示系统已成为不可或缺的核心基础设施；数据可视化展示系统已经不仅仅是将图像、数据显示到大屏幕上，更多的是对数据信息的分析和展示。

当前，数据可视化展示系统通常采用浏览器/服务器(Browser/Server，B/S)架构开发，以浏览器网页的形式展现，由丰富的图表组件组成，包括柱状图、折线图、饼图、地图等常见组件，这些组件通常是可交互的、动态的，其本质上是将前端用户的交互操作，解析转化为机器可识别可执行的数据查询语言与计算脚本。

数据可视化展示系统的开发，需要综合利用超文本标记语言(Hyper Text MarkupLanguage，HTML)、层叠样式表(Cascading Style Sheets，CSS)、JavaScript语言等全球广域网(World Wide Web，Web)前端开发技术，结合Echarts、Hight charts等图表库和Openlayers、Leaflet等地图库辅助开发。

传统的可视化大屏系统中，组件配置数据，其数据结构包括结构化数据和非结构化数据。

结构化数据需要预先明确定义好组件模型，便于组件修改、查询与统计，但遇到需要变更组件模型时，需要付出极大的代价。非结构化数据无需预先明确定义组件模型，在变更组件模型时非常灵活方便，但是对组件进行修改、查询与统计时效率很低。二者均存在开发过程复杂繁琐、费时费力，开发成果可复用性差等问题；且在组件交互方面功能弱势，无法满足组件联动、组件下钻、多屏联动等专业交互需求，对于多终端展示需求，需要重新开发，无法做到一源多端，一键迁移。

针对上述技术的一些缺陷，本发明提供的数据可视化展示制作系统，可装载于数字城市驾驶舱，通过采用半结构化数据存储组件模型，既能够快速实现组件修改、查询与统计，又能够灵活更新改变组件模型定义，方便后端做操作和保存，也让前端可以随意改属性；能够设计适用于多终端的交互式数据可视化展示，通过将各类组件进行封装，以响应式交互方式配置大屏界面与数据，个人计算机(Personal Computer，PC)屏、大屏、移动端，多端同源，组件复用，一键迁移。

下面结合图1至图4描述本发明的实施例所提供的数据可视化展示制作系统。

图1是本发明提供的数据可视化展示制作系统的结构示意图，如图1所示，包括但不限于：

配置单元101、解析单元102和存储单元103；

所述配置单元101，用于对多个组件模型进行配置，确定每个组件模型的配置信息；

所述解析单元102，用于对所述配置信息进行解析，获取解析结果，并基于画布，对所述解析结果进行渲染，生成目标前端对应的前端作品；

所述存储单元103，用于将组件模型以半结构化数据的形式进行存储。

配置单元101还用于存储组件模型的配置信息，配置信息包括：组件配置信息和图层配置信息。

配置信息可以包括组件模型的布局、位置、样式、数据源、交互事件、组件规范等。组件规范用于对组件的设计规范、风格样式进行约定，以及对组件的接口和事件进行规范。

对每个组件模型建立一个图层，通过控制图层次序，进而控制组件布局顺序，支持多类型数据源接入、配置式交互联动。能够适用于PC端、超大屏和移动端等多个终端之间的交互和数据展示。

解析单元102将组件配置数据解析并在画布上渲染组件样式，实现数据可视化展示。

本发明提供的数据可视化展示制作系统，通过利用半结构化数据形式的组件模型，实现了数据可视化前端作品的快速搭建、调试和发布，提高了数据可视化展示系统的搭建效率，有效降低了系统使用门槛。

可选地，所述存储单元，还用于存储所述前端作品。

可选地，所述数据可视化展示制作系统还包括封装单元，具体用于：

从引入的多个组件库中，提取多个组件的公共属性进行封装；

对所述多个组件中的每个组件引入已封装的公共属性，并进行独立封装，获取多个封装组件；

构建每个封装组件对应的组件模型，以获取多个组件模型。

引入的组件库可以包括：图表、地图、素材、媒体等组件库。

组件包括但不限于图表、平面地图、三维地图、表格、页面、文字、图片、媒体、轮播列表、选项卡等。

其中，对组件公有的属性进行封装，每个组件引入已封装的公共属性后再次进行独立封装，，以JSON数据形式声明组件属性，设置封装的组件的基本属性、展现形式、基础数据，并预设一些图形的样式。通过对组件进行封装，能够更加便捷、快速的进行业务功能的开发。

每个组件模型通过版本升级更新，动态拓展组件模型配置内容。

数据源包括静态数据源、应用程序接口(Application Programming Interface，API)数据源，以及数据库数据源，约定数据源采用分散式配置形式。

组件模型之间交互联动，定义触发事件、传递参数、参数映射的组件字段、目标组件动作等，目标组件接收参数，即可实现组件间的联动。

交互类组件中的选项卡，可通过传递不同的参数值实现图表、素材、页面等其他类型组件的切换显示。文字类组件也可通过点击事件实现打开新页面、弹窗等动作。

数据可视化展示制作系统通过拖拽的方式，在画布上直接操作这些已封装的组件模型，提供一些界面化的属性配置，并使用图层控制多个组件模型的布局顺序，使普通用户也可以实现这样的画布设计，省时省力；还可以将设计好的前端作品收藏和保存在存储单元，已生成的前端作品可设为模板，便于重复使用。

数据可视化展示制作系统将前端作品分为PC端大屏和移动端大屏，以更好的适应不同终端，PC端大屏采用绝对定位，指定位置和长宽单位，统一使用像素，使用图层顺序控制各个组件模型的层叠关系。移动端大屏采用弹性布局，将容器平铺于画布中，组件模型置于容器内，容器和组件模型根据布局大小调整自身尺寸。

可选地，所述数据可视化展示制作系统还包括：

构建单元，用于构建可视化引擎；

所述可视化引擎，用于根据所述目标组件模型，以及每个目标组件模型之间的图层关系，调用组件模型关联的数据源获取数据，以渲染前端作品。

可选地，所述数据可视化展示制作系统还包括：

监听单元，用于监听所述画布上每个目标组件模型的配置信息，在所述配置信息变化的情况下，将所述每个目标组件模型的新的配置信息发送至解析单元。

通过数据可视化展示制作系统制作前端作品可以节省90％以上的人力与时间成本，配置一张分辨率为3840×2160的前端作品，只需单人半小时左右，极大地节省了人力成本；操作者无需精通各类专业技术，学习成本低，即使是零编程基础，也可通过简单的拖拽操作，在配置面板上调整组件的样式、数据源、联动交互等步骤，完成前端作品制作，操作简单、门槛低。

在数据可视化展示制作系统中，使用一键发布功能，复制链接即可实现前端作品访问，更加便捷。使用数据可视化展示制作系统制作的前端作品，可以深度还原UI设计，多屏幕适应，包括移动端，不受硬件载体的限制，适用范围更广。

所有的组件模型都需要进行属性配置、数据源配置和交互配置。

图2是本发明提供的组件模型的属性配置方法的流程示意图，如图2所示，包括：

首先，创建画布。

进一步地，在存储单元选择目标组件模型，并记录目标组件模型的图层配置信息。

进一步地，修改目标组件模型的配置组件属性；目标组件模型为初始化的模型，有一些固定的样式和数据，做可视的前端作品时，在通过拖拽创建一个组件实例之后，会根据设计元素的不同，需要对配置组件属性进行一些修改，进而展现出一些不一样的渲染方式，和不同的数据来源。

进一步地，监听器监听组件配置信息与图层配置信息。

组件模型中属性配置的数据都是用字符等程序语言表达，但是需要将数据形式转换成可视化并反应在可视化的画布上，呈现出一种变化的状态，例如：颜色的变化，或是字体的更换，或是字号的改变。这种变化的呈现是通过渲染实现的。

因此需要记录界面上的一些操作行为，与组件模型中组件的基础属性进行对比，在目标组件模型的组件配置信息或是图层配置信息发生变化的情况下，同步刷新画布上的渲染。

进一步地，在目标组件模型的组件配置信息与图层配置信息均无变化的情况下，监听器继续监听组件配置信息与图层配置信息；在组件配置信息或图层配置信息有变化的情况下，将组件配置信息和图层配置信息存入存储单元103。

在组件封装完成之后，配置面板上会开放一些组件的属性设置，比如输入文字或者进行选择，可以完成属性的配置修改，监听器会对修改的过程进行监听，如果配置信息发生了变化，会把修改后的配置信息存入存储单元里对应的数据库中。

进一步地，根据前端作品的身份标识号(Identity Document，ID)查找组件模型和组件模型对应的图层配置信息。

在画布上操作组件模型时，会存在多个组件模型放在同一个位置的情况，由于组件之间有一个层叠的次序，此时，每一个组件作为一个图层，利用图层次序控制组件的叠放次序，次序越靠前，组件位于越顶部，这样不会被次序靠后的组件遮挡。

进一步地，前端作品根据图层次序读取组件配置信息。

进一步地，解析器根据组件配置渲染组件样式。

解析器从存储单元的数据库中取到这些组件配置信息，并放到前端作品上做渲染，进行图形化的数据变化展示。

进一步地，完成画布设计，最终形成前端作品。

图3是本发明提供的数据可视化展示制作系统的工作原理示意图，如图3所示，包括：画布的设计和画布的渲染。

组件模型中的每个图表都可能有不同的数据来源，需要对每个组件模型进行数据源配置；组件模型与组件模型之间可能存在联动的需求，例如，在点击某一个组件模型的情况下，另一个组件模型的图形会随之切换，需要对一部分组件模型之间进行交互配置。组件模型可以包括：图表组件、地图组件、文字组件、表格组件、多媒体组件，以及轮播组件等。

由于组件模型初始化的时候，数据源都是一些静态的数据，数据形式为JSON会存储在每个组件模型的配置文件中。

当在画布上创建一个组件实例，比如：拖拽一个组件模型出来，展示一些动态的数据变化，若数据来源于数据库，则需要对组件模型配置一个数据源，将数据库连接池的信息放入数据管理单元，进而将数据库的连接信息关联至这个组件模型，并选择对应的数据库表，确定结构化查询语言(Structured Query Language，SQL)语句，将数据实时传回至组件模型，组件模型最终可以展示对应的查询结果。

此外，利用API地址参数，可以实现远程API调用。

交互配置包括点击事件、change事件和回调事件。在组件模型的交互配置中，例如常用的选项卡有内容切换的功能，点击不同的选项，基于组件模型之间的交互联动，画布上可以实现另一个组件模型的内容切换展示。

全局交互变量paraX是一个变量参数，作为两个组件模型之间的桥梁，用于组件模型之间数据的交互。

组件模型之间的交互联动，需要在这两个组件模型之间设置一个全局交互变量paraX，全局交互变量paraX用于接收选项卡传递出来的参数，被联动的组件引用变量paraX，这样通过组件与组件之间的参数传递，就能够实现内容的切换。

选项卡在点击选项进行内容切换时，被点击的选项发生了状态变化，此时，需要接收回调事件，即选项状态变化，当被联动的组件模型完成内容切换时，回调业务模块会把这个回调事件传回给触发交互的选项卡，选项卡在接收到这个回调事件后，选项状态也随之发生变化。

在完成属性配置、数据源配置果和交互配置之后，需要进行画布渲染。

监听单元的监听器需要对组件配置信息以及所有的全局交互变量进行监听，再对组件的ajax数据渲染，画布渲染完成。

图4是本发明提供的前端作品生成方法的流程示意图，如图4所示，包括：

PC、大屏、APP等业务应用前端通过统一资源定位符(Uniform Resource Locator，URL)将请求发送至数据可视化展示制作系统，请求可以包括服务路径、作品序号和访问密钥。其中，作品序号为每个前端作品的编号。

数据可视化展示制作系统包括：分组管理单元、设计器、设计模板、数据源管理和访问控制。

可选地，所述数据可视化展示制作系统还包括：

分组管理单元，根据所述目标前端的前端类型，对前端作品进行分组。

分组管理单元根据前端类型对前端作品和设计模板进行分组，便于管理。

可选地，所述数据可视化展示制作系统还包括：

设计单元，用于根据所述目标前端的前端类型，确定所述目标前端对应的设计器；

所述设计器，用于：

从所述组件模型中确定多个目标组件模型；

对所述多个目标组件模型进行配置。

可选地，所述设计器，具体用于：

根据所述前端作品的作品需求，对所述多个目标组件模型进行属性配置；

并根据每个目标组件模型的数据来源，对所述多个目标组件模型数据源配置；

并根据每个组件之间的交互联动，对所述多个目标组件模型交互配置。

为了快速创建一个画布，会预制一些设计模板，包括预设的组件模型和组件样式，存入至存储单元的数据库，在使用时可以直接套用模板创建一个画布。

可选地，所述数据可视化展示制作系统还包括：

数据源管理单元，用于储存所述目标组件模型的数据库连接池。

由于组件模型可能会配置一些数据源，比如数据库、API和数据集等，此时需要数据源管理单元对系统里所有的用到的数据源进行统一的管理，数据源管理单元中存储一些数据库连接池信息。

可选地，所述数据可视化展示制作系统还包括：

访问控制单元，用于根据所述目标前端发送的访问密钥，将所述前端作品发送至所述目标前端。

数据可视化展示制作系统在做出前端作品之后，处于安全的考虑，访问控制单元会对生成的前端作品进行权限的控制。

PC作品可以放到PC端的系统里，大屏作品可以在会展中心的大屏上投屏显示，移动端作品可以嵌入到移动端。

所有的前端作品均存至存储单元的业务库/中间库。

一些外部页面可以通过调取业务接口，将前端作品嵌入页面。

根据本发明提供的数据可视化展示制作系统，对各组件进行封装数据化，以JSON数据的形式描述组件，以组件模型为核心，辅以配置单元、解析单元、监听单元，实现前端作品的配置和展示。在系统中将组件写入配置文件，每个前端作品中的组件都有独立的模型，监听单元实时监听模型的配置信息并与已有配置进行对比，如发现差异，则调用配置单元，将界面操作写入对应的组件模型，解析单元用于模型渲染实现前端作品的展示。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种数据可视化展示制作系统，其特征在于，包括：配置单元、解析单元和存储单元；

所述配置单元，用于对多个组件模型进行配置，确定每个组件模型的配置信息；

所述解析单元，用于对所述配置信息进行解析，获取解析结果，并基于画布，对所述解析结果进行渲染，生成目标前端对应的前端作品；

所述存储单元，用于将组件模型以半结构化数据的形式进行存储。

2.根据权利要求1所述的数据可视化展示制作系统，其特征在于，所述系统还包括：封装单元；

所述封装单元，具体用于：

从引入的多个组件库中，提取多个组件的公共属性进行封装；

对所述多个组件中的每个组件引入已封装的公共属性，并进行独立封装，获取多个封装组件；

构建每个封装组件对应的组件模型，以获取多个组件模型。

3.根据权利要求1所述的数据可视化展示制作系统，其特征在于，所述系统还包括：

设计单元，用于根据所述目标前端的前端类型，确定所述目标前端对应的设计器；

所述设计器，用于从所述组件模型中确定多个目标组件模型；

对所述多个目标组件模型进行配置。

4.根据权利要求3所述的数据可视化展示制作系统，其特征在于，所述设计器，具体用于：

根据所述前端作品的作品需求，对所述多个目标组件模型进行属性配置；

并根据每个目标组件模型的数据来源，对所述多个目标组件模型数据源配置；

并根据每个组件之间的交互联动，对所述多个目标组件模型交互配置。

5.根据权利要求4所述的数据可视化展示制作系统，其特征在于，所述系统还包括：

构建单元，用于构建可视化引擎；

所述可视化引擎，用于根据所述目标组件模型，以及每个目标组件模型之间的图层关系，调用组件模型关联的数据源获取数据，以渲染前端作品。

6.根据权利要求3所述的数据可视化展示制作系统，其特征在于，所述系统还包括：

监听单元，用于监听所述画布上每个目标组件模型的配置变化，在所述配置信息变化的情况下，将所述每个目标组件模型的新的配置信息发送至解析单元。

7.根据权利要求6所述的数据可视化展示制作系统，其特征在于，所述系统还包括：

图层控制单元，用于控制所述画布上多个目标组件模型的布局顺序，以使用所述布局顺序控制所述多个目标组件模型的层叠次序。

8.根据权利要求3所述的数据可视化展示制作系统，其特征在于，所述系统还包括：

分组管理单元，根据所述目标前端的前端类型，对所述前端作品进行分组。

9.根据权利要求3所述的数据可视化展示制作系统，其特征在于，所述系统还包括：

数据源管理单元，用于储存所述目标组件模型的数据库连接池；

所述存储单元，还用于存储所述前端作品。

10.根据权利要求1至9中任一项所述的数据可视化展示制作系统，其特征在于，所述系统还包括：

访问控制单元，用于根据所述目标前端发送的访问密钥，将所述前端作品发送至所述目标前端。

Images