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;

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

第二步，配置数字翻牌器的交互事件，如上案例，要使用to_now变量，做下绑定，绑定到的变量可以自己定义：

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

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

第三步，配置无交互事件组件数据源查询，比如仪表盘组件，查询配置中把变量引入：

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

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