全域變數功能的示範案例 - DataV

本文通過四個案例，示範如何使用全域變數功能。

前提條件

已進入畫布編輯器

案例一：實現按日期查詢

添加組件。
1. 在畫布編輯器上方單擊搜尋，輸入通用標題和時間選取器。
2. 單擊將組件添加至畫布中。
設定靜態全域變數。
1. 在畫布編輯器左側，選擇全域變數頁簽。
2. 單擊建立變數，重新命名為date，描述寫日期值，設定初始值為2023-07-19。
設定通用標題資料來源。
1. 選中通用標題組件，選擇資料來源頁簽。
2. 設定資料來源類型為資料庫，選擇已有資料來源。在SQL輸入框中輸入以下語句。
  說明
  此處需要使用英文冒號引入全域變數，詳情請參見全域變數自動補全。
3. 查看資料返回結果和通用標題組件展示的即為全域變數設定的初始值。
配置時間選取器互動。
1. 選中時間選取器組件，選擇進階頁簽。
2. 開啟互動事件開關，在time欄位下選擇變數date。
  說明
  此處設定表示在進行時間選擇時，time改變都會更新date值。
預覽展示結果。
單擊畫布編輯器右上方的預覽，驗證設定結果。
說明
預覽頁面開啟後，首先展示全域變數的預設值，接著會展示時間選取器的預設值，這時候改變時間，通用標題就會展示已選中的時間值。
設定動態全域變數。
1. 返回畫布編輯器頁面，修改全域變數date的來源為資料來源請求。
2. 選擇已建立的資料來源，在SQL視窗中輸入擷取目前時間的查詢代碼。
3. ```
select cast(curDate() as char) as date
```
4. 添加過濾器，擷取date的值匯入到通用標題。
```
return data[0].date;
```
5. 查看過濾器的輸入值和輸出值。
6. 查看通用標題組件的內容，即為動態擷取的時間值。
預覽展示結果。
單擊畫布編輯器右上方的預覽，驗證設定結果。
說明
預覽頁面開啟後，首先展示全域變數動態擷取的時間值，此時改變時間，通用標題將同步展示已選中的時間值。

案例二：實現資料分發

添加組件。
1. 在畫布編輯器上方單擊搜尋，輸入通用標題和數字翻牌器。
2. 單擊將組件添加至畫布中。
設定靜態全域變數。
1. 在畫布編輯器左側，選擇全域變數頁簽。
2. 單擊建立變數，重新命名為x，設定初始值。
```
[
  {
    "text": "我是文本",
    "number": 123
  }
]
```
設定藍圖互動。
1. 單擊左上方的表徵圖，進入藍圖編輯器。
2. 拖拽圖層節點和全域變數節點到藍圖主畫布中。
3. 單擊邏輯節點，添加兩個串列資料處理節點。
4. 串連節點。
5. 設定串列資料處理節點處理方法。
  - 數字翻牌器
```
return [{
  value: data[0].number
}]
```
  - 通用標題
```
return [{
  value: data[0].text
}]
```
預覽展示結果。
單擊畫布編輯器右上方的預覽，驗證設定結果。

案例三：實現動態資料加和

添加組件。
1. 在畫布編輯器上方單擊搜尋，輸入數字翻牌器。
2. 單擊將組件添加至畫布中。
設定靜態全域變數。
1. 在畫布編輯器左側，選擇全域變數頁簽。
2. 單擊建立變數，建立兩個全域變數，分別重新命名為y和z，設定初始值為123和234。
設定藍圖互動。
1. 單擊左上方的表徵圖，進入藍圖編輯器。
2. 拖拽圖層節點和全域變數節點到藍圖主畫布中。
3. 單擊邏輯節點，添加兩個串列資料處理節點。
4. 串連節點。
5. 設定串列資料處理節點處理方法。
  - 節點1
```
return [{
  value: data + getCallbackValue(
    "z")
}]
```
  - 節點2
```
return [{
  value: data + getLocalValue(
    "y")
}]
```
預覽展示結果。
單擊畫布編輯器右上方的預覽，驗證設定結果。
設定動態全域變數。
修改全域變數y的來源為資料來源請求，並選擇API或資料庫等動態資料源。
設定藍圖互動。
1. 單擊邏輯節點，添加一個定時器。
2. 開啟是否迴圈開關，設定定時器節點的延遲時間為3秒。
3. 串連節點。
預覽展示結果。
單擊畫布編輯器右上方的預覽，驗證結果。每三秒數字翻牌器就會變化，從而實現動態資料加和。

案例四：實現資料篩選

添加組件。
1. 在畫布編輯器上方單擊搜尋，輸入Tab列表和折線圖。
2. 單擊將組件添加至畫布中。
3. 選中Tab列表，選擇資料來源頁簽。
4. 修改待用資料。
```
[
  {
    "id": 1,
    "content": "全部"
  },
  {
    "id": 2,
    "content": "類型A"
  },
  {
    "id": 3,
    "content": "類型B"
  }
]
```
設定靜態全域變數。
1. 選中折線圖，選擇資料來源頁簽，複製全量待用資料。
2. 在畫布編輯器左側，選擇全域變數頁簽。
3. 單擊建立變數，建立一個全域變數，重新命名為data，設定初始值為已複製的折線圖全量資料。

設定藍圖互動。

單擊左上方的表徵圖，進入藍圖編輯器。
拖拽圖層節點到藍圖主畫布中。
單擊邏輯節點，添加1個串列資料處理節點。
串連節點。

設定串列資料處理節點處理方法。

let result = getCallbackValue("data") //擷取全域變數資料
return result.filter(i => {
  if (data.content == "全部") {
    return result;//如果tab列表的內容為“全部”，則返回全部資料
  } else {
    return i.colorField == data.content;//如果tab列表的內容為“類型A”或“類型B”，則只返回對應的資料
  }
});

預覽展示結果。
單擊畫布編輯器右上方的預覽，驗證設定結果。