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

对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。
查询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;

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

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

第二步,配置数字翻牌器的交互事件,如上案例,要使用to_now变量,做下绑定,绑定到的变量可以自己定义:
DataV实战#2 - 无交互事件组件数据源查询时间变量传递技巧

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

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

第三步,配置无交互事件组件数据源查询,比如仪表盘组件,查询配置中把变量引入:
DataV实战#2 - 无交互事件组件数据源查询时间变量传递技巧

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

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

上一篇:date -d的灵活应用


下一篇:【重要通知】开发者文档更新(11.22-11.28)