如何進行組件互動配置 - DataV

資料看板的互動事件讓組件間有了互動，協助使用者更直觀便捷地進行資料探查和分析。本文介紹組件進階面板下的互動事件和關聯全域變數功能。

使用情境

沒有互動時，組件之間是獨立的個體，無法進行組件的聯動。當您需要如下類似情境時，您可使用組件互動配置增強資料看板能力。

點擊開關，控製圖層顯示隱藏；
點擊TAB標籤，展示不同含義下的資料；
點擊不同地圖地區，透視表僅展示所點擊省份的詳細資料；
通過時間選取器選擇時間，查看不同時間點的銷量資料；

總之，當您希望控制展示資料看板的內容時，您需要組件的進階配置以實現組件間的互動。

原理說明

組件的互動配置原理是使用者主動觸發互動事件，當系統判斷滿足動作觸發條件時，接收對象即會響應事件，作出預期的互動動作；若不滿意動作觸發條件，則自動結束。使用者也可不設定動作觸發條件，接收對象將直接執行互動動作。

例如，點擊Tab列表的第一個Tab時，柱狀圖組件顯示，整體原理如下。

操作流程

選擇資料看板中的組件（即觸發對象），在組件的進階面板下配置互動事件、動作觸發條件、互動動作、接收對象，即可完成互動事件的配置。可選擇全域變數作為接收對象，實現全域變數的更新。

重要

接收對象支援圖層組件和全域變數。

前提條件

已登入DataV控制台。
已進入畫布編輯器頁面。

互動事件

組件間的互動

下面以點擊Tab顯示或隱藏柱狀圖為例，示範用互動事件實現組件間的互動。

2024-09-26_14-59-20 (1)

組件中的關係如下：

添加柱狀圖組件和Tab列表組件（在控制項 > 選擇類下）到畫布中。
選中Tab列表組件後，修改Tab列表的資料來源，將Tab改成顯示和隱藏。
給Tab列表點擊添加顯示互動事件：當點擊Tab的ID為1時，柱狀圖響應顯示動作。
1. 選中Tab列表，選擇右側進階面板，單擊互動事件右側的表徵圖，給Tab點擊添加互動事件。啟用事件開關預設開啟。
2. 選擇事件類型，添加當點擊Tab時事件。
  說明
  單擊事件右側的表徵圖，可以查看當前事件的出參說明。
3. 單擊表徵圖，開啟動作觸發條件開關。
4. 單擊新增條件，設定條件配置項當id等於1，即當點擊的Tab是第一個Tab時。詳細使用方法請參見條件樹使用說明。
  說明
  您也可以切換至代碼編輯模式，使用JavaScript文法進行配置。
5. 單擊互動動作右側的表徵圖，添加一個互動動作。
6. 選擇需要響應的組件和動作，設定為柱狀圖的顯示。
  說明
  單擊表徵圖，跳轉至藍圖查看互動動作。單擊表徵圖，查看當前動作的入參說明。
  不同的動作互動動作的配置不同，請以實際為準。
同理，再給Tab列表添加一個互動事件：當點擊Tab的ID為2時，柱狀圖響應隱藏動作。
單擊右上方預覽，進行預覽效果查看。點擊顯示Tab，柱狀圖則顯示；點擊隱藏Tab，柱狀圖則隱藏。
單擊頁面左上方的表徵圖，進入藍圖編輯器。查看系統自動產生的互動關係。即單路判斷節點的條件為動作觸發條件內容。
（可選）您也可以在自動邏輯關係的基礎上修改觸發條件、響應動作和對應的過濾器，當此處的配置變化時，相對應的進階面板的配置項也會變化。
說明
- 當您需要較複雜的互動時，請在藍圖編輯器中進行設定。

組件和全域變數的互動

下面以通用標題組件展示點擊Tab列表組件的內容為例，示範用互動事件實現組件和全域變數的互動。通用標題的作用是直觀展示全域變數的變化。

說明

您也可以使用藍圖編輯器實現該互動情境，詳細操作請參見案例示範。

2024-09-26_15-57-03 (1)

三者的關係圖如下：

在全域變數中添加一個名為content的全域變數。
添加Tab列表組件（在控制項 > 選擇類下）和通用標題組件到畫布中。

選中通用標題組件，在右側資料來源面板，關聯上全域變數content。並設定過濾器，將content處理成正確的格式傳給組件。

// data入參表示content變數傳入的值，經過過濾器處理後，給組件正確的格式。
function filter(data) {
   return [{
      value: data
  }];
}

給Tab列表組件添加互動事件，觸發全域變數content的值變化。
1. 選中Tab列表組件，選擇右側進階面板，單擊互動事件右側的表徵圖，給Tab點擊添加互動事件。啟用事件開關預設開啟。
2. 選擇事件類型，添加當點擊Tab時事件。
  說明
  單擊事件右側的表徵圖，可以查看當前事件的出參說明。
3. 單擊互動動作右側的表徵圖，添加一個互動動作。
4. 選擇需要響應的對象為全域變數content，動作為匯入資料。
5. 參數配置切換至動態參數配置，建立過濾器，添加代碼如下。將Tab點擊拋出的結果進行處理，返回的值就匯入給全域變數content。
```
// 經過過濾器處理後，擷取全域變數最終需要的值。
function filter(data) {
  return data.content;
}
```
單擊右上方預覽，進行預覽效果查看。點擊不同Tab，通用標題顯示點擊Tab的內容。

關聯全域變數（不推薦使用）

重要

互動事件模組已覆蓋關聯全域變數功能。該模組即將做下線處理，不建議再使用。

下面以點擊柱狀圖更新全域變數為例，示範關聯全域變數操作。

添加柱狀圖組件到畫布中。
選中組件後，選擇右側進階面板，定位到關聯全域變數，開啟當圖例被點擊時的互動開關。
在value欄位下選中事先建立好的全域變數。
說明
- 變數名稱修改為全域變數後，在需要響應全域變數的組件中即可使用當前變數來擷取參數值。可以通過設定不同的全域變數名稱，以區分使用不同參數。
- 全域變數具體使用方法請參見使用全域變數。
選中當前組件，按右鍵進入藍圖編輯器。可以看到全域變數和組件已自動使用虛線串連。
（可選）您可以再添加資料處理節點或其他邏輯節點進行二次操作。樣本請參見作為互動事件參數傳遞。

上述方案不再建議使用，替代方案為互動事件實現關聯全域變數。用互動事件配置來實現時，配置項如下。

當柱狀圖的當圖例被點擊時事件觸發時，對象全域變數var_r9r54執行了匯入變數資料動作。匯入的資料由事件拋出的結果經過過濾器處理而得。

// 點擊事件拋出的結構
{
  "value": "",
  "checked": false
}

// 經過過濾器處理後，擷取全域變數最終需要的值。
function filter(data) {
  return data.value;
}

常見問題

當我配置完進階互動後，切換到藍圖編輯器發現有些連線無法刪除。

互動中關聯全域變數的設定，無法在藍圖編輯器刪除。需要您在進階面板中關閉。

DataV：組件互動配置