CSS是實現網頁布局的重要工具，除此之外，它還可以用來繪制具有一定美觀度的圖表。在這里，我將向大家介紹一種使用CSS來實現圓圖表的方法。

.circle{
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(90deg, #FFC300 50%, transparent 50%),
linear-gradient(90deg, #E0E0E0 50%, #FFC300 50%);
background-size: 100% 50%;
position: relative;
}
.circle:before{
content: "";
display: block;
padding-top: 100%;
}
.circle .num{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}

首先，我們需要創建一個圓形div，將其寬高設置為相同的值，并將border-radius設置為50%。接著，我們可以使用linear-gradient定義兩個背景，并將其大小設置為100%和50%。這樣，我們就可以得到一個半圓的背景。

在創建完背景之后，我們創建一個偽元素來撐開div，使其占位。接著，我們在圓形div內部創建一個裝圓圖表數字的元素，并將其絕對定位在圓心位置。最后，我們通過transform屬性將其定位到正中央。

現在，我們已經成功地實現了一個圓形圖表的樣式，下一步是將其與數據關聯起來。我們可以通過JS來讀取數據，并將其轉換為角度值來表示圓圖表的百分比。我們可以通過設置裝圓圖表數字的元素的內容，并動態地修改rotate屬性來展示出數據。

在整個實現過程中，CSS起到了非常重要的作用，它不僅使得圖表具有了美觀度，還為JS提供了必要的定位信息。