点我扫二维码，查看demo
# ChartColumn 柱状图
# 介绍
数据可视化组件，可从数据生成柱状图
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { ChartColumn } from '@dolphin-iot/ui'
Vue.use(ChartColumn);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
设置坐标轴 axis 属性, 几何图形 geometry 属性, 待渲染数据 data 属性。即可渲染出折线图。柱状图使用笛卡尔坐标系，即 x 轴和 y 轴。坐标轴的 use 属性用于配置该坐标轴使用数据项的哪个属性进行渲染。scale 属性用于配置该坐标轴的刻度。具体请参考图表库开发介绍。geometry 属性用于配置图形相关的信息。柱状图可以配置柱子的颜色。data 即绘图使用的数据。
<template>
<div class="container">
<mx-chart-column :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-column :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-horizental 属性为 true，即可绘制水平柱状图。
<template>
<div class="container">
<mx-chart-column :axis="axis" :geometry="geo" :data="data" :show-horizental="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
# Api
# Props
| 参数 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
| axis | 坐标轴 | object | - | 是 |
| geometry | 显示的几何图形相关的配置，如颜色等 | object | - | 是 |
| data | 待绘图的数据（通常为一个数组） | array | - | 是 |
| show-horizental | 是否水平显示柱状图 | boolean | false | - |
| width | 宽度 | number | - | 是 |
| height | 高度 | number | - | 是 |