# 12.4 弧形进度条
# midea-progresscycle-view 环形进度条
APP内置组件，功能由原生实现，无需引入H5组件。
# 实例:
# 基础用法
<template>
<div class="wrapper">
<dof-minibar
title="progresscycle"
background-color="#0092d7"
text-color="#ffffff"
:isImage="true"
:left-button="leftButton"
right-text="Home"
></dof-minibar>
<scroller class="scroller">
<div class="progresscycle-wrapper">
<midea-progresscycle-view v-if="isShow" class="progresscycle" :data="chartData"></midea-progresscycle-view>
</div>
<div class="param-wrapper">
<div class="item-group">
<text class="text-label">起始角度:</text>
<input class="text-input" type="text" placeholder="起始角度" v-model="chartData.startingSlice" />
</div>
<div class="item-group">
<text class="text-label">总进度:</text>
<input class="text-input" type="text" placeholder="总进度" v-model="chartData.totalCounter" />
</div>
<div class="item-group">
<text class="text-label">步长:</text>
<input class="text-input" type="text" placeholder="步长" v-model="step" />
</div>
</div>
<div class="btn-wrapper">
<dof-button
:text="(intervalHandler?'停止':'开始')+'增加进度（步长/秒）'"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked">
</dof-button>
</div>
<div class="btn-wrapper">
<dof-button
text="增加进度"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked1">
</dof-button>
</div>
<div class="btn-wrapper">
<dof-button
text="重新加载"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked2">
</dof-button>
</div>
<div class="btn-wrapper">
<dof-button
text="清零"
type="primary"
:btnStyle="{'width': '500px', 'height':'60px', 'margin-top':'0px'}"
@dofButtonClicked="dofButtonClicked3">
</dof-button>
</div>
</scroller>
</div>
</template>
<style scoped>
.wrapper {
background-image: linear-gradient(to bottom, #ffbb00, #ffaa10);
}
.scroller {
padding-bottom: 50px;
}
.progresscycle-wrapper {
width: 750px;
justify-content: center;
align-items: center;
/* border-color: red;
border-width: 1px; */
padding: 20px;
}
.progresscycle {
width: 480px;
height: 480px;
justify-content: center;
align-items: center;
}
.param-wrapper {
width: 750px;
padding-top: 32px;
padding-left: 32px;
padding-right: 32px;
background-image: linear-gradient(to bottom, #ffbb00, #ffaa10);
}
.item-group {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
.text-label {
font-family: PingFangSC-Regular;
font-size: 28px;
color: #000000;
width: 150px;
padding-top: 16px;
margin-bottom: 16px;
padding-right: 20px;
text-align: right;
}
.text-input {
flex: 1;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #000000;
border-radius: 4px;
border-color: #e5e5e8;
border-width: 1px;
/* height: 72px; */
padding-top: 16px;
padding-left: 22px;
padding-right: 50px;
padding-bottom: 16px;
margin-bottom: 16px;
background-color: #fafafa;
}
.btn-wrapper {
margin-bottom: 20px;
width: 750px;
align-items: center;
}
</style>
<script>
import { DofMinibar, DofButton} from 'dolphin-weex-ui'
export default {
components: {DofMinibar, DofButton },
data: () => ({
isShow: true,
intervalHandler: null,
step: 5,
chartData: {
"completedColor": "#eeffffff", //环形进度条未完成后的颜色默认#267AFF
"incompletedColor": "#eef5d5d5", //环形进度条未完成后的颜色，默认透明
"thickness": 6, //环形进度条宽度，默认4
"cornerRadius": 240, //环形的半径，默认是width/2
"totalCounter": 360, //环形进度条的最大值，默认是360
"progressCounter": 0, //设置进度值，默认是从0-360, 默认为0
"autoProgress": false, //设置是否需要自动执行环形进度，默认false, 如果设置为true，则每秒进度值+1操作
"clockwise": true, //环形自动执行进度的方向，默认是true，即顺时针方向，false为逆时针方向
"startingSlice": 180, //环形进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点
"pointShow": true, //环形进度中的进度球是否需要显示，默认不显示
"pointRadius": 8, //默认是环形进度宽度的一半
"pointColor": "#FFFFFF", //环形进度中的进度球颜色
"pointImageBase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAERklEQVRYR82Yf2jUdRjHX5875137cbcfOF1Omfij1DDC3BKEWeCPUMERy2pgkQvBQUY5EfrB6AfIlrVFG4gYJWmaxASV/AHlQKptRTRSywyHu5oudttOt+623T3x3Pe8rbntbiTdvv99P5/n83ne3/fn/Tyf5/ka4nkqxObKJd3RS1Y/FCI8JpBnDLOATASvQJuBVoSvptpoCKTQ6fPQTYUJxXJhYhlkV8t0PxRjWIeQH3Ya6zF0As0IJ51wtOMlc2O8JWOD2CtJbj9FCK8KLACcsXyPMu83cBnDOz1O6tlqBkbbY1QQGXvFHQpQJiHeABy6cKodpiXD/AxYPxcezIbcVEh3QrcfPLfgpw448Tv81gV/9UF/MOoyYGy8aXNQ27XV9IwEcgcI13syDzsVwDMI4fn7MmHT/ZbzBZlYg2M8Alz2WmCO/AK/eiOGBp06RJAK38vmyvDl/9pPGQj6qUV4CrAbA88uhp0FMD0ZptjiP5DBENzog8pG+OQCiEKAIIbDdidlwxkZAqEaCFAuwtvKQHISlD0EryyDe6ZYznsH4JoPzrbC6Va42gNdfshwwhw3rMmDVXkw2wUpSdaavwdhTzPU/gh9qgiDGMNrPQ6qbmskCsJdI0+KcEA1oAzsWDYEICjw/XU4cAGOX4GewNiMuB2wYR5sXgwPz1A6h4C82xxlJGAMm3u2m891pzAIDcMAnBFYou/PPQC7C4cY+PIqlJ8Dz83oJuOei35EbhpUrYTH5wwxsqsBPv7ZejfQ4oDVGr4GTUSZbCNElYahirC+CGamgjJwphVKTkAwZsq5E5fdBgfXw+o8i5E/bkLRsahY/dgo93mpM2kfSpYJ8inCWg3DXQWwfaklwsZ22HIK2nzxC3Kk5SwX7F8LBTkwEIIPfoDdjZHwNZwiSImZViPzA8J3mglnpkH9RiskVYQ7G+DgxfiOYCyYejQli6Cy0BKrhqyyoawAXofhEeOukVIR9unIytlwrMgSyqVOWHN0fBHGy4+K9XQxLMwinCw21sO5axFtCC8Yd7UcEnhah/Y8CqVhaVq0vX4+Xjex7d5aAS8utez2tcCOr6MC/cy4quUbYLkOnd0E+TOsyXVfwHlP7M3jtViRCyefsKybrsOqI9GV3+pxtImQq0OXtsC9qdbkoo+i5xavn3HtVG8Xn7dM/rwFC/dHmDB4FESvCMk61F4GyZHsmFMXyXB3BQJoBm7fZm3WNwg5tVEQfaqJNiGBTIBnkmhiMkSH+30pFZPgPJHQjGnodMDyyXF3hG/RdDR4/v9bFMp93dRNknoikowSXlmFcUyGGlNxjFlt50N2CiRNoNrWAqajFyqbJlJtR44l4X3H7bsqVge2YS4siXRgWu5r2a8dWEsHHL8bHVj00kx0Lzr89g535TaKkQl05eDF0PTfu/LhSDShuUh32MnqD1GIGfF/ArwiI/5PBOn0+eL7P/EPYtpkF4ik2AkAAAAASUVORK5CYII=", //环形进度中的进度球的图片base64
}
}),
methods: {
dofButtonClicked() {
let tempObj = JSON.parse(JSON.stringify(this.chartData))
if (this.intervalHandler) {
clearInterval(this.intervalHandler)
this.intervalHandler = null
} else {
this.intervalHandler = setInterval(() => {
tempObj.progressCounter += (this.step || 1)
if (tempObj.progressCounter >= tempObj.totalCounter) {
tempObj.progressCounter = tempObj.totalCounter
clearInterval(this.intervalHandler)
this.intervalHandler = null
}
this.chartData = JSON.parse(JSON.stringify(tempObj))
}, 1000);
}
},
dofButtonClicked1() {
let tempObj = JSON.parse(JSON.stringify(this.chartData))
tempObj.progressCounter += (this.step || 1)
if (tempObj.progressCounter <= tempObj.totalCounter) {
if (tempObj.progressCounter >= tempObj.totalCounter) {
tempObj.progressCounter = tempObj.totalCounter
clearInterval(this.intervalHandler)
this.intervalHandler = null
}
this.chartData = JSON.parse(JSON.stringify(tempObj))
}
},
dofButtonClicked2() {
this.isShow = false
this.$nextTick(() => {
this.isShow = true
})
},
dofButtonClicked3() {
let tempObj = JSON.parse(JSON.stringify(this.chartData))
tempObj.progressCounter = 0
this.chartData = JSON.parse(JSON.stringify(tempObj))
}
}
}
</script>
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | Object | N | 注1 | 环形进度条参数 |
- 注1
{
"completedColor": "#00ffff", //环形进度条未完成后的颜色默认#267AFF
"incompletedColor": "#eef5d5d5", //环形进度条未完成后的颜色，默认透明
"thickness": 4, //环形进度条宽度，默认4
"cornerRadius": 40, //环形的半径，默认是width/2
"totalCounter": 360, //环形进度条的最大值，默认是360
"progressCounter": 100, //设置进度值，默认是从0-360, 默认为0
"autoProgress": false, //设置是否需要自动执行环形进度，默认false, 如果设置为true，则每秒进度值+1操作
"clockwise": true, //环形自动执行进度的方向，默认是true，即顺时针方向，false为逆时针方向
"startingSlice": 180, //环形进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点
"pointShow": false, //环形进度中的进度球是否需要显示，默认不显示
"pointRadius": 8, //默认是环形进度宽度的一半
"pointColor": "#FFFFFF", //环形进度中的进度球颜色
"backgroundColor":"#FF3B30",//环形背景色默认透明
"backgroundRadius" : 48, //环形背景半径，默认和cornerRadius 持平
"text":"PCB", //中间字体
"textSize":18, //字体大小 默认14
"textColor":"#FFFFFF", //字体颜色
"pointImageBase64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAERklEQVRYR82Yf2jUdRjHX5875137cbcfOF1Omfij1DDC3BKEWeCPUMERy2pgkQvBQUY5EfrB6AfIlrVFG4gYJWmaxASV/AHlQKptRTRSywyHu5oudttOt+623T3x3Pe8rbntbiTdvv99P5/n83ne3/fn/Tyf5/ka4nkqxObKJd3RS1Y/FCI8JpBnDLOATASvQJuBVoSvptpoCKTQ6fPQTYUJxXJhYhlkV8t0PxRjWIeQH3Ya6zF0As0IJ51wtOMlc2O8JWOD2CtJbj9FCK8KLACcsXyPMu83cBnDOz1O6tlqBkbbY1QQGXvFHQpQJiHeABy6cKodpiXD/AxYPxcezIbcVEh3QrcfPLfgpw448Tv81gV/9UF/MOoyYGy8aXNQ27XV9IwEcgcI13syDzsVwDMI4fn7MmHT/ZbzBZlYg2M8Alz2WmCO/AK/eiOGBp06RJAK38vmyvDl/9pPGQj6qUV4CrAbA88uhp0FMD0ZptjiP5DBENzog8pG+OQCiEKAIIbDdidlwxkZAqEaCFAuwtvKQHISlD0EryyDe6ZYznsH4JoPzrbC6Va42gNdfshwwhw3rMmDVXkw2wUpSdaavwdhTzPU/gh9qgiDGMNrPQ6qbmskCsJdI0+KcEA1oAzsWDYEICjw/XU4cAGOX4GewNiMuB2wYR5sXgwPz1A6h4C82xxlJGAMm3u2m891pzAIDcMAnBFYou/PPQC7C4cY+PIqlJ8Dz83oJuOei35EbhpUrYTH5wwxsqsBPv7ZejfQ4oDVGr4GTUSZbCNElYahirC+CGamgjJwphVKTkAwZsq5E5fdBgfXw+o8i5E/bkLRsahY/dgo93mpM2kfSpYJ8inCWg3DXQWwfaklwsZ22HIK2nzxC3Kk5SwX7F8LBTkwEIIPfoDdjZHwNZwiSImZViPzA8J3mglnpkH9RiskVYQ7G+DgxfiOYCyYejQli6Cy0BKrhqyyoawAXofhEeOukVIR9unIytlwrMgSyqVOWHN0fBHGy4+K9XQxLMwinCw21sO5axFtCC8Yd7UcEnhah/Y8CqVhaVq0vX4+Xjex7d5aAS8utez2tcCOr6MC/cy4quUbYLkOnd0E+TOsyXVfwHlP7M3jtViRCyefsKybrsOqI9GV3+pxtImQq0OXtsC9qdbkoo+i5xavn3HtVG8Xn7dM/rwFC/dHmDB4FESvCMk61F4GyZHsmFMXyXB3BQJoBm7fZm3WNwg5tVEQfaqJNiGBTIBnkmhiMkSH+30pFZPgPJHQjGnodMDyyXF3hG/RdDR4/v9bFMp93dRNknoikowSXlmFcUyGGlNxjFlt50N2CiRNoNrWAqajFyqbJlJtR44l4X3H7bsqVge2YS4siXRgWu5r2a8dWEsHHL8bHVj00kx0Lzr89g535TaKkQl05eDF0PTfu/LhSDShuUh32MnqD1GIGfF/ArwiI/5PBOn0+eL7P/EPYtpkF4ik2AkAAAAASUVORK5CYII=", //环形进度中的进度球的图片base64
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
progresscycleTap | 点击组件是触发事件 | event |