数据源介绍 | 即视帮助中心

# 数据源介绍

数据源是接收、存储数据的地方，通过接入数据源，实现数据可视化。不同的的元素使用的数据源数据格式也不相同，本篇带您了解如何在大屏项目中使用数据。

在即视中通过可视化组件实现数据显示需要两个步骤：

在数据源面板中新增并配置数据源。
在组件数据中填入已接入的数据源。

# 配置数据源

点击将左侧面板切换至数据源面板，单击数据源增加按钮，选择一种数据源进行添加。

# http/https数据源

数据地址为HTTP或者HTTPS协议的数据源，使用此数据源可以动态的从数据源地址中请求数据。

配置项	说明
数据名称	在元素中引用数据源时的名称，不支持小数点，不允许与已创建的数据源重名。
数据地址	数据源地址必须使用http或https协议，数据地址中可以写入变量进行控制。以`${$vp.变量名}`的形式放入地址中
触发方式	单次触发：则该数据源只请求一次，并按照请求在函数中处理后显示到组件视图，不会再次请求数据也不支持手动刷新。触发频率更新：数据可以设置更新时间，默认3000ms重新请求一次数据，支持手动刷新数据。
依赖关系	可以增加一个或多个数据源作为依赖项，。增加依赖后，需要所有依赖项都执行完毕后，才会执行该数据源请求。
自动更新	依赖项发生变化时，可选择是否让此数据源自动更新。
数据处理	内置`data()`、`pipe()`、`onFail()`、`configRequest()`四种数据处理函数，除以上函数外，不识别用户自定义其他函数。点击展开按钮可放大数据处理编辑栏。点击数据处理中的运行按钮可在数据预览中查看返回的数据。

# 静态数据源

当没有http/https数据源地址时，可以通过选择静态数据源模拟数据进行测试。如果已增加过数据源，在配置中可增加依赖关系。如果将依赖的数据源删除，则此数据源也将失效。

# 数据处理系统DPU

即视提供数据处理系统DPU（Data Processing Unit），除https/http数据源和静态数据源，其他种类数据源需安装DPU后使用。

CSV数据源
即视支持引入CSV格式的数据源，使用CSV数据源之前确认已安装DPU。

配置项	说明
数据名称	在元素中引用数据源时的名称，不支持小数点，不允许与已创建的数据源重名。
上传文件	上传csv后缀的文件。
编码格式	默认自动识别上传文件的编码格式，支持手动修改。
列标题	默认将第一列视作标题，选择无列标题时只允许返回数组格式的数据。支持自定义列标题，需以逗号分隔。
返回格式	默认返回键值对格式，无列标题时只允许返回数组格式的数据。
值分隔符	修改文件中值分隔符，逗号、分号、空格、制表符。
依赖关系	可以增加一个或多个数据源作为依赖项，绑定后可通过参数`{deps}`访问。增加依赖后，需要所有依赖项都执行完毕后，才会执行该数据源请求。
自动更新	依赖项发生变化时，可选择是否让此数据源自动更新。
数据处理	内置`data()`、`pipe()`、`onFail()`、`configRequest()`四种数据处理函数，除以上函数外，不识别用户自定义其他函数。点击展开按钮可放大数据处理编辑栏。点击数据处理中的运行按钮可在数据预览中查看返回的数据。

# 数据处理

# 数据处理函数

data()函数用来请求未返回前的默认值，可以不经过请求直接将数据写在返回值中调用。

支持参数	说明
{func}	在函数中引用其他函数，假设引用`pipe()`函数，可以`{func.pipe()}`

// 使用data()，返回静态数据
function data() {
  return [1,2,3];
}

1
2
3
4

pipe()函数是请求返回成功后执行的回调函数，当数据源数据格式与组件需要的数据不同，使用此函数处理数据格式。使用多个参数时也需要使用{}括起来，用,连接，比如{data,vp}。

支持参数	说明
{func}	在函数中引用其他函数，假设引用`pipe()`函数，可以`{func.pipe()}`
{data}	请求发送成功后返回的数据，当数据源数据格式与组件需要的数据不同时, 使用此参数修改返回数据的格式。
{deps}	访问依赖项中的数据源，使用此参数前需要先绑定依赖关系。
{vp}	访问变量池中的变量，比如存在变量`test`,通过`vp.test`进行调用。

// 使用pipe()，返回依赖项数据源test的数据。
function pipe({deps}) {
  return deps.boy;
}

1
2
3
4

onFail()函数是请求返回失败后执行的回调函数，可以用来查看请求失败时响应的headers内容。

支持参数	说明
{func}	在函数中引用其他函数，假设引用`pipe()`函数，可以`{func.pipe()}`
{headers}	当响应不是200时返回响应的headers。
{vp}	访问变量池中的变量，比如存在变量`test`,通过`vp.test`进行调用。

configRequest()是在请求发出之前请求配置项的函数。返回值内置headers、params且不支持增加新的返回值。

支持参数	说明
{func}	在函数中引用其他函数，假设引用`pipe()`函数，可以`{func.pipe()}`
{vp}	访问变量池中的变量，比如存在变量`test`,通过`vp.test`进行调用。
{deps}	访问依赖项中的数据源，使用此参数前需要先绑定依赖关系。
{eventData}	支持在事件回调中手动刷新数据源并传送数据，在组件事件中调用方式`$global.$dpFetch(name, data)`name代表数据源名称，data为自定义参数。使用此参数无需将使用变量将数据源与组件连接，可直接通过交互组件更改请求的数据源地址。

// 在数据源test中使用configRequest()，获取绑定此数据源的组件传来的数据值并发送请求。
function configRequest({eventData}) {
  return {
    params: {
      filter: eventData
    }
  }
}

//在组件的事件监听中添加事件,向数据源test中发送交互改变的value值。
funcition onValChange(value,$element,$global){
  $global.$dpFetch('test', value);
}

1
2
3
4
5
6
7
8
9
10
11
12
13

提醒

点击了解更多关于组件事件的知识

返回值	说明
headers	请求头，可以在此添加授权Token。
params	请求参数。用于GET请求。
method	请求方法，默认 GET，同样支持POST、PATCH、PUT、DELETE等方法。
data	请求体。用于POST请求。