1. 概述
适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FVS 模板的相关功能。
1.1 版本
报表服务器版本 | 插件版本 |
---|---|
11.0.9 | V1.9.1 |
1.2 预期效果
在制作可视化看板时,希望 Tab 页切换时,可实现与表格的数据联动。如下图所示:
1.3 实现思路
通过 JS 获取 Tab 页的标题索引,判断索引值对应的参数值,再通过 refresh 接口传参刷新组件,实现联动效果。
2. 示例
2.1 准备数据
点击设计器左上角「文件>新建可视化看板」,创建一张空白看板。新建数据库查询 ds1,输出 SQL 查询语句:SELECT * FROM 地图 。
2.2 设计 Tab 组件
1)新增一个 Tab 组件,再添加两个标签页,向每个标签页中均拖入一个区域地图。如下图所示:
2)在右侧 Tab 列表中分别选中地图,分别设置地图边界为「江苏省、山东省、浙江省」,GIS图层均设置为「标准>标准」。
如下图所示:
注:本文主要演示 Tab 切换时的联动,所以这里地图无需绑定数据。
3)将标签页也分别重命名为「江苏省、山东省、浙江省」,再设置 Tab 栏按钮布局为「等分布局」。如下图所示:
2.3 添加模板参数
为了实现联动,需添加一个模板参数。
点击「模板>模板参数」,新增一个参数并重命名为 area ,设置默认值为「江苏省」,对应第一个 Tab 页面中的地图边界。
2.4 设计表格
1)拖入一个表格组件,并调整其大小和位置,点击右侧「编辑组件」进入编辑界面。如下图所示:
2)将 pid 、销售额字段分别拖入 A1、A2 单元格,并设置其字体、大小、颜色等。
再选中 A2 单元格,设置销售额的「数据设置」为「汇总>求和」,左父格设置为「自定义> A1 」。
如下图所示:
3)双击 A1 单元格,设置过滤条件为 pid 等于参数 $area ,则会根据参数过滤显示数据。如下图所示:
2.5 添加事件
选中 Tab 组件,将轮播间隔时间设置为 3000 毫秒,添加一个 JavaScript 标签切换事件。输入 JavaScript 代码如下:
var a = duchamp.getWidgetByName("Tab1_页面1").getShowIndex(); //获取Tab当前页索引
if(a==0){
area='江苏省';
}
else if(a==1){
area='山东省';
}
else if(a==2){
area='浙江省';
}
duchamp.getWidgetByName("表格1_页面1").refresh({area:area}); //传参给表格组件并刷新
如下图所示:
2.6 效果预览
2.6.1 PC 端
点击模板右上角「保存」按钮,再点击「预览」。预览后的效果如 1.2 节所示。
2.6.2 移动端
预览方式请参考 FVS移动端预览 ,效果如下图所示:
3. 模板下载
点击下载模板:JS实现Tab切换时数据联动.fvs