Simple Log Service：對接DataV

功能特點

DataV配置步驟

1. 建立DataV資料來源。

   1. 登入DataV控制台。

   2. 在我的資料頁簽中，單擊添加資料。

   3. 在添加資料對話方塊中，完成如下配置，然後單擊確定。

      配置項	說明
      類型	選擇簡單Log Service SLS。
      自訂資料來源名稱	設定資料來源的名稱，例如log_service_api。
      AppKey	阿里雲帳號的AccessKey ID或者具備Log Service讀取許可權的RAM使用者的AccessKey ID。
      AppSecret	阿里雲帳號的AccessKey Secret或者具備Log Service讀取許可權的RAM使用者的AccessKey Secret。
      EndPoint	Log ServiceProject所在地區的Endpoint。更多資訊，請參見服務入口。

2. 開啟可視化畫布。

   • 在我的可視化頁簽中，將滑鼠懸浮在已存在的可視化應用上，單擊編輯。

   • 在我的可視化頁簽中，建立專案。具體操作，請參見使用模板建立PC端可視化應用。

3. 建立折線圖並添加過濾器。

   1. 建立一個折線圖。

      1. 在左側組件列表中，選擇圖表 > 折線圖 > 折線圖。

      2. 在右側資料頁簽中，單擊配置資料來源，完成如下配置。

         配置項	說明
         資料來源類型	選擇簡單Log Service SLS。
         選擇已有資料來源	選擇您在步驟1中建立的資料來源，例如log_service_api。
         查詢	查詢樣本如下： { "projectName": "dashboard-demo", "logStoreName": "access-log", "topic": "", "from": ":from", "to": ":to", "query": "*| select approx_distinct(remote_addr) as uv ,count(1) as pv , date_format(from_unixtime(date_trunc('hour',__time__) ) ,'%Y/%m/%d %H:%i:%s') as time group by time order by time limit 1000" , "line": 100, "offset": 0 } 查詢樣本中的各個欄位說明如下表所示。

         參數	說明
         projectName	Project名稱。
         logstoreName	Logstore名稱。
         topic	日誌主題，如果您沒有設定日誌主題，此處請留空。
         from、to	from和to分別是查詢的起始和結束時間。 說明 樣本中填寫的是:from和:to。在測試時，您可以先填寫時間戳記，例如1509897600。發布之後換成:from和:to，然後您可以在URL參數裡控制這兩個數值的具體時間範圍。例如，預覽時的URL是http://datav.aliyun.com/screen/86312，開啟http://datav.aliyun.com/screen/86312?from=1510796077&to=1510798877後，會按照指定的時間進行計算。
         query	查詢條件。query的文法請參見分析概述。 說明 query中的時間格式為YYYY/mm/dd HH:mm:ss，例如2017/07/11 12:00:00，所以採用以下方式把時間對齊到整點，再轉化成目標格式。 date_format(from_unixtime(date_trunc('hour',__time__) ) ,'%Y/%m/%d%H:%i:%s')
         line	請填寫預設值100。
         offset	請填寫預設值0。

   2. 配置完成後，查看資料響應結果。

   3. 建立過濾器。

      選中資料過濾器，然後單擊添加過濾器後的加號（+）。

      過濾器內容請按照以下格式填寫。

      return Object.keys(data).map((key) => {
      let d= data[key];
      d["pv"] = parseInt(d["pv"]);
      return d;
      });

      • 在過濾器中，要把y軸用到的結果顯示為int類型，上述範例中，y軸為pv，所以需要轉換pv列。

      • 可以看到在結果中有t和pv兩列，您可以將x軸配置為t，y軸配置成pv。

4. 建立餅狀圖並添加過濾器。

   1. 建立輪播餅圖。

      1. 在左側組件列表中，選擇圖表 > 餅環圖 > 輪播餅圖。

      2. 在右側資料頁簽中，單擊配置資料來源，完成如下配置。

         配置項	說明
         資料來源類型	選擇簡單Log Service SLS。
         選擇已有資料來源	選擇您在中步驟1建立的資料來源，例如log_service_api。
         查詢	查詢樣本如下： { "projectName": "dashboard-demo", "logStoreName": "access-log", "topic": "", "from": 1509897600, "to": 1509984000, "query": "*| select count(1) as pv ,method group by method" , "line": 100, "offset": 0 } 樣本參數說明請參見折線圖的參數說明。

   2. 配置完成後，查看資料響應結果。

   3. 添加一個過濾器。

      選中資料過濾器，然後單擊添加過濾器後的加號（+）。

      過濾器內容請按照以下格式填寫。

      return Object.keys(data).map((key) => {
      let d= data[key];
      d["pv"] = parseInt(d["pv"]);
      return d;
      })

      餅圖的type配置為method，value配置為pv。

5. 回調ID動態擷取時間範圍。

   以下步驟示範如何動態顯示15分鐘的日誌。

   1. 建立一個待用資料源並添加一個過濾器。

      1. 在右側資料頁簽中，單擊配置資料來源。

      2. 在設定資料來源面板中，完成如下配置。

         • 待用資料使用預設代碼即可。

         • 過濾器代碼參考如下所示。

           return [{
             value:Math.round(Date.now()/1000)
           }];

           return [{
             value:Math.round((Date.now() - 24 * 60 * 60 * 1000)/1000)
           }];

         

   2. 在互動頁簽中，選中啟用對應的響應事件，並將value綁定到變數中。

      

   3. 在資料檢視，通過:from和:to引用回調ID，樣本如下：

      {
       "projectName": "dashboard-demo",
       "logStoreName": "access-log",
       "topic": "",
       "from": ":from",
       "to": ":to",
       "query": "*| select count(1) as pv ,referer group by pv desc limit 30" ,
       "line": 100,
       "offset": 0
      }

6. 預覽和發布。

   1. 單擊預覽表徵圖對已編輯的視圖進行預覽。

   2. 單擊發布表徵圖即完成視圖發布。

案例：調整不同統計口徑下的雲棲大會網站訪問即時大屏