一种数据大屏可视化组件的动态数据绑定方法及系统

摘要

本发明公开一种数据大屏可视化组件的动态数据绑定方法及系统，所述方法包括：为可视化组件配置数据库链接并测试；选择配置成功的数据库，通过sql语句关联表查询数据以进行视图配置，得到视图数据；选择可视化组件，为可视化组件绑定静态数据、api数据，基于可视化组件的数据结构封装数据结构配置组件，基于数据结构配置组件绑定视图数据。本发明可实现可视化组件的动态数据绑定，自由度高、复用性好。

说明书

技术领域

本发明属于数据可视化领域，主要涉及数据大屏组件动态数据绑定方法及 系统。

背景技术

数据可视化主要借助图形化组件的手段，清晰有效的传达与沟通信息。而 传统的数据大屏中，组件展示的数据都是通过输入绑定静态数据，这样的数据 没有时效性，无可配置性，参考价值不高，可复用性不高，提供一种可以由用 户根据自身需要和关注数据维度而自由配置展示的动态数据、已经成为了一个 迫切需要解决的问题。

发明内容

有鉴于此，本发明提出了一种数据大屏可视化组件的动态数据绑定方法， 用于解决数据大屏可视化组件无法绑定动态数据的问题。

本发明第一方面，公开一种数据大屏可视化组件的动态数据绑定方法，所 述方法包括：

为可视化组件配置数据库链接并测试；

选择配置成功的数据库，通过sql语句关联表查询数据以进行视图配置，得 到视图数据；

选择可视化组件，为可视化组件绑定静态数据、api数据和视图数据。

优选的，其特征在于，所述绑定静态数据具体包括：

静态输入数据是否满足所选组件的数据格式，若满足则直接输入；

如果数据格式不支持所选组件，通过一个数据处理函数进行格式转换，得 到满足所选组件格式的数据并输入。

优选的，所述绑定api数据具体包括：

填写api地址，后台封装的axios发起api请求获取满足所选组件格式的数 据；

如果数据格式不支持所选组件，通过一个数据处理函数进行格式转换，得 到满足所选组件格式的数据并输入；

配置数据刷新频率。

优选的，所述绑定视图数据具体包括：

解析所有可视化组件的数据格式，将可视化组件按照不同的数据结构分类；

基于不同的数据结构类别，将各个可视化组件封装成不同的数据结构配置 组件；

配置数据刷新频率。

优选的，所述可视化组件包括但不限于柱状图，折线图，雷达图，扇形图， 表格。

优选的，可视化组件与封装成的数据结构配置组件的对应关系为一对一或 者多对一。

优选的，用户选择可视化组件时，所选可视化组件将自动匹配相应的数据 结构配置组件，基于配置的数据刷新频率实时的从数据库中获取最新的数据。

本发明第二方面，公开一种数据大屏可视化组件的动态数据绑定系统，所 述系统包括：

数据链接模块：为可视化组件配置数据库链接并测试；

视图配置模块：选择配置成功的数据库，通过sql语句关联表查询数据以进 行视图配置，得到视图数据；

数据绑定模块：选择可视化组件，为可视化组件绑定静态数据、api数据和 视图数据，配置相应的数据刷新频率并保存。

优选的，所述视图配置模块具体包括：

静态数据绑定单元：用于判断静态输入数据是否满足所选组件的数据格式， 若满足则直接输入；如果数据格式不支持所选组件，通过一个数据处理函数进 行格式转换，得到满足所选组件格式的数据并输入。

api数据绑定单元：用于填写api地址，后台封装的axios发起api请求获取 满足所选组件格式的数据；如果数据格式不支持所选组件，通过一个数据处理 函数进行格式转换，得到满足所选组件格式的数据并输入，配置数据刷新频率；

视图数据绑定单元：用于解析所有可视化组件的数据格式，将可视化组件 按照不同的数据结构分类；基于不同的数据结构类别，将各个可视化组件封装 成不同的数据结构配置组件，配置数据刷新频率。

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

1)本发明通过一个数据处理函数对数据绑定过程中不满足所选可视化数据 组件的格式要求的静态数据、api数据进行格式转换，可适应不同的数据格式， 扩大了使用范围；

2)针对不同组件所需要的数据格式做解析，封装成不同的数据配置组件， 实现可视化组件的动态数据绑定，用户选择组件数据源的时候不需要关注数据 格式，只需要关注自身需要的数据维度和指标即可，也不用程序员根据不同的 需求去开发不同的api，用户可以根据自己的业务需求，通过SQL语句就能得到 自己关注的数据，自由度高、复用性好。

附图说明

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

图1为本发明的数据大屏可视化组件的动态数据绑定方法流程示意图；

