# 简易饼图
背景知识： gradient (opens new window), animation (opens new window), SVG (opens new window)
1 rotate()
2 css动画
3 从指定位置开始动画
4 SVG 将dasharray转化为百分比
5 SVG 添加多种颜色
<style>
.main-pie-chart{
width: 100%;
padding: 60px 0;
}
.main-pie-chart .chart{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin-bottom: 29px;
}
.main-pie-chart .chart > p{
width: 199px;
}
.main-pie-chart .chart > div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #E8E2D6;
background-image: linear-gradient(to right, transparent 50%, #b4a078 0);
}
.main-pie-chart .chart:nth-of-type(1) div::before {
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background-color: inherit;
transform-origin: 0 50%;
transform: rotate(.3turn);
}
.main-pie-chart .chart:nth-of-type(2) div::before{
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background-color: inherit;
transform-origin: 0 50%;
animation: pie-chart-spin1 3s linear 1.6 forwards,
pie-chart-bg1 3s step-end 1 forwards;
}
.main-pie-chart .chart:nth-of-type(3) > div::before{
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background-color: inherit;
transform-origin: 0 50%;
animation: pie-chart-spin1 3s linear 1.6 forwards,
pie-chart-bg1 3s step-end 1 forwards;
}
.main-pie-chart .chart:nth-of-type(3) > div::before{
animation-delay: -1.5s;
}
.main-pie-chart svg{
width: 100px; height: 100px;
transform: rotate(-90deg);
background: #E8E2D6;
border-radius: 50%;
}
.main-pie-chart .chart:nth-of-type(4) svg > circle{
fill: #E8E2D6;
stroke: #b4a078;
stroke-width: 32;
stroke-dasharray: 0 100;
animation: pie-chart-fillup 6s linear infinite;
}
.main-pie-chart .chart:nth-of-type(5) svg > circle:nth-of-type(1){
fill: #fff;
stroke: #b4a078;
stroke-width: 32;
stroke-dasharray: 0 100; /*36%*/
stroke-dashoffset: -64;
animation: pie-chart-per1 2s linear 1 forwards;
}
.main-pie-chart .chart:nth-of-type(5) svg > circle:nth-of-type(2){
fill: transparent;
stroke: #cabca0;
stroke-width: 32;
stroke-dasharray: 0 100; /*32%*/
stroke-dashoffset: -32;
animation: pie-chart-per2 2s linear 1 forwards;
}
.main-pie-chart .chart:nth-of-type(5) svg > circle:nth-of-type(3){
fill: transparent;
stroke: #e1d9c9;
stroke-width: 32;
stroke-dasharray: 0 100; /*32%*/
stroke-dashoffset: 0;
animation: pie-chart-per3 2s linear 1 forwards;
}
@keyframes pie-chart-spin1 {
to { transform: rotate(.5turn); }
}
@keyframes pie-chart-bg1 {
to { background: #b4a078; }
}
@keyframes pie-chart-spin2 {
to { transform: rotate(.5turn); }
}
@keyframes pie-chart-bg2 {
50% { background: #b4a078; }
}
@keyframes pie-chart-fillup{
to { stroke-dasharray: 100 100; }
}
@keyframes pie-chart-per1{
to { stroke-dasharray: 37 100; }
}
@keyframes pie-chart-per2{
to { stroke-dasharray: 32 100; }
}
@keyframes pie-chart-per3{
to { stroke-dasharray: 32 100; }
}
</style>
<template>
<div class="main-pie-chart">
<div class="chart">
<p>1 rotate()</p>
<div class="pie"></div>
</div>
<div class="chart">
<p>2 css动画</p>
<div class="pie"></div>
</div>
<div class="chart">
<p>3 从指定位置开始动画</p>
<div class="pie"></div>
</div>
<div class="chart">
<p>4 SVG 将dasharray转化为百分比</p>
<svg viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16"></circle>
</svg>
</div>
<div class="chart">
<p>5 SVG 添加多种颜色</p>
<svg viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16"></circle>
<circle r="16" cx="16" cy="16"></circle>
<circle r="16" cx="16" cy="16"></circle>
</svg>
</div>
</div>
</template>
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
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
显示代码 复制代码 复制代码
← parallel四边形 其他多边形 →