前提條件

• 登錄DataV控制臺。

• 已進入畫布編輯器。

• 已創建三個全局變量var_1、var_2、var_3。

作為靜態值傳遞

1. 在畫布編輯器頁面，單擊全局變量頁簽。

2. 單擊var_1變量，修改來源為靜態值。

3. 修改初始值內容為hello。

4. 刷新數據響應結果后的圖標，查看響應結果為修改后的內容hello。

   

作為變量引用異步值傳遞

1. 在畫布編輯器頁面，單擊全局變量頁簽。

2. 單擊var_1變量，修改初始值為datav-hello。

3. 單擊var_2變量，修改來源為數據源請求。

4. 選擇數據源類型。

   數據源類型為API

   若選擇數據類型為API，則使用以下步驟。

   1. 設置請求方式為GET，輸入URL為https://datav.com/:var_1。

      

      說明

      此處URL為示例地址，不具備真實訪問性。具體請以實際使用為準。

   2. 鍵盤上使用F12功能鍵打開chrome控制臺，切換至Network頁簽。

   3. 刷新數據響應結果后的圖標。

   4. 此時Network存在2個請求：Name為數字類的請求和Name為datav-hello的請求。

      

      

   數據源類型為兼容MySQL數據庫

   若選擇數據類型為兼容MySQL數據庫，則使用以下步驟。

   1. 選擇已有數據源。也可以重新創建數據源，詳情請參見數據源管理。

   2. 輸入以下SQL表達式。

      

      select :var_1 as value

   3. 刷新數據響應結果后的圖標，查看響應結果。

   說明

   • 如果您的數據源類型為靜態數據或者CSV文件，則不支持全局變量的使用。

   • 對于API數據源，系統會直接為同名的變量參數賦值。

   • DataV提供了全局變量自動補全功能。在配置數據源時，只要鍵入英文冒號:，編輯器將提示當前屏幕下所有配置過的變量名稱。

作為URL參數傳遞

1. 在畫布編輯器頁面，單擊全局變量頁簽。

2. 單擊var_3變量，修改來源為從URL查詢條件中獲取。

3. 在URL中使用參數賦值方式傳入，https://datav.aliyun.com/v/editor/xxx?var_3=datav#__sketch__。

   重要

   參數要設置到#號前面，并且參數名要與全局變量名保持一致。

4. 刷新數據響應結果后的圖標，查看響應結果為修改后的內容：從URL傳入的datav。

   

作為交互事件參數傳遞

1. 在畫布編輯器頁面，單擊上方搜索框。輸入按鈕和通用標題，將兩個組件添加到畫布中。

2. 選擇按鈕組件，單擊右側配置設置面板的高級頁簽。

3. 打開關聯全局變量模塊下的點擊按鈕時開關。

4. 在更新至變量字段下選擇全局變量var_1。

   

5. 切換至藍圖編輯器，可以看到，全局變量與按鈕組件是自動虛線連接，且展示了兩個全局變量的引用關系。

   說明

   去掉全局變量的引用關系后，藍圖中的虛線會自動刪除。

   

6. 在左側導航欄中選擇圖層節點頁簽，將通用標題拖拽到藍圖中。

7. 可以看出全局變量var_2與通用標題連接為實線。

   說明

   實線可以刪除，虛線不可以刪除。

8. 您可以添加邏輯節點和邏輯組合，對獲取的數據做進一步處理。

過濾器引用

1. 在畫布編輯器頁面，單擊上方搜索框。輸入按鈕和通用標題，將兩個組件添加到畫布中。重復操作再次獲取按鈕和通用標題組件。

2. 單擊按鈕組件，分別修改兩個按鈕的組件名稱為getLocalValue獲取按鈕和getCallbackValue獲取按鈕。

3. 單擊通用標題組件，分別修改兩個通用標題的組件名稱為通用標題-1和通用標題-2。

4. 選擇全局變量頁簽，新增兩個全局變量，取名為name和test。并分別設置靜態值。

   • name變量

     [
       {
         "value": "獲取到name變量啦。"
       }
     ]

   • test變量

     [
       {
         "value": "獲取到test變量啦。"
       }
     ]

5. 分別設置兩個按鈕的文字內容為點擊通過getLocalValue獲取test和點擊通過getCallBackValue獲取name。

6. 單擊頁面左上角的圖標，進入藍圖編輯器。

7. 連接組件。

8. 添加過濾器，設置串行數據處理節點處理方法。

   • getLocalValue

     return getLocalValue('test');

   • getCallbackValue

     return getCallbackValue('name');

9. 單擊頁面右上角的預覽，查看數據獲取詳情。

相關案例

您可以參考以下案例了解更多全局變量能力：

• 全局變量案例演示

• 如何使用全局變量實現按日期查詢

• 如何使用全局變量實現數據篩選

• 如何使用全局變量實現數據分發和數據相加