关于大前端:开源数据可视化开发平台FlyFish数据源应用教程详解

介绍

飞鱼（FlyFish）是云智慧开源的一款收费的数据可视化编排平台。通过繁难的形式疾速创立数据模型，通过利落拽的模式，疾速生成一套数据可视化解决方案。在飞鱼产品中能够通过间接连贯 MySQL、Oracle 等数据库间接从数据源中获取数据展现在可视化利用上，本文旨在为读者形容如何从数据源连贯到数据展现在利用的步骤。

数据源类型

飞鱼（FlyFish）目前反对的数据源类型有如下几种。其中 MySQL、Postgres、ClickHouse、MariaDB、SqlServer、达梦、Oracle 均为数据库，能够间接写 sql 获取数据。http 数据源能够填写申请门路参数等信息，最终对返回的 json 构造做解决反对利用展现。

数据库类型数据

本篇文章以 MySQL 数据源为例，详细描述一下数据库类的数据源解决流程。

数据源创立

首先点击数据源治理页面的新建按钮，能够看到如下页面：

选中 MySQL 数据源类型，而后填写对应信息，其中具体信息含意如下：

• 数据源名称：为新创建的数据源命名以便创立胜利后在列表中找到他。
• 连贯地址：填写 MySQL 数据库的连贯地址如图中示例，留神 ip 和端口号以及 db 名称的正确填写。
• 数据库名称：该值不须要填写，会从连贯地址中主动解析。
• 用户名：连贯 MySQL 数据库的用户名。
• 明码：连贯 MySQL 数据库的用户名对应的用户明码。

须要留神的是，因为对于不同的数据库定位到一个 db 所需的配置不同，所以不同的数据库所要填写的值可能不同，例如 Oracle 数据库如果上述内容，还有 Schema 名称须要填写。

信息填写实现之后能够点击链接测试按钮，校验以后 db 是否能够胜利链接。弹出如下图所示内容，则示意胜利链接。

如果弹出如下图，阐明以后 db 并没有连贯胜利，须要查看所填写的信息是否正确，以及是否是网络问题，比方局部用户的 db 只在本人的内网能够拜访。

测试链接胜利后，点击保留数据源按钮保留、设置好的数据源信息。能够点击编辑去更改数据源的信息，以及删除按钮去删除掉不想要的数据源。在列表上看到保留胜利的数据源如下：

数据查问创立

创立好数据源只是、应用数据源的第一步，下一须要通过写 SQL 来获取所需内容。点击侧边栏的数据查问按钮来创立新的数据查问。点击新建根底查问按钮咱们看到如下页面：

如果以后数据源过多，能够输出之前设置好的数据源名称来进行检索。选中之前增加好的数据源，能够看到所有的数据表信息会展现在页面上，如下图所示：

选中想要获取数据的表会跳转到书写 SQL 的页面，并且主动生成全表查问的 SQL 如下图所示：

在这能够去书写想要实现的 SQL 语句，须要留神，这里并不是只限度查问以后选中的表，仍然能够写其余的表名或者做关联查问。此外对于不同类型的数据源须要留神 SQL 语法，比方 MySQL 的语法和 Oracle 的语法就会有区别，须要依据数据源的类型书写能够辨认的 sql 语句。写完 SQL 之后能够点击输出右上角的执行按钮，来执行编写的 SQL 语句，如下图所示：

在输入框上面，能够看到以后 SQL 语句查问返回的数据信息，如果后果和预期不符能够持续更改 SQL 改成本人称心的成果。此外，输入框右上角还有一个设置参数的按钮。该按钮次要是为了解决 SQL 复用问题。举个例子，比方有两张大屏，一张须要 id 字段，另一张须要 name 字段，那么用户是不是须要写两句 SQL 呢？而设置参数就完满解决了这个问题，上面来看一下设置参数如何应用。

如下图可将我本人须要查问的字段设置为一个叫做 param 的参数，即应用 {{}} 将我想要设置的参数包裹起来：

而后点击设置参数按钮，零碎会主动解析须要设置的参数如下图弹窗

在这里设置这个参数的类型为：文本，而后默认值为：id，填写一个形容信息，而后点击确定。当再次点击执行按钮就会应用参数默认值，展现新的后果如下图：

这个参数能够利用于语句的各个中央，查问字段、表名、查问条件等，开发者能够根据集体需要进行变量设置。前面会详细描述如何在大屏上怎么设置此类变量。

当调整好 SQL 语句点击页面右上角的保留，会呈现如下弹窗：

为查问起一个不便记忆的名字，是很好的抉择，以便能够很快找到它。点击确定即保留胜利。此时，在数据查问的列表页，便能够看到新建胜利的数据查问，如下图所示。

点击数据名称能够对数据查问进行编辑，须要留神的是，如果该数据查问曾经利用于大屏组件，如果更改后返回后果与之前不统一，可能导致大屏展现异样。