图2为本发明静态数据、api数据、动态数据绑定流程示意图；

图3为本发明可视化组件与数据结构配置组件的对应关系示意图。

具体实施方式

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

请参阅1，本发明提出一种数据大屏可视化组件的动态数据绑定方法，所述 方法包括：

S1、为可视化组件配置数据库链接并测试；

具体的，在数据大屏的数据库配置功能界面，配置数据库链接，配置后点 击测试，弹出链接成功说明数据库链接成功

S2、选择配置成功的数据库，通过sql语句关联表查询数据以进行视图配置， 得到视图数据；

具体的，在视图配置功能界面，选择配置成功的数据库，查询出该数据库 下所有的表，根据自身业务需求，通过sql语句关联表查询数据，获取sql的查 询结果，给该视图取一个名称，然后点击保存。

S3、选择可视化组件，为可视化组件绑定静态数据、api数据和视图数据；

在大屏管理功能界面，新建大屏时，选择大屏提供的可视化组件可查看/配 置可视化组件数据绑定的数据源类别，所述数据源类别包括静态数据、api数 据、视图数据，其中绑定api数据、视图数据都属于本发明所述绑定动态数 据。

图2分别为本发明静态数据、api数据、动态数据绑定流程示意图，其具体 步骤包括：

S31、所述绑定静态数据具体包括：

静态输入数据是否满足所选组件的数据格式，若是没直接输入；

如果数据格式不支持所选组件，通过一个数据处理函数进行格式转换，得 到满足所选组件格式的数据并输入。

S32、所述绑定api数据具体包括：

填写api地址，后台封装的axios发起api请求获取满足所选组件格式的数 据；

如果数据格式不支持所选组件，通过一个数据处理函数进行格式转换，得 到满足所选组件格式的数据并输入；

配置数据刷新频率，可以实时调用api获取数据库中最新数据。

S33、所述绑定视图数据具体包括：

解析所有可视化组件的数据格式，所述可视化组件包括但不限于柱状图， 折线图，雷达图，扇形图，表格，不同的可视化组件数据结构可能相同或不同， 将可视化组件按照不同的数据结构分类；

基于不同的数据结构类别，将各个可视化组件封装成不同的数据结构配置 组件，配置数据刷新频率。

请参阅图3，所述可视化组件与封装成的数据结构配置组件的对应关系为一 对一或者多对一，比如：

折线图，柱状图，象形图所需要的数据结构都是：

雷达图组件数据类型：

pie:饼图，table:表格，翻牌器，wordCloud:字符云，pictorialBar:象形图，swiper: 轮播图，funnel:漏斗图，flop:颜色块，tabs:选项卡，这些组件的数据类型都是：

将相同数据类型组件封装成一个数据配置组件，数据配置组件会将所有的 数据转化成指标和/或维度，转化的指标和维度是基于数据格式来做解析的，不 同的数据配置组件的指标和维度的数据格式不同，在该数据配置组件的维度和 指标中，用户根据需要选择自身关心的维度和指标，所述维度、指标均可多选。

用户选择可视化组件时，所选可视化组件将自动匹配相应的数据结构配置 组件，基于配置的数据刷新频率实时的从数据库中获取最新的数据。

与所述方法实施例相对应，本发明还提出一种数据大屏可视化组件的动态 数据绑定系统，所述系统包括：

数据链接模块：为可视化组件配置数据库链接并测试；

视图配置模块：选择配置成功的数据库，通过sql语句关联表查询数据以进 行视图配置，得到视图数据；

数据绑定模块：选择可视化组件，为可视化组件绑定静态数据、api数据和 视图数据，配置相应的数据刷新频率并保存。

所述数据绑定模块具体包括：

静态数据绑定单元：用于判断静态输入数据是否满足所选组件的数据格式， 若满足则直接输入；如果数据格式不支持所选组件，通过一个数据处理函数进 行格式转换，得到满足所选组件格式的数据并输入。

api数据绑定单元：用于填写api地址，后台封装的axios发起api请求获取 满足所选组件格式的数据；如果数据格式不支持所选组件，通过一个数据处理 函数进行格式转换，得到满足所选组件格式的数据并输入，配置数据刷新频率；

视图数据绑定单元：用于解析所有可视化组件的数据格式，将可视化组件 按照不同的数据结构分类；基于不同的数据结构类别，将各个可视化组件封装 成不同的数据结构配置组件，配置数据刷新频率。

所述方法实施例和系统实施例是对应的，系统实施例简述之处请参阅方法 实施例即可。

以上所述仅为本发明的较佳实施方式而已，并不用以限制本发明，凡在本 发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本 发明的保护范围之内。