# 安装
# DEMO演示
# 基础使用
<template>
<view>
<button type="default" @click="btn">提交</button>
<view class="charts-box"><qiun-data-charts type="column" :chartData="chartData" background="none" />
<qiun-data-charts type="column" :chartData="chartData" background="none" :opts="opts" />
</view>
</view>
</template>
<script>
import { minix } from '@/common/mixin';
import {uchartconfig} from '@/common/config-ucharts'
export default {
data() {
return {
num: 2,
chartData: {
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
series: [
{
name: '目标值',
data: [35, 36, 31, 33, 13, 34]
},
{
name: '完成量',
data: [18, 27, 21, 24, 6, 28]
}
]
}
};
},
mixins: [minix],
created() {
this.opts=uchartconfig.lineOpts
},
methods: {
btn() {
console.log(4);
this.chartData = {
series: [
{
name: '散点一',
data: [[10, 8.04], [8.07, 6.95], [13, 7.58], [9.05, 8.81], [11, 8.33], [14, 7.66], [13.4, 6.81], [10, 6.33], [14, 8.96], [12.5, 6.82]]
},
{
name: '散点二1',
data: [
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12, 6.26],
[12, 8.84],
[7.08, 5.82],
[5.02, 5.68]
]
}
]
};
}
}
};
</script>
<style></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
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
# opts配置项
提示
建议将opts配置写入js配置文件，实现不同的表格初始化不同的配置
export const uchartconfig = {
lineOpts: {
"type": "column",
"canvasId": "",
"canvas2d": false,
"background": "none",
"animation": true,
"timing": "easeOut",
"duration": 1000,
"color": [
"#1890FF",
"#91CB74",
"#FAC858",
"#EE6666",
"#73C0DE",
"#3CA272",
"#FC8452",
"#9A60B4",
"#ea7ccc"
],
"padding": [
15,
15,
0,
5
],
"rotate": false,
"errorReload": true,
"fontSize": 13,
"fontColor": "#666666",
"enableScroll": false,
"touchMoveLimit": 60,
"enableMarkLine": true,
"dataLabel": true,
"dataPointShape": true,
"dataPointShapeType": "solid",
"xAxis": {
"disabled": false,
"axisLine": true,
"axisLineColor": "#CCCCCC",
"calibration": false,
"fontColor": "#666666",
"fontSize": 13,
"rotateLabel": false,
"itemCount": 5,
"boundaryGap": "center",
"disableGrid": true,
"gridColor": "#CCCCCC",
"gridType": "solid",
"dashLength": 4,
"gridEval": 1,
"scrollShow": false,
"scrollAlign": "left",
"scrollColor": "#A6A6A6",
"scrollBackgroundColor": "#EFEBEF"
},
"yAxis": {
"disabled": false,
"disableGrid": false,
"splitNumber": 5,
"gridType": "solid",
"dashLength": 8,
"gridColor": "#CCCCCC",
"padding": 10,
"showTitle": false,
"data": []
},
"legend": {
"show": true,
"position": "bottom",
"float": "center",
"padding": 5,
"margin": 5,
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"fontSize": 13,
"fontColor": "#666666",
"lineHeight": 11,
"hiddenColor": "#CECECE",
"itemGap": 10
},
"extra": {
"column": {
"type": "group",
"width": 30,
"seriesGap": 2,
"categoryGap": 3,
"barBorderCircle": false,
"linearType": "none",
"linearOpacity": 1,
"colorStop": 0,
"meterBorder": 1,
"meterFillColor": "#FFFFFF",
"activeBgColor": "#000000",
"activeBgOpacity": 0.08,
"meterBorde": 1
},
"tooltip": {
"showBox": true,
"showArrow": true,
"showCategory": false,
"borderWidth": 0,
"borderRadius": 0,
"borderColor": "#000000",
"borderOpacity": 0.7,
"bgColor": "#000000",
"bgOpacity": 0.7,
"gridType": "solid",
"dashLength": 4,
"gridColor": "#CCCCCC",
"fontColor": "#FFFFFF",
"splitLine": true,
"horizentalLine": false,
"xAxisLabel": false,
"yAxisLabel": false,
"labelBgColor": "#FFFFFF",
"labelBgOpacity": 0.7,
"labelFontColor": "#666666"
},
"markLine": {
"type": "solid",
"dashLength": 4,
"data": [
{
"value": 30,
"lineColor": "#DE4A42",
"showLabel": false,
"labelFontColor": "#666666",
"labelBgColor": "#DFE8FF",
"labelBgOpacity": 0.8,
"yAxisIndex": 0
}
]
}
}
}
}
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
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
# 动态修改opts
this.opts.extra.markLine.data[0].value = 10;
1