点我扫二维码，查看demo
# ChartLine 折线图
# 介绍
数据可视化组件，可从数据生成折线图或者面积图
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { ChartLine } from '@dolphin-iot/ui'
Vue.use(ChartLine);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
设置坐标轴 axis 属性, 几何图形 geometry 属性, 待渲染数据 data 属性。即可渲染出折线图。折线图&面积图使用笛卡尔坐标系，即 x 轴和 y 轴。坐标轴的 use 属性用于配置该坐标轴使用数据项的哪个属性进行渲染。scale 属性用于配置该坐标轴的刻度。具体请参考图表库开发介绍。geometry 属性用于配置图形相关的信息。折线图可以配置线条的颜色，面积图，可以配置面积的颜色。data 即绘图使用的数据。
<template>
<div class="container">
<mx-chart-line :axis="axis" :geometry="geo" :data="data"/>
</div>
</template>
<script>
export default {
data() {
return {
axis:{
x:{
use:'time',
scale:{
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [ 0, 1 ]
}
},
y:{
use:'tem',
scale:{
tickCount: 5,
min: 0,
alias: '日均温度'
}
},
},
geo:{
color:'#267AFF',
},
data:[
{
time: '2016-08-08 00:00:00',
tem: 10,
type:'日均温度'
},
{
time: '2016-08-08 00:10:00',
tem: 22,
type:'日均温度'
},
{
time: '2016-08-08 00:30:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 00:35:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-09 01:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 01:20:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-10 01:40:00',
tem: 28,
type:'日均温度'
},
{
time: '2016-08-10 02:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-10 02:20:00',
tem: 18,
type:'日均温度'
}
]
};
},
};
</script>
<style lang="scss" scoped>
.container{
width:100%
height:300px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
# 层叠折线图
通过配置 geometry 属性的 classifyBy 字段，可以将数据渲染成多条折线图。此时要求数据中除了 x 轴, y 轴维度外，还需要一个进行图形分类的维度, 即 classifyBy 指定的维度。而且此时 color属性为数组，即描述每条曲线的颜色。
<template>
<div class="container">
<mx-chart-line :axis="axis" :geometry="geo" :data="data"/>
</div>
</template>
<script>
export default {
data() {
return {
axis:{
x:{
use:'time',
scale:{
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [ 0, 1 ]
}
},
y:{
use:'tem',
scale:{
tickCount: 5,
min: 0,
alias: '日均温度'
}
},
},
geo:{
color:['#267AFF','#FFAA10'],
classifyBy:'type',
},
data:[
{
time: '2016-08-08 00:00:00',
tem: 10,
type:'日均温度'
},
{
time: '2016-08-08 00:10:00',
tem: 22,
type:'日均温度'
},
{
time: '2016-08-08 00:30:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 00:35:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-09 01:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 01:20:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-10 01:40:00',
tem: 28,
type:'日均温度'
},
{
time: '2016-08-10 02:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-10 02:20:00',
tem: 18,
type:'日均温度'
},
{
time: '2016-08-08 00:00:00',
tem: 3,
type:'日均密度'
},
{
time: '2016-08-08 00:10:00',
tem: 27,
type:'日均密度'
},
{
time: '2016-08-08 00:30:00',
tem: 15,
type:'日均密度'
},
{
time: '2016-08-09 00:35:00',
tem: 18,
type:'日均密度'
},
{
time: '2016-08-09 01:00:00',
tem: 28,
type:'日均密度'
},
{
time: '2016-08-09 01:20:00',
tem: 22,
type:'日均密度'
},
{
time: '2016-08-10 01:40:00',
tem: 23,
type:'日均密度'
},
{
time: '2016-08-10 02:00:00',
tem: 26,
type:'日均密度'
},
{
time: '2016-08-10 02:20:00',
tem: 19,
type:'日均密度'
}
]
};
},
};
</script>
<style lang="scss" scoped>
.container{
width:100%
height:300px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
# 面积图
在折线图的基础上,通过配置 show-area 属性为 true，即可绘制面积图。
<template>
<div class="container">
<mx-chart-line :axis="axis" :geometry="geo" :data="data" :show-area="true"/>
</div>
</template>
<script>
export default {
data() {
return {
axis:{
x:{
use:'time',
scale:{
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [ 0, 1 ]
}
},
y:{
use:'tem',
scale:{
tickCount: 5,
min: 0,
alias: '日均温度'
}
},
},
geo:{
color:'#267AFF',
},
data:[
{
time: '2016-08-08 00:00:00',
tem: 10,
type:'日均温度'
},
{
time: '2016-08-08 00:10:00',
tem: 22,
type:'日均温度'
},
{
time: '2016-08-08 00:30:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 00:35:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-09 01:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 01:20:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-10 01:40:00',
tem: 28,
type:'日均温度'
},
{
time: '2016-08-10 02:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-10 02:20:00',
tem: 18,
type:'日均温度'
}
]
};
},
};
</script>
<style lang="scss" scoped>
.container{
width:100%
height:300px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
# 层叠面积图
在层叠折线图的基础上,通过设置 show-area 属性为 true。即可绘制层叠面积图。
<template>
<div class="container">
<mx-chart-line :axis="axis" :geometry="geo" :data="data" :show-area="true"/>
</div>
</template>
<script>
export default {
data() {
return {
axis:{
x:{
use:'time',
scale:{
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [ 0, 1 ]
}
},
y:{
use:'tem',
scale:{
tickCount: 5,
min: 0,
alias: '日均温度'
}
},
},
geo:{
color:['#267AFF','#FFAA10'],
classifyBy:'type',
},
data:[
{
time: '2016-08-08 00:00:00',
tem: 10,
type:'日均温度'
},
{
time: '2016-08-08 00:10:00',
tem: 22,
type:'日均温度'
},
{
time: '2016-08-08 00:30:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 00:35:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-09 01:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 01:20:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-10 01:40:00',
tem: 28,
type:'日均温度'
},
{
time: '2016-08-10 02:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-10 02:20:00',
tem: 18,
type:'日均温度'
},
{
time: '2016-08-08 00:00:00',
tem: 3,
type:'日均密度'
},
{
time: '2016-08-08 00:10:00',
tem: 27,
type:'日均密度'
},
{
time: '2016-08-08 00:30:00',
tem: 15,
type:'日均密度'
},
{
time: '2016-08-09 00:35:00',
tem: 18,
type:'日均密度'
},
{
time: '2016-08-09 01:00:00',
tem: 28,
type:'日均密度'
},
{
time: '2016-08-09 01:20:00',
tem: 22,
type:'日均密度'
},
{
time: '2016-08-10 01:40:00',
tem: 23,
type:'日均密度'
},
{
time: '2016-08-10 02:00:00',
tem: 26,
type:'日均密度'
},
{
time: '2016-08-10 02:20:00',
tem: 19,
type:'日均密度'
}
]
};
},
};
</script>
<style lang="scss" scoped>
.container{
width:100%
height:300px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
# 双Y轴
折线图支持双Y轴显示,当需要绘制双Y轴时，需要在配置 axis 中配置 yr 轴（即显示在图表右侧的坐标轴）。其配置与 x, y 一致。此时data中数据需要，根据使用的不同坐标轴，分为不同的数组。组件默认认为data数组中的最后一项使用 yr 坐标轴。
<template>
<div class="container">
<mx-chart-line :axis="axis" :geometry="geo" :data="data" :show-area="true"/>
</div>
</template>
<script>
export default {
data() {
return {
axis:{
x:{
use:'time',
scale:{
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [ 0, 1 ]
}
},
y:{
use:'tem',
scale:{
tickCount: 5,
min: 0,
alias: '日均温度'
}
},
yr:{
use:'hum',
scale:{
tickCount: 5,
min: 0,
alias: '日均湿度'
}
}
},
geo:{
color:['#267AFF','#FFAA10','#00CBB8'],
classifyBy:'type',
},
data:[
[
{
time: '2016-08-08 00:00:00',
tem: 10,
type:'日均温度'
},
{
time: '2016-08-08 00:10:00',
tem: 22,
type:'日均温度'
},
{
time: '2016-08-08 00:30:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 00:35:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-09 01:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-09 01:20:00',
tem: 26,
type:'日均温度'
},
{
time: '2016-08-10 01:40:00',
tem: 28,
type:'日均温度'
},
{
time: '2016-08-10 02:00:00',
tem: 20,
type:'日均温度'
},
{
time: '2016-08-10 02:20:00',
tem: 18,
type:'日均温度'
},
{
time: '2016-08-08 00:00:00',
tem: 3,
type:'日均密度'
},
{
time: '2016-08-08 00:10:00',
tem: 27,
type:'日均密度'
},
{
time: '2016-08-08 00:30:00',
tem: 15,
type:'日均密度'
},
{
time: '2016-08-09 00:35:00',
tem: 18,
type:'日均密度'
},
{
time: '2016-08-09 01:00:00',
tem: 28,
type:'日均密度'
},
{
time: '2016-08-09 01:20:00',
tem: 22,
type:'日均密度'
},
{
time: '2016-08-10 01:40:00',
tem: 23,
type:'日均密度'
},
{
time: '2016-08-10 02:00:00',
tem: 26,
type:'日均密度'
},
{
time: '2016-08-10 02:20:00',
tem: 19,
type:'日均密度'
}
],
[
{
time: '2016-08-08 00:00:00',
hum: 50,
type:'日均湿度'
},
{
time: '2016-08-08 00:10:00',
hum: 72,
type:'日均湿度'
},
{
time: '2016-08-08 00:30:00',
hum: 53,
type:'日均湿度'
},
{
time: '2016-08-09 00:35:00',
hum: 86,
type:'日均湿度'
},
{
time: '2016-08-09 01:00:00',
hum: 81,
type:'日均湿度'
},
{
time: '2016-08-09 01:20:00',
hum: 66,
type:'日均湿度'
},
{
time: '2016-08-10 01:40:00',
hum: 92,
type:'日均湿度'
},
{
time: '2016-08-10 02:00:00',
hum: 68,
type:'日均湿度'
},
{
time: '2016-08-10 02:20:00',
hum: 99,
type:'日均湿度'
},
]
]
};
},
};
</script>
<style lang="scss" scoped>
.container{
width:100%
height:300px
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
# Api
# Props
| 参数 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
| axis | 坐标轴 | object | - | 是 |
| geometry | 显示的几何图形相关的配置，如颜色等 | object | - | 是 |
| data | 待绘图的数据（通常为一个数组） | array | - | 是 |
| show-area | 是否显示为面积图 | boolean | false | - |
| width | 宽度 | number | - | 是 |
| height | 高度 | number | - | 是 |