DataV实战#2 - 无交互事件组件数据源查询时间变量传递技巧

简介: 对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。 查询DataV官方文档无果,请教DataV专家@子墨, 找到了一个解决方式,记录如下,以供需要的同学参考。 该方案的使用数字翻牌器组件作为传递时间变量。 ## 配置数字翻牌器 第一步,配置数字翻牌

对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。
查询DataV官方文档无果,请教DataV专家@子墨, 找到了一个解决方式,记录如下,以供需要的同学参考。

该方案的使用数字翻牌器组件作为传递时间变量。

配置数字翻牌器

第一步,配置数字翻牌器,添加过滤器,如下是一个过滤器demo,你也可以按自己的需求自己定义变量。

const time = Math.floor(Date.now() / 1000);
const begin = time - (time - 1518364800) % 86400;

Object.values(data).forEach((obj) => {
  obj.from_1 = time - 60 * 60;
  obj.from_2 = time - 60 * 60 * 2;
  obj.from_24 = time - 24 * 60 * 60;
  obj.to_now = time;
  obj.from_48 = time - 48 * 60 * 60;
  obj.start = begin;
  obj.yesterday_start = begin - 24 * 60 * 60;
  obj.from_0 = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
  obj.from_2_01 = obj.from_2 * 1000;
  obj.to_now_01 = obj.to_now * 1000


});

return data;

Screen Shot 2018-09-12 at 10.23.23 AM.png

配置数字翻牌器的交互事件

第二步,配置数字翻牌器的交互事件,如上案例,要使用to_now变量,做下绑定,绑定到的变量可以自己定义:
Screen Shot 2018-09-12 at 10.24.52 AM.png

注意配置后将生效勾选框勾选上。

配置无交互事件组件数据源查询

第三步,配置无交互事件组件数据源查询,比如仪表盘组件,查询配置中把变量引入:
11_33_08__09_12_2018.jpg

注意的是,使用时间变量在组件数据源查询调试时会提示错误。因为这个时间变量需要在发布或者预览时传递生效。所以当调试时,需要使用静态时间,调试完毕预览时,改成时间变量即可。

最后再次感谢DataV专家@子墨的耐心指导。

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
目录
相关文章
|
3月前
|
数据可视化
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
|
10月前
|
JavaScript 数据可视化
datav和echarts一起使用时,在datav的组件里获取不到dom元素,导致无法渲染echarts
记录一个小问题,datav和echarts一起使用时,在datav的组件里获取不到dom元素
212 1
|
数据可视化
|
SQL 数据可视化 JavaScript
DataV图表的数据筛选交互需求梳理及实现样例
本文主要对DataV大屏数据表、气泡地图等组件的筛选交互需求进行一个简单的梳理及样例实现,其中包括单字段单选筛选、单字段多选筛选、多字段共同筛选、字段级联及查询按钮的配置。
1663 3
|
数据可视化 大数据 开发者
DataV- 组件展示|学习笔记
快速学习 DataV- 基础组件展示
355 0
|
数据可视化 大数据 定位技术
DataV-3D 地理组件
快速学习 DataV-3D 地理组件
646 0
DataV-3D 地理组件
|
自然语言处理 数据可视化 IDE
【通用行业开发部】DataV和 UE4(虚拟引擎)的大屏交互升级方案
越来越多的大屏项目 不在满足简简单单的数据展示效果,要求越来越高的客户需求也促进大屏的定位和解决方案升级。 在阿里云的DataV数据可视化大屏的基础上,与UE4(虚拟引擎)完成跨行业的结合,带来不一样的视觉效果和交互体验,使大屏的应用效果急速扩展,对应的系统方案架构也带来不一样的挑战! 这篇文章带领大家了解DataV和UE4之间的一些奇妙设计。
【通用行业开发部】DataV和 UE4(虚拟引擎)的大屏交互升级方案
|
数据可视化 物联网 数据挖掘
物联网平台IOT Studio DataV组件使用测试
物联网平台web可视化开发使用大屏组件实现功能
2285 0
物联网平台IOT Studio DataV组件使用测试
|
数据可视化 定位技术 API
DataV动态GPS数据源在高德地图上坐标转换方案
随着物联网IoT的蓬勃发展,大量数据上云需要展示。DataV是一款数据可视化利器,轻轻松松不用搭建服务器,即可搭建一个精美的数据大屏。 对于地图坐标展示,DataV目前的卫星图使用高德的坐标系,即国测局坐标(GCJ-02)。
3710 0
|
新零售 监控 数据可视化
如何做到DataV实时数据大屏搭建实战
摘要在2018年大数据上云特惠活动系列直播中,阿里巴巴技术专家陶映旭和央久带来了DataV实时数据大屏搭建实战的精彩演讲,首先介绍了数据大屏应用场景和产品特性,其次分享了近期新功能和项目实操的详细过程,最后介绍了DataV经常使用的小技巧。
7647 0