添加柱狀圖組件和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，柱狀圖則隱藏。

單擊頁面左上角的圖標，進入藍圖編輯器。查看系統自動生成的交互關系。即單路判斷節點的條件為動作觸發條件內容。

（可選）您也可以在自動邏輯關系的基礎上修改觸發條件、響應動作和對應的過濾器，當此處的配置變化時，相對應的高級面板的配置項也會變化。

在全局變量中添加一個名為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的內容。