DataV回调id——从入门到精通

简介: 细心的朋友们可能会发现DataV的编辑器右侧多出了一个“交互”tab,有没有好奇它是做什么的? 接下来就由小编带领大家一探究竟 配置 入门篇 首先来回顾一下什么是回调id,在DataV中回调id是指某个组件在响应用户操作或者自动触发更新时向别的组件传递的参数,这个参数可以在别的组件中用于数据查询时的动态变量。

细心的朋友们可能会发现DataV的编辑器右侧多出了一个“交互”tab,有没有好奇它是做什么的?

image

接下来就由小编带领大家一探究竟

配置

入门篇

首先来回顾一下什么是回调id,在DataV中回调id是指某个组件在响应用户操作或者自动触发更新时向别的组件传递的参数,这个参数可以在别的组件中用于数据查询时的动态变量。例如用户在地图组件上点击了某个省份后,分组柱图会把选中的省份作为参数去查询各个市的统计数据,或者时间轴组件的时间发生变化时,轮播列表组件会把时间作为参数去获取新的数据。

image

这次我们在回调id的基础上,提供一个独立编辑区块,方便大家清晰、快速的用好回调id这一特性。

image

以数字翻牌器为例,该组件在数字发生变化时它可以向别的组件提供一个参数value(下图中的“字段”,对应数据源中的字段),当我们点击右上角的「启用」按钮时,系统将自动设置一个同名变量value(下图中的“绑定到变量”)指向这个参数。

image

当然,大家也可以修改“绑定到变量”中的变量名称,如下图所示,我们将value修改为income,这时在别的组件使用该变量时就可以使用income来取得这个参数。利用这一特性,我们就可以给不同的组件设置不一样的变量名称,达到区分使用不同参数的目的。

image

高级篇

1.设置自定义字段

此外,在组件的数据源配置中还支持设置除组件必需字段外的数据,例如我们给数字翻牌器额外设置一个id字段,值为123。

image

这时回到编辑「交互」的地方,点击“新建一个字段”,在“字段”的地方填入id,在“绑定到变量”的地方填入你想设置的变量名称。注意,只有在同时填写了“字段”和“绑定到变量”后,这个变量才会生效。

image

2.设置回调id的默认值

我们可以通过在url中设置请求参数的形式来设置回调id的默认值,如:

http://datav.aliyun.com/screen/000000?myid=123

注释:000000表示屏幕id

通过这个url访问时,在页面打开的时候,回调idmyid的值已经设置为123了。

多个回调id之间使用&符号连接,如

http://datav.aliyun.com/screen/000000?myid=123&income=1000

注释:000000表示屏幕id

这里同时设置了回调idmyidincome的默认值

使用

回调id的使用跟以前保持一致,在数据源中使用:变量名(如:abc)即可。

例如:SQL:

select :name as value
select A from table where year = :name

API:

http://api.test?income=:income&id=:myid

One more thing

我们增加了回调参数自动补全的功能,也就是说在配置数据源时,只要键入:,编辑器将提示当前屏幕下所有已经配置过的变量名称,可以使用上下键选择,回车键确定。当屏幕中有大量交互组件的时候,这个功能是不是很贴心呢,不用再去一个个点组件查看之前设置的变量是什么了。

image

使用案例

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
数据可视化 大数据 定位技术
DataV中的回调ID是个什么鬼?
很多朋友经常来询问,组件配置当中有个回调ID 比如这个: 还有这个: 下面就来解释一下回调ID究竟是干嘛用 步骤一:设置回调ID 回调ID可以理解为参数变量,可以用于控制组件之间参数的传递,从而达到交互的目的。
17531 0
|
3月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
|
3月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
|
3月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
254 1
|
3月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
145 2
react+datav+echarts实现可视化数据大屏
|
8月前
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
516 0
|
11月前
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
747 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
SQL 数据可视化 数据库
使用阿里云dataV实现大屏自动轮播
使用阿里云dataV实现大屏自动轮播进行动态展示
1481 0
使用阿里云dataV实现大屏自动轮播
|
JSON 编解码 监控
使用dataV还原销售实时监控大屏
使用dataV还原销售实时监控大屏
400 0
使用dataV还原销售实时监控大屏
|
数据可视化
宜搭&DataV在一起啦!宜搭大屏可视化正式全量上线
● 2021年10月,随着宜搭 3.0 的正式发布,为了让钉钉上的每一个企业数字化的工作方式被看见,在云栖大会上,宜搭在酷数据方面,正式“牵手”DataV,发布了宜搭大屏的能力; ● 2021年12月,宜搭 & DataV在产品侧充分融合无缝衔接,现,正式面向宜搭全量付费用户开放,真正让宜搭用户一键掌握专业炫酷的数据可视化表现力!
3537 1

相关产品

  • DataV数据可视化