封装了关于时间轴的组件,有时候统计页面会用到。
效果图:
时间轴分为2种,一种是time-axis:范围选择模式,一种是date-axis:步长选择模式。
代码中涉及到的工具类和图片资源,请移步页面底部的gitee地址下载源码。
time-axis:
1
2
3
@keyup="excute" :style="{ color: themeObject.color }" :disabled="interactive.inputDisabled" />
4
11
@keyup="excute" :style="{ color: themeObject.color }" :disabled="interactive.inputDisabled" />
12
13
14
15
396
397
date-axis:
1
2
3
@keyup="excute" :style="{ color: themeObject.color }" disabled />
4
5
6
7
@mouseover="onScaleMouseover(index)"
10
@mouseout="onScaleMouseout(index)"
11
@click="onScaleClick(index)">
12
13
14
15
16
17
@keyup="excute" :style="{ color: themeObject.color }" disabled />
18
19
20
21
285
286
调用示例和参数说明:
1
2
3
4
1.【lilo-time-axis】基础用法
5
@click="setTime('001')">绑定方式修改时间
6
@changed="timeChanged">
12
13
开始时间:{{ example001.data.startTime }}
14
结束时间:{{ example001.data.endTime }}
15
16
17
18
2.【lilo-time-axis】锁定时间轴,禁用起始按钮和时间条
19
@click="setTime('002')">绑定方式修改时间
20
@changed="timeChanged"
28 >
29
30
31
32
开始时间:{{ example002.data.startTime }}
33
结束时间:{{ example002.data.endTime }}
34
35
36
37
3.【lilo-date-axis】初始化的起始时间间隔为步长,请保证[时间间隔]能被max-min[时间段]整除,且[时间间隔]不要跨区间,例如下面例子:总时间段60天,时间间隔为2天,30个小时间段
38
39
@changed="timeChanged"
47 >
48
49
50
51
开始时间:{{ example003.data.startTime }}
52
结束时间:{{ example003.data.endTime }}
53
54
55
56
4.【lilo-time-axis】设置最大时间范围 (range = 5)
57
@changed="timeChanged">
63
64
开始时间:{{ example004.data.startTime }}
65
结束时间:{{ example004.data.endTime }}
66
67
68
69
70
71
151
152