时间轴 basic-timescale
时间轴 basic-timescale
时间刻度轴,用于时间序列进度 / 定位。
- 类型串:
basic-timescale默认尺寸:[600, 80]分类:时间
实时预览
下面渲染的是真实组件(与编辑器 / 运行时同源)。修改右侧「样式参数」,左侧预览实时更新;点击底部「全页面查看」可放大。
24 小时刻度尺 + 可拖动游标:
current-time定游标初始时刻(0–24,此处 9.5 即 9:30),cursor-size/cursor-color定游标,scale-height/scale-width/scale-color定刻度线,scale-line-*定底部基线,scale-padding控制左右留白,scale-font配刻度文字。拖动游标试试——时间变化会触发timeChanged。
属性
下表为本组件特有的属性;
position/size/opacity/background/border/ 联动选中 / 筛选等通用参数见组件手册总览。
| 属性 | 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|---|
cursor-size | 游标大小 | number(unit=px,min=0) | 40 | |
cursor-img | 游标图片 | file(format=image) | — | |
cursor-color | 游标颜色 | color | #3aa1ff | |
cursor-offset-y | 游标垂直偏移 | number(unit=px) | 0 | |
scale-height | 刻度高度 | number(unit=px,min=0) | 45 | |
scale-width | 刻度宽度 | number(unit=px,min=0) | 1 | |
scale-color | 刻度颜色 | color | #ffffff | |
scale-line-width | 刻度线宽度 | number(unit=px,min=0) | 1 | |
scale-line-color | 刻度线颜色 | color | #ffffff | |
scale-padding | 左右间隔 | number(unit=px,min=0) | 20 | |
scale-font | 刻度文本 | font | {"color":"#ffffff","size":12} | |
scale-font-offset-y | 文字垂直偏移 | number(unit=px) | 0 |
数据绑定
无组件特有数据绑定字段(纯样式 / 布局 / 装饰)。
事件
触发器
触发器在预览 / 播放态生效(编辑态点击 = 选中组件)。写在本组件
options.interactions的groups[].trigger里。
| 触发器 | 名称 | 触发时机 | payload(供动作公式 {:字段} 取值) |
|---|---|---|---|
timeChanged | 时间变化 | 拖动 / 播放时间轴使当前时间变化时触发 | {time} 当前时间 |
click | 点击 | 点击本组件时触发 | 无 |
mouseEnter | 鼠标移入 | 指针移入组件时触发 | 无 |
mouseLeave | 鼠标移出 | 指针移出组件时触发 | 无 |
appear | 入场 | 组件出现时触发(配合进场动画) | 无 |
disappear | 离场 | 组件消失时触发(配合退场动画) | 无 |
receiveBehaviorEvent | 接收行为事件 | 收到 sendBehaviorEvent 动作或宿主 ctx.emit 投递的事件时触发(按 eventName 匹配) | 发送方携带的 data |
动作
触发器命中后执行的动作。本组件既可发起动作(配在自己的交互里),也可作为其它组件动作的目标。
| 动作 | 名称 | 说明 |
|---|---|---|
changeOption | 修改设置 | 把本组件(或其它组件)的某个属性改为静态值 / 公式动态值 |
switchState | 切换状态 | 切到多状态里的某个状态(state:"" 回默认态) |
appear / disappear | 进 / 退场动画 | 对目标 opacity 做 0↔100 插值的显隐动画 |
完整动作清单(switchScreen / switchWindow / openUrl / sendBehaviorEvent / transfer / executeScript / requestApi 等)与持久化写法见事件交互。
示例
{
"type": "basic-timescale",
"uid": "w_basic_timescale",
"options": {
"position": [40, 40],
"size": [600, 80]
}
}变体示例:晚高峰定位 + 大游标
刻度轴的区间固定为 0–24 时(无区间配置键),「定位到某时段」用
current-time表达:此处游标停在 18 时,加大cursor-size并用cursor-offset-y/scale-font-offset-y微调游标与文字的垂直落位,暖色游标示意「晚高峰」。