# 数据源介绍
数据源是接收、存储数据的地方,通过接入数据源,实现数据可视化。不同的的元素使用的数据源数据格式也不相同,本篇带您了解如何在大屏项目中使用数据。
在即视中通过可视化组件实现数据显示需要两个步骤:
- 在数据源面板中新增并配置数据源。
- 在组件数据中填入已接入的数据源。
# 配置数据源
点击将左侧面板切换至数据源面板,单击数据源增加按钮,选择一种数据源进行添加。
# 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];
}
2
3
4
pipe()
函数是请求返回成功后执行的回调函数,当数据源数据格式与组件需要的数据不同,使用此函数处理数据格式。使用多个参数时也需要使用{}
括起来,用,
连接,比如{data,vp}
。
支持参数 | 说明 |
---|---|
{func} | 在函数中引用其他函数,假设引用pipe() 函数,可以{func.pipe()} |
{data} | 请求发送成功后返回的数据,当数据源数据格式与组件需要的数据不同时, 使用此参数修改返回数据的格式。 |
{deps} | 访问依赖项中的数据源,使用此参数前需要先绑定依赖关系。 |
{vp} | 访问变量池中的变量,比如存在变量test ,通过vp.test 进行调用。 |
// 使用pipe(),返回依赖项数据源test的数据。
function pipe({deps}) {
return deps.boy;
}
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);
}
2
3
4
5
6
7
8
9
10
11
12
13
提醒
点击了解更多关于组件事件的知识
返回值 | 说明 |
---|---|
headers | 请求头,可以在此添加授权Token。 |
params | 请求参数。用于GET请求。 |
method | 请求方法,默认 GET,同样支持POST、PATCH、PUT、DELETE等方法。 |
data | 请求体。用于POST请求。 |
# 数据预览
点击数据处理中的运行按钮可在数据预览中查看返回的数据。
# 修改数据源
选中数据源,鼠标右键点击重命名,可修改数据源名称。双击数据源可进入编辑,修改后若数据无反应,右键数据源,点击刷新。
# 删除数据源
选中数据源,鼠标右键点击删除,可删除已添加的数据源。
警告
若此数据源与其他数据源有依赖关系,删除后会导致依赖这项数据源失效。
# 数据源使用
与变量池一样,在满足元素要求数据格式的情况下,数据源也几乎可以应用到所有元素组件中。$ds
代表变量池,在即视中获取数据源也需要使用${}
包裹。比如我们想要取test
数据源,即${$ds.test}
。
每一个元素需要的数据格式各不相同,具体需要返回的数据格式可参考元素的静态数据。
当满足数据格式时:为动态词云增加一个数据源
当数据源格式与组件规定数据格式不同时:需要通过
pipe()
函数return正确的数据格式为文字组件引用已有数据源:使用
data()
函数返回元素需要的值
← 变量池