# 9.4 圆环进度图（circle-progress）
通过圆环的UI样式，体现数据百分比。
使用规则
多用于耗材相关数据展示，以图形化的方式，辅助使用进度数字展示。# 实例 :
圆环进度图
扫码预览
# 基础用法
<template>
<div class="box">
<dof-minibar title="midea-circle-progress"></dof-minibar>
<div style="padding: 30px;">
<dof-row class="showItem" style="padding-top: 32px;">
<dof-col class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson1 }"> </midea-circle-progress-view>
<text class="contentText">智能杯贴</text>
<text class="contentTip">再饮200ml达标</text>
</dof-col>
<dof-col class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson2 }"> </midea-circle-progress-view>
<text class="contentText">智能杯贴</text>
<text class="contentTip">已达标</text>
</dof-col>
<dof-col class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson3 }"> </midea-circle-progress-view>
<text class="contentText">智能杯贴</text>
<text class="contentTip">再饮800ml达标</text>
</dof-col>
</dof-row>
<dof-row class="showItem" style="padding-top: 32px;">
<dof-col class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson4 }"> </midea-circle-progress-view>
<text class="contentText">滤芯1</text>
</dof-col>
<dof-col class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson5 }"> </midea-circle-progress-view>
<text class="contentText">滤芯2</text>
</dof-col>
<dof-col class="circleItem">
<midea-circle-progress-view class="circle" :data="{ ...common, ...chartJson6 }"> </midea-circle-progress-view>
<text class="contentText">滤芯3</text>
</dof-col>
</dof-row>
</div>
</div>
</template>
<script>
import { DofMinibar, DofRow, DofCol } from 'dolphin-weex-ui'
module.exports = {
components: {
DofMinibar,
DofRow,
DofCol
},
data: () => ({
common: {
completedColor: '#FFFFFF', //已完成后的颜色默认#FFFFFF
backgroundColor: '#1a1a1c', //背景色 默认为#000000
backCircleColor: '#434345', //进度背景色，默认为#3d3d3f
lineWidth: 2, //线宽 默认为2
textFont: 14 //字体大小，默认为14
},
chartJson1: {
progress: 0.85, // 进度 0 -1
text: '85%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson2: {
progress: 1, // 进度 0 -1
text: '100天', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson3: {
progress: 0.05, // 进度 0 -1
text: '5%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson4: {
progress: 0.85, // 进度 0 -1
text: '85%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
},
chartJson5: {
progress: 0, // 进度 0 -1
text: '已过期', //文本 默认为空
textColor: '#B35336' //文本颜色，默认#FFFFFF
},
chartJson6: {
progress: 0.05, // 进度 0 -1
text: '5%', //文本 默认为空
textColor: '#ffffff' //文本颜色，默认#FFFFFF
}
}),
mounted() {},
methods: {}
}
</script>
<style scoped>
.box {
background-color: #29292c;
}
.showItem {
background-color: #1a1a1c;
/* width: 600px; */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
margin-bottom: 24px;
}
.circle {
width: 118px;
height: 118px;
}
.circleItem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 248px;
}
.contentText {
font-family: PingFangSC-Medium;
font-size: 28px;
color: #ffffff;
text-align: center;
font-weight: 500;
margin-top: 20px;
margin-bottom: 8px;
}
.contentTip {
font-family: PingFangSC-Regular;
font-size: 24px;
color: #71717a;
font-weight: 400;
margin-bottom: 28px;
}
</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
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | Object | Y | {} | 配置参数 |
# 参数详情： data （注 1）
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
progress | number | N | 0 | 进度 0-1 |
text | string | N | `` | 圆环中间文本 默认为空 |
textColor | string | N | #ffffff | 文本颜色，默认#FFFFFF |
completedColor | string | N | #ffffff | 已完成后的颜色默认#FFFFFF |
backgroundColor | string | N | #000000 | 背景色 默认为#000000 |
backCircleColor | string | N | #434345 | 进度背景色，默认为#3d3d3f |
lineWidth | number | N | 2 | 线宽 默认为2 |
textFont | number | N | 14 | 字体大小，默认为14 |