CSS條形統(tǒng)計(jì)圖是一種用于展示數(shù)據(jù)的頁面元素，由多個矩形組成，每個矩形的高度表示對應(yīng)的數(shù)據(jù)節(jié)點(diǎn)的數(shù)值大小。下面我們將介紹如何創(chuàng)建一個簡單的CSS條形統(tǒng)計(jì)圖。

HTML代碼實(shí)現(xiàn)：
<div class="bar-chart">
<div class="bar" style="height: 80%;"></div>
<div class="bar" style="height: 60%;"></div>
<div class="bar" style="height: 90%;"></div>
</div>
CSS代碼實(shí)現(xiàn)：
.bar-chart {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 300px;
width: 500px;
padding-bottom: 20px;
border: 1px solid #ccc;
}
.bar {
width: 30%;
background-color: #0099ff;
}

以上代碼中，我們創(chuàng)建了一個容器 div.bar-chart，存放多個矩形表示數(shù)據(jù)節(jié)點(diǎn)。每個矩形都使用 div.bar 來表示，通過修改樣式 height 來設(shè)置矩形的高度。

容器采用 flex 布局，通過設(shè)置 justify-content：space-between 來讓多個矩形等距分布在容器中間。因?yàn)槊總€矩形的高度是不同的，我們設(shè)置 align-items：flex-end 來讓每個矩形底部對齊。

這里我們只設(shè)置了三個矩形，如果要展示更多的數(shù)據(jù)節(jié)點(diǎn)，可以通過設(shè)置多個 div.bar 元素來實(shí)現(xiàn)。

同時，我們?yōu)槿萜髟O(shè)置了邊框，以增加整個圖表的可讀性。