FVS顯示隱藏組件事件

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

FVS 範本在 V2.3.0 之前的版本中，要實現 組件的顯示隱藏 需透過 JavaScript 事件實現，設定及後續維護較為繁瑣。

V2.3.0 版本新增「顯示/隱藏」點選事件，透過簡單配置即可實現組件顯示、隱藏或切換顯示/隱藏。

所有支援點選事件的二維組件，均支援「顯示/隱藏」事件。新增後可控制目標物件的顯示或隱藏。

• 事件名稱不支援為空，同一組件的事件不支援重名；

• 支援新增多條物件；
  

• 目標物件支援搜尋篩選組件，支援多選組件；

• 交互動作支援三種類型：顯示、隱藏或切換顯示/隱藏。

3.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一個空白看板。如下圖所示：

3.2 新增組件

新增 標題組件 用於設定點選互動事件，用於被隱藏或顯示的組件可隨意新增。

本例新增了一個柱形圖、一個餅圖和一個折線圖，以及三個圖片組件作為標題組件的背景，可自訂修改組件名稱。

最終效果如下圖所示：

在初始狀態，我們需要將希望隱藏的組件，手動設定為不可見狀態。如下圖所示：

3.3 設定顯示隱藏事件

選中「柱形圖」標題，點選「互動>點選事件>新增點選事件>顯示/隱藏」。

自訂事件名稱，目標物件及交互動作設定如下：

同理設定另外兩個標題組件的事件，選擇對應標題要實現顯示或隱藏的目標物件即可，這裏不再贅述。

3.4 效果預覽

3.4.1 PC端

點選範本右上角「預覽」，效果下圖所示：

3.4.2 行動端

行動端請自行組合組件並開啟 重佈局 ，預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS顯示隱藏組件事件.fvs