FVS級聯選擇元件

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

1.1 版本

1.2 功能简介

「级联选择」控件在模板预览时，支持按照层级关联关系逐级选择选项，适用于数据量小且层级不深的场景，例如地址选择（省份>城市>区县），还可以通过参数联动其他组件，实现数据的层级化筛选与交互。如下图所示：

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

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

2.1 控件内容

级联选择控件可设置的内容如下图所示：

各设置项的详细介绍如下表所示：

2.2 控件交互事件

点击「交互>添加事件」，可添加 JavaScript 事件实现更多效果。级联选择控件支持「初始化后事件」和「编辑结束事件」。如下图所示：

点击具体的某一个事件，会弹出 JavaScript 事件设置框。如下图所示：

注：关于 FVS 支持的 JavaScript 可参考文档 FVS支持的JS接口场景 。

3.1 新建模板

点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义名称和尺寸。如下图所示：

3.2 准备数据

本例使用 极速分层构建 方式。

新建数据集 ds1，SQL 语句为：SELECT 货主地区,货主省份,货主城市 FROM S订单 where 货主城市!='' ，作为级联选择控件的数据字典使用。

新建数据集 ds2：SELECT * FROM S订单 ${if(len(area)=0,"","where 货主城市 = '" + area + "'")} 。

步骤如下图所示：

3.3 设计级联选择控件

3.3.1 添加组件

点击组件区「控件>级联选择」，将其添加到画布中，将绑定参数设置为「area」，即 ds2 中设置的数据集参数。如下图所示：

3.3.2 设置选项值来源

1）打开「选项值来源」设置框，构建方式默认为「极速分层构建」，点击加号添加层次。如下图所示：

2）选择每层对应的值，并且设置相应的依赖层次和依赖字段，分别如下图所示：

3.4 设计表格组件

3.4.1 添加组件

点击组件区「文字>表格」，将其添加到画布，点击「编辑组件」进入表格编辑界面。如下图所示：

3.4.2 设计表格内容

将对应字段拖入单元格即可，可自行调整单元格格式。如下图所示：

点击「返回可视化看板」返回画布。

3.5 效果预览

3.5.1 PC 端

点击右上角「保存」，点击「预览」，效果如 1.2 节所示。

3.5.2 移动端

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

注1：移动端支持使用搜索框，支持进行模糊搜索。

注2：移动端中「确定」以及选中的选项字体颜色可在模板主题样式中的「控件>高亮色」进行设置。

点击下载模板：級聯選擇元件.fvs