数据查问的利用

接下来讲一下如何将曾经配置好的数据查问利用于大屏。

从侧边栏点击到利用创立 -> 利用开发，能够新创建一个利用或者在之前的利用中编辑，在利用上点击开发，进入如下开发页面：

以滚动列表图中组件为例。拖动一个滚动列表组件到编辑器而后选中该组件，在右侧边栏选中【数据】，而后在数据类型下拉选中选中【数据查问】，之后在数据查问输入框中输出之前命名好的数据【查问名称】，在搜寻后果中选中它，能够发现之前设置的参数也会同时展现在上面，这个时候就能够去更改参数的值，如下图所示：

上图中能够看到入选中之前创立的数据查问，而后将参数值改为 name，点击利用后就能够看到组件上展现的信息曾经变更为 name 字段的信息。而后进行利用的保留即可。至此实现数据源从配置到利用的全副流程。

http 类型数据

http 数据源辨别于数据库类的数据源增加的时候有本人独自的逻辑。

数据源创立

在数据源列表页面，点击新建按钮而后选中数据源类型为 http 看到如下界面：

字段解释：

• 数据源名称：自定义新增数据源的名称，符合要求即可。
• 数据库名称：定义一个数据库的名称，用于前面的 sql 加工。
• 申请：下拉选抉择申请类型，而后在前面的地址栏填写对应的门路。
• header 申请头：填写该申请的 header 信息。
• 申请参数：填写该申请的参数信息。
• 申请体：填写申请体信息。

全副填写实现后点击保留数据源即可保留胜利。需注意以后数据源在前面数据查问的创立时会被当做一个 db 解决，所以数据库名名称会呈现在 SQL 的查问语句中，这里的命名须要合乎对应的规定。

数据表创立

回到数据源列表页面，找到新建的数据源点击进入数据源详情页面，如下图所示：

点击左下角的新增表格，而后输出自定义的数据表的名称，点击回车即可开始建表。这里能够了解为数据库的建表，便于后续做 SQL 加工建表过程中，会把数据源的 header 及参数信息回显在这里，而后点击执行查问按钮，能够在后果预览中看到申请返回的数据如上图所示。随后能够开始对返回的信息做字段定义来进行 json 抽取，点击定义字段上面的增加按钮，看到如下弹窗：

字段解释：

• 字段名称：定义一个字段名称，能够了解为数据库中的列名，用于后续 sql 加工
• 字段类型：下拉选抉择字段的类型
• 数据抽取：填写 jsonpath 门路，用于提取 json 中的数据。
• 数据预览：在填写 jsonpath 的过程中会实时展现以后 jsonpath 提取到的信息

对于 jsonpath 的具体用法可参考：https://blog.csdn.net/software_test010/article/details/125427926，在数据预览中看到已提取到所需数据之后，点击确定来保留以后字段的设置。提取到所需字段会有相似数据库的行列展现如下图：

图中数据表的展现信息即以后数据表最终拿到的后果，点击保留即可。反复下面步骤能够对同一数据源创立多张数据表，即对返回的后果进行不一样的字段抽取来解决申请复用问题。

数据查问创立

创立数据查问的过程与数据库相似，可参考之前段落。

点击新建数据查问，抉择曾经创立的数据源，以及创立的数据表，而后编写 SQL，如下图：

须要留神的是，这里是不反对连表查问，由 Http 数据源创立的数据表只能在单表中查问。此外，上述应用的是 Spark 的 SQL 语法，底层是应用 Spark 引擎进行 SQL 剖析和解决的，书写 SQL 时须要留神。

设置参数的操作以及如何将数据查问利用在组件上进行展现在上文中曾经形容过，此处不再赘述。

结语

开源数据可视化编排平台 FlyFish 是一款功能强大且易于应用的数据可视化工具，可能帮忙用户将大量的数据转化为直观、易于了解的图表和图形。作为一个全面的数据可视化解决方案，该平台不仅提供了丰盛的可视化选项，还反对多种数据源的利用技术。

至此，置信各位开发者对如何在 FlyFish 平台新增数据源，以及如何在数据源中获取本人想要的数据并利用于组件中，应该有了大抵的理解。心动不如口头，点击下方链接，快来通过 FlyFish 搭建属于本人的一套数据可视化大屏吧！

GitHub 地址： https://github.com/CloudWise-OpenSource/FlyFish

Gitee 地址： https://gitee.com/CloudWise/fly-fish

FlyFish 奉献指南： http://bbs.aiops.cloudwise.com/d/717-flyfish

FlyFish 模版核心： https://www.cloudwise.ai/flyFishComponents.html

微信搜寻 xiaoyuerwise 或扫描辨认下方二维码，备注【飞鱼】退出 AIOps 社区飞鱼开发者交换群，与 FlyFish 我的项目 PMC 面对面交换。