操作场景
时间范围选择器作为一个限定时间范围的交互组件,需要配合两个变量来实现对时间范围下内容的筛选。
实现效果
一个图表包含2008年-2016年的数据,通过时间范围选择器筛选,如开始时间选择2008年,结束时间选择2012年,能把图表2008到2012年的数据筛选出来并呈现出来。
操作步骤
1. 在管理中心添加数据源,格式选择离线文件,单击下载示例数据 后,将下载好的文件后上传至产品中。
2. 在编辑页面添加时间范围选择器组件,单击数据模块选择静态数据,无需填入任何值。
3. 添加一个柱状图,给柱状图组件接入刚上传的离线文件。


4. 在变量管理处,分别添加 a、b 两个变量,默认值可不填,由于本示例数据的年限范围为2008年-2016年,假设 a 的默认值填为2008年,b 的默认值填为2016,绑定该两变量。


5. 在过滤器中写入简单语句,让a<=X<=b,只显示a与b时间范围下的数据内容。
data[0].data =data[0].data.filter(item => args.a <= item.X&&args.b>=item.X)return data
6. 给时间范围选择器组件,添加联动事件,设置成功后,单击确定。
触发条件:选择时间范围变化时。
实现动作:选择变量赋值。让变量 a 与时间范围选择器组件字段 startTime 建立关系,变量 b 与时间范围选择器组件字段 endTime 建立关系。
7. 单击预览按钮,在时间范围选择器开始时间选择2008年,结束时间选择2012年,则图表组件显示2008年-2012年的数据。



