对接DataV

功能特点

DataV配置步骤

1. 创建DataV数据源。
   1. 登录DataV数据可视化控制台。
   2. 在我的数据页签，单击添加数据，具体参数配置如下：

      配置项	说明
      类型	在下拉菜单中选择简单日志服务 SLS。
      自定义数据源名称	为数据源配置一个自定义名称。例如log_service_api。
      AppKey	主账号的AccessKey ID，或者有权限读取日志服务的RAM用户 AccessKey ID。
      AppSecret	主账号的AccessKey Secret，或者有权限读取日志服务的RAM用户AccessKey Secret。
      Endpoint	填写日志服务Project所在地域的Endpoint，请参见服务入口。

2. 打开可视化画布。
   • 在我的可视化页签，选择已存在目标可视化项目，单击编辑。
   • 在我的可视化页签，单击新建可视化，创建步骤请参见使用模板创建PC端可视化应用。
3. 创建折线图并添加过滤器。
   1. 创建一个折线图。
      在左侧组件列表中，单击折线图 > 基本折线图，在右侧数据页签数据源项单击配置数据源修改组件样式配置，具体配置如下：

      配置项	说明
      数据源类型	选择简单日志服务 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。在测试时，您可以先填写unix time，例如1509897600。发布之后换成:from和:to，然后您可以在URL参数里控制这两个数值的具体时间范围。例如，预览时的URL是http://datav.aliyun.com/screen/86312，打开http://datav.aliyun.com/screen/86312?from=1510796077&to=1510798877后，会按照指定的时间进行计算。
      query	查询条件。query的语法请参见实时分析简介。 说明 query中的时间格式，一定要是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. 新建轮播饼图。
      在左侧组件列表中，单击选择饼图 > 轮播饼图，在右侧数据页签数据源项单击配置数据源修改组件样式配置，具体配置如下：

      配置项	说明
      数据源类型	选择简单日志服务 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. 创建一个静态数据源，使用值默认即可，添加一个过滤器。代码示例如下：

      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. 单击发布图标即完成视图发布。

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