日志服务：对接DataV

功能特点

DataV配置步骤

1. 创建DataV数据源。

   1. 登录DataV数据可视化控制台。

   2. 在我的数据页签中，单击添加数据。

   3. 在添加数据对话框中，完成如下配置，然后单击确定。

      配置项	说明
      类型	选择简单日志服务 SLS。
      自定义数据源名称	设置数据源的名称，例如log_service_api。
      AppKey	阿里云账号的AccessKey ID或者具备日志服务读取权限的RAM用户的AccessKey ID。
      AppSecret	阿里云账号的AccessKey Secret或者具备日志服务读取权限的RAM用户的AccessKey Secret。
      EndPoint	日志服务Project所在地域的Endpoint。更多信息，请参见服务入口。

2. 打开可视化画布。

   • 在我的可视化页签中，将鼠标悬浮在已存在的可视化应用上，单击编辑。

   • 在我的可视化页签中，新建项目。具体操作，请参见使用模板创建PC端可视化应用。

3. 创建折线图并添加过滤器。

   1. 创建一个折线图。

      1. 在左侧组件列表中，选择图表 > 折线图 > 折线图。

      2. 在右侧数据页签中，单击配置数据源，完成如下配置。

         配置项	说明
         数据源类型	选择简单日志服务 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. 在右侧数据页签中，单击配置数据源，完成如下配置。

         配置项	说明
         数据源类型	选择简单日志服务 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. 单击发布图标即完成视图发布。

案例：调整不同统计口径下的云栖大会网站访问实时大屏