FVS图表提示轮播联动其他组件

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

1.1 版本

1.2 预期效果

FVS基础图表实现数据点提示轮播 时，希望轮播的同时可以联动其他组件。效果如下图所示：

注：不支持 扩展图表 。

2.1 新建模板

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

2.2 准备数据

在左下方新建两个数据库查询，查询语句分别为：

ds1：SELECT * FROM 地图

ds2：SELECT * FROM 地图 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}

ds2 中的参数 area 是联动的关键，数据点提示轮播时需通过 area 参数传递地区，使图表数据集中 SQL 获取到该地区的数据，可自定义初始值。

2.3 设计模板

2.3.1 添加组件

在组件区找到标题、表格、饼图、区域地图组件，添加到画布中，调整到合适的布局。如下图所示：

2.3.2 绑定图表数据

1）选中区域地图组件，绑定地图数据如下图所示：

2）选中饼图组件，绑定饼图数据如下图所示：

2.3.3 设置标题组件

标题内容输入公式 $area ，则标题会根据参数 area 变化。如下图所示：

2.3.4 设置表格组件

选中表格组件，点击右侧面板「内容>编辑组件」进入编辑界面，将 ds2 数据集中的字段拖入单元格，自定义标题行即可。

点击表格编辑界面左上角「返回可视化看板」按钮返回画布。如下图所示：

2.4 添加页面加载结束事件

点击设计器顶部「模板>页面加载结束事件」，输入 JavaScript 代码：

setTimeout(function(){
 var vanchart = duchamp.getWidgetByName("区域地图1_页面1").getInstance();//获取vancharts对象
 var oldChartShowTooltip = vanchart.showTooltip;//记录原来的showtooltip
 vanchart.showTooltip = function(point) { //重写showtooltip
     oldChartShowTooltip.apply(vanchart, Array.prototype.slice.call(arguments));
     var areaName = point.name;
     duchamp.getWidgetByName("表格1_页面1").refresh({area: areaName});
     duchamp.getWidgetByName("标题1_页面1").refresh({area: areaName});
     duchamp.getWidgetByName("饼图1_页面1").refresh({area: areaName});
     //tooltip变化后传参给对应组件并刷新
   }
  setTimeout(function(){
    duchamp.getWidgetByName("区域地图1_页面1").openAutoTooltip("3000")//tooltip自动轮播
  },1000);
},500);

如下图所示：

注：FVS V2.2.1 版本新增参数全局联动接口 linkageGlobal ，可将上述代码中获取多个组件传参刷新的部分用这个接口替换，参考如下。

setTimeout(function(){
 var vanchart = duchamp.getWidgetByName("区域地图1_页面1").getInstance();//获取vancharts对象
 var oldChartShowTooltip = vanchart.showTooltip;//记录原来的showtooltip
 vanchart.showTooltip = function(point) { //重写showtooltip
     oldChartShowTooltip.apply(vanchart, Array.prototype.slice.call(arguments));
     var areaName = point.name;
     duchamp.linkageGlobal({area: areaName});
     //tooltip变化后传参全局联动
   }
  setTimeout(function(){
    duchamp.getWidgetByName("区域地图1_页面1").openAutoTooltip("3000")//tooltip自动轮播
  },1000);
},500);

2.5 效果预览

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

注：不支持移动端。

点击下载模板：FVS图表提示轮播联动其他组件.fvs