1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 |
|---|---|
| 11.0.22 | V2.7.1 |
1.2 应用场景
「扩展组件」结合标题组件或富文本组件的 动态值 功能，可根据数据集字段动态生成一系列指标卡，每个指标卡展示不同的数据。
1.3 功能简介
「扩展组件」是一种容器，当前仅支持拖入「标题、富文本和图片」三种组件以及由这三种组件组成的组合。
拖入组件后，根据「扩展依据」进行扩展（扩展依据必须是动态值中的字段来源），实现快速生成多个组件。
注：本文仅为大家介绍「扩展组件」特有功能，其他属性不赘述。
扩展组件不支持组件交互事件。
组件动画请参见：FVS组件动画 。
组件属性请参见：FVS组件样式属性 。
2. 功能介绍
2.1 添加扩展组件
点击或拖拽组件区「容器>扩展组件」，即可将扩展组件添加到画布中。
2.2 扩展模板
扩展组件中存在一个预设的「扩展模板」，用于承载组件/组合。
一个扩展组件仅有一个「扩展模板」，不支持增加，删除即连同扩展组件一起删除。
1）拖入组件/组合规则如下：
仅支持拖入标题、富文本、图片组件，以及这三种组件组成的组合。
直接拖拽组件区或页面中组件/组合到「扩展模板」上方，出现提示「释放进入扩展模板」时松开鼠标即可。
拖入组件/组合时，组件/组合大小不变。
释放时，组件位置若超出扩展模板左/上边界，则组件拖入后自动对齐左/上边界；其余位置则以组件释放位置为准。
若组件超出扩展模板右/下边界，则截断显示。
如下图所示：
也支持在组件图层列表中，拖拽组件图层顺序移入扩展模板，组件位置默认在扩展模板中心位置。如下图所示：
2）移出组件/组合方式如下：
直接拖拽组件到扩展组件外，出现提示「释放移出扩展模板」时松开鼠标即可。此时移出的组件位置以释放位置为准。
在组件图层列表或扩展组件列表中，直接拖拽组件图层顺序移出扩展组件层级即可。此时移出的组件位置保持不变。
在扩展组件列表中，悬浮组件，点击「更多>移出」即可 。此时移出的组件默认显示在扩展组件右侧。
如下图所示：
3）「扩展模板」支持设置名称、大小。启用调整锁定时，调整扩展模板大小，内部组件大小也会等比例变化。
注：扩展模板拖拽大小仅支持从右/下方拖拽。
2.3 扩展组件内容设置
扩展组件支持设置布局方式、组件间距和扩展依据。
1）布局方式：支持选择「固定列数」或「固定行数」，根据「扩展模板」大小显示，超出扩展组件大小时，可滚动查看。
2）组件间距：支持分别设置「行距」和「列距」。
3）扩展依据：
提供基于当前扩展组件内「动态值」来源表作为选择；若当前扩展组件没有可用的数据集，提示暂无数据。
设置扩展依据后，根据数据集的数据条数定义扩展的组件数量，含有该数据集的动态值，根据扩展顺序依次按行取值。
无动态值或动态值为公式的组件，扩展时内容不变；动态值为数据集字段，但不符合扩展依据的组件，按照扩展的组件数量依次取值。
设置过扩展依据，即使后续扩展组件内不再包含该依据，之前设置的扩展也不受影响，直到重新选择扩展依据。
注：扩展出的组件没有实体，但仍然继承扩展模板内组件的所有交互能力。
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移动端预览 ，效果如下图所示：
4. 模板下载
点击下载模板：FVS实现扩展指标卡.fvs
