对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。
查询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;
配置数字翻牌器的交互事件
第二步,配置数字翻牌器的交互事件,如上案例,要使用to_now变量,做下绑定,绑定到的变量可以自己定义:
注意配置后将生效勾选框勾选上。
配置无交互事件组件数据源查询
第三步,配置无交互事件组件数据源查询,比如仪表盘组件,查询配置中把变量引入:
注意的是,使用时间变量在组件数据源查询调试时会提示错误。因为这个时间变量需要在发布或者预览时传递生效。所以当调试时,需要使用静态时间,调试完毕预览时,改成时间变量即可。
最后再次感谢DataV专家@子墨的耐心指导。