封装了关于时间轴的组件，有时候统计页面会用到。
效果图：
![]()
时间轴分为2种，一种是time-axis：范围选择模式，一种是date-axis：步长选择模式。
代码中涉及到的工具类和图片资源，请移步页面底部的gitee地址下载源码。
time-axis：
![]()
![]()
1
2
13
14
15
396
397
date-axis：
![]()
![]()
1
2
3
4
5
6
7
@mouseover="onScaleMouseover(index)"
10
@mouseout="onScaleMouseout(index)"
11
@click="onScaleClick(index)">
12
13
14
15
16
17
18
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
70
71
151
152
