[发明专利]一种前端多数据源可视化配置方法

说明书

本发明公开了一种前端多数据源可视化配置方法，所述方法包括：S1:确定并配置数据源及数据源类型；S2:通过拖拽预置组件形成可视化页面；S3:建立预置组件与数据源之间的联系，当接收到后端数据时通过该关联将对应数据传入组件；S4:前端应用根据不同数据源接口类型以不同方式从后端获取到数据；S5:通过react框架负责监测state的变化，并在前端作出对应的渲染。本前端多数据源可视化配置可以使用户通过文档和相应的配置页面声明式的描述各种可视化组件的位置以及数据，快速的配置可视化分析界面，不需要开发人员介入，极大地减少了可视化应用的开发周期及工作量。

技术领域

本发明涉及数据可视化技术领域，尤其是一种前端多数据源可视化配置方法。

背景技术

随着计算机技术与互联网的不断发展，企业都在基础信息化的应用系统中收集了大量的业务数据，但是这些数据需要大量的人工汇总以及总结才可以得出结果，浪费了大量的人力与时间。

中国专利CN201910853822.7公开了一种基于Json对象进行可视化配置的方法，具体步骤包括：S1、数据源中设置mongodb数据库的连接方式；S2、数据集中选择对应的库表信息，读取第一条信息；S3、对第一条JSON信息进行转化处理，并处理出所有的关键索引信息，并判断每个索引对应字段的类型；S4、按照页面用户选取的索引信息，批量处理，并存入内存数据库中；S5、在可视化界面中，通过动态拖拽，生成动态SQL，从而在内存中查询出数据；S6、根据返回的数据和用户选择的图标样式，生成分析结果，帮助用户分析。所以数据可视化分析可以提高企业数据采集以及数据汇总的时效性以及直观性。但是现有的解决方案和上述专利有着以下缺点：

1、一个可视化分析界面需要前端与后端根据业务需求进行开发工作，工作周期长并且工作量大；

2、大多数可配置化的可视化界面，组件与数据源都是固定的，无法在一个可视化界面上展示多数据源的数据分析也无法指定组件所对应的数据源；

3、展示区域固定，无法动态增加或减少展示区域。

发明内容

为了克服上述现有技术的不足，本发明提供了一种前端多数据源可视化配置方法，从而更加灵活方便的实现前端多数据源可视化配置。

本发明所采用的技术方案是：一种前端多数据源可视化配置方法，所述方法包括：

S1:确定并配置数据源及数据源类型；

S2:通过拖拽预置组件形成可视化页面；

S3:建立预置组件与数据源之间的联系，当接收到后端数据时通过该关联将对应数据传入组件；

S4:前端应用根据不同数据源接口类型以不同方式从后端获取到数据；

S5:通过react框架负责监测state的变化，并在前端作出对应的渲染。

进一步的，所述数据源来自不同数据接口，所述数据接口通过命名空间区分，所述数据源采用分散式配置形式。

进一步的，所述数据源在配置完成后会生成JSON数据，所述JSON数据被存储在client端或数据库中。

进一步的，所述可视化页面在完成后会生成JSON数据，所述JSON数据即可被存储在client端或数据库中。

进一步的，所述预置组件与所述数据源通过所述预置组件的JSON数据与所述数据源的namespace的数据接口所返回的数据的全部或部分建立连接。

进一步的，所述数据源接口类型包括restful json与websocket两种。

进一步的，所述react框架会监测所述预置组件的JSON数据变化，通过插件机制将各个可视化组件动态的注册，最后完成页面渲染。