开源数据可视化开发平台 FlyFish 数据源应用教程详解

2023-05-26
北京
本文字数：3345 字
阅读完需：约 11 分钟

介绍

飞鱼（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 抽取，点击定义字段下面的添加按钮，看到如下弹窗：