FVS扩展组件

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。

1.1 版本

1.2 应用场景

「扩展组件」结合标题组件或富文本组件的 动态值 功能，可根据数据集字段动态生成一系列指标卡，每个指标卡展示不同的数据。

1.3 功能简介

「扩展组件」是一种容器，当前仅支持拖入「标题、富文本和图片」三种组件以及由这三种组件组成的组合。

拖入组件后，根据「扩展依据」进行扩展（扩展依据必须是动态值中的字段来源），实现快速生成多个组件。

注：本文仅为大家介绍「扩展组件」特有功能，其他属性不赘述。

扩展组件不支持组件交互事件。

组件动画请参见：FVS组件动画 。

组件属性请参见：FVS组件样式属性 。

2.1 添加扩展组件

点击或拖拽组件区「容器>扩展组件」，即可将扩展组件添加到画布中。

2.2 扩展模板

扩展组件中存在一个预设的「扩展模板」，用于承载组件/组合。

一个扩展组件仅有一个「扩展模板」，不支持增加，删除即连同扩展组件一起删除。

1）拖入组件/组合规则如下：

• 仅支持拖入标题、富文本、图片组件，以及这三种组件组成的组合。
  

• 直接拖拽组件区或页面中组件/组合到「扩展模板」上方，出现提示「释放进入扩展模板」时松开鼠标即可。

• 拖入组件/组合时，组件/组合大小不变。

• 释放时，组件位置若超出扩展模板左/上边界，则组件拖入后自动对齐左/上边界；其余位置则以组件释放位置为准。

• 若组件超出扩展模板右/下边界，则截断显示。

如下图所示：

• 也支持在组件图层列表中，拖拽组件图层顺序移入扩展模板，组件位置默认在扩展模板中心位置。如下图所示：

2）移出组件/组合方式如下：

• 直接拖拽组件到扩展组件外，出现提示「释放移出扩展模板」时松开鼠标即可。此时移出的组件位置以释放位置为准。

• 在组件图层列表或扩展组件列表中，直接拖拽组件图层顺序移出扩展组件层级即可。此时移出的组件位置保持不变。

• 在扩展组件列表中，悬浮组件，点击「更多>移出」即可 。此时移出的组件默认显示在扩展组件右侧。

如下图所示：

3）「扩展模板」支持设置名称、大小。启用调整锁定时，调整扩展模板大小，内部组件大小也会等比例变化。

注：扩展模板拖拽大小仅支持从右/下方拖拽。

2.3 扩展组件内容设置

扩展组件支持设置布局方式、组件间距和扩展依据。

1）布局方式：支持选择「固定列数」或「固定行数」，根据「扩展模板」大小显示，超出扩展组件大小时，可滚动查看。

2）组件间距：支持分别设置「行距」和「列距」。

3）扩展依据：

• 提供基于当前扩展组件内「动态值」来源表作为选择；若当前扩展组件没有可用的数据集，提示暂无数据。

• 设置扩展依据后，根据数据集的数据条数定义扩展的组件数量，含有该数据集的动态值，根据扩展顺序依次按行取值。

• 无动态值或动态值为公式的组件，扩展时内容不变；动态值为数据集字段，但不符合扩展依据的组件，按照扩展的组件数量依次取值。

• 设置过扩展依据，即使后续扩展组件内不再包含该依据，之前设置的扩展也不受影响，直到重新选择扩展依据。

注：扩展出的组件没有实体，但仍然继承扩展模板内组件的所有交互能力。

3.1 新建模板

1）在 FineReport 设计器左上角点击「文件>新建可视化看板」。

2）在「创建空白看板」Tab 中，可自定义模板名称、画布大小，以及选择模板样式。

3）点击「创建看板」。

3.2 准备数据

添加数据库查询 ds1，输入 SQL 查询语句：SELECT 产品,sum(销量) as 销量 FROM 销量 group by 产品 。

SQL 的意思为：按照产品分组，求出每个产品的销量总和，然后返回每个产品的名称以及该产品的销量总和。

3.3 设计指标卡

3.3.1 制作指标卡背景

1）点击组件区「媒体>图片」，将图片组件添加到画布中。

2）将下面这张图片另存到本地。

3）选中图片组件，图片类型选择「自定义上传」，上传保存的图片，选择该图片作为指标卡背景。

3.3.2 设置产品名称动态值

1）点击组件区「文字>标题」，将标题组件添加到画布中，根据指标卡背景设置合适的位置和大小。

2）标题内容选择「动态值」，点击「编辑动态值」按钮，弹出「编辑动态值」界面。

3）动态值来源为「数据集」，选择 ds1 数据集，产品字段。

4）点击「确定」完成编辑。根据实际情况自行设置内容样式，例如字体、颜色等等。

3.3.3 设置产品销量动态值

1）复制粘贴 3.3.2 节设置好的标题组件，点击「编辑动态值」，弹出「编辑动态值」界面。

2）将字段修改为「销量」。

3）添加「条件样式」，点击「条件设置」，设置条件为「值小于字符串 2000」，点击「确定」。

4）条件样式修改颜色为红色。最后点击「确定」。

3.3.4 组合组件

在画布中框选制作好的组件，点击画布上方工具栏的「组合」按钮，将其组合为一个分组。

3.4 设置指标卡扩展

1）点击组件区「容器>扩展组件」，将扩展组件添加到画布中。

2）选中组合，拖入扩展组件的「扩展模板」中。

3）选中「扩展模板」，根据内容调节模板大小。

4）选中「扩展组件」，布局方式为固定列数 2 列，扩展依据选择数据集 ds1 。

此时可以看到扩展出了 5 个不同内容的指标卡，且产品销量小于 2000 时，值显示为红色。

3.5 效果预览

3.5.1 PC 端

保存模板，点击「预览」。效果如下图所示：

3.5.2 移动端

预览方式请参考 FVS移动端预览 ，效果如下图所示：

点击下载模板：FVS实现扩展指标卡.fvs