使用DataV可视化应用展示数据返回结果

操作步骤

1. 添加DataWorks数据源。

   1. 使用HTTP协议进入DataV控制台，选择我的数据 > 添加数据。

   2. 单击类型下拉箭头，选择数据类型为DataWorks数据服务。

   3. 在添加数据对话框中填写DataWorks数据服务项目信息，本案例的配置信息如下图所示。

      

      参数	说明
      自定义数据源名称	数据源的显示名称，可以自由命名。
      项目	DataWorks项目（工作空间）。
      Region	需要与您的DataWorks项目在同一Region下。
      AppKey/AppSecret	参考使用DataWorks数据服务生成API中的第三步，获取AppKey和AppSecret。

2. 在可视化应用中调用数据服务API。

   1. 在DataV控制台中，单击我的可视化 > PC端创建。

   2. 选择一个模板，单击创建项目。

   3. 在创建数据大屏对话框中，输入数据大屏名称，单击创建。

      示例选择如下模板。

      模板中的组件自带了静态数据，本案例以模板中的基本折线图组件为例，将组件数据配置为查询成交金额增长趋势的API。

   4. 单击模板中的基本折线图组件，在右侧的数据配置面板中，单击配置数据源。

   5. 在设置数据源页面中，选择数据源类型为DataWorks数据服务，已有数据源为您第一步中添加的数据源，API为您已经发布的API。

      说明

      本案例将上图中的pageSize设置为5，表示查询5天的数据。

   6. 单击预览数据源返回结果，查看API的查询结果，如下图所示。

   7. 返回组件的数据面板，在字段映射关系中，将x字段映射为date1（日期为x轴），y字段映射为amount（成交额为y轴）。

      说明

      配置完成后，可以看到，当前x和y无法匹配到字段。这是由于DataV对数据格式有一定要求，不能识别结构较深的字段。因此需要添加一个数据过滤器，过滤掉不必要的字段，在本案例中直接返回rows数组即可。

   8. 在组件的数据面板中，勾选数据过滤器，单击添加过滤器。

   9. 在设置数据源页面中，单击添加过滤器右侧的+。

   10. 在过滤器代码编辑框中输入return data.data.rows;，单击测试（需要开启过滤器调试功能）。测试成功后，单击保存 > 完成。

       数据过滤器支持使用JavaScript代码对数据结果进行二次过滤和处理，过滤器的data参数为API返回结果的JSON对象。本案例中，您只需要返回API结果中的rows数组，故需要输入代码return data.data.rows;即可，过滤完成后可以看到数据匹配成功。

       说明

       此时折线图并没有正确展示，由于API返回的日期格式与组件默认的格式不一样，因此您还需要设置x轴的轴标签样式。

   11. 切换到组件的配置面板，设置x轴轴标签的数据种类为类目型。

       组件的样式和数据都配置完成后，可以看到组件使用API数据，且显示正常。