餅圖是數(shù)據(jù)可視化的重要形式之一，能夠直觀地展示數(shù)據(jù)的占比和比例關(guān)系。在網(wǎng)頁設(shè)計(jì)中，我們可以利用CSS來繪制簡單的餅圖。

// HTML代碼
<div class="pie">
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
</div>
// CSS代碼
.pie {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e5e5e5;
}
.slice {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0, 100px, 200px, 0);
border-radius: 50%;
border: 100px solid #3498db;
transform: rotate(0deg);
}
.slice:nth-child(1) {
transform: rotate(0deg);
}
.slice:nth-child(2) {
transform: rotate(45deg);
border-color: #e67e22;
}
.slice:nth-child(3) {
transform: rotate(90deg);
border-color: #16a085;
}
.slice:nth-child(4) {
transform: rotate(135deg);
border-color: #f1c40f;
}

在這段CSS代碼中，我們首先定義了一個(gè)占滿父容器的圓形，即“餅”的形狀。然后，利用position: absolute和clip屬性，將圓形切割為四個(gè)部分，每個(gè)部分代表一份數(shù)據(jù)。最后利用transform屬性實(shí)現(xiàn)旋轉(zhuǎn)效果，使每個(gè)部分正好對應(yīng)到相應(yīng)的數(shù)據(jù)占比。

以上僅僅是一個(gè)簡單的例子，我們可以根據(jù)需求調(diào)整顏色、大小、切割份數(shù)等參數(shù)，實(shí)現(xiàn)更加復(fù)雜的餅圖。同時(shí)，我們也可以利用JS動態(tài)生成和更新餅圖數(shù)據(jù)，實(shí)現(xiàn)更加靈活的數(shù)據(jù)可視化效果。