一个饼状图显示几种类型所占比例样式代码

以下是一个使用 HTML 和 CSS 实现的简单饼状图样式代码，用于显示几种类型所占比例：

<div class="pie-chart">
  <div class="slice" data-value="30"></div>
  <div class="slice" data-value="20"></div>
  <div class="slice" data-value="50"></div>
</div>

<style>
.pie-chart {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.slice {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 100px, 50px);
  border-radius: 50%;
}

.slice:nth-child(1) {
  transform: rotate(0deg);
  background-color: #f00;
}

.slice:nth-child(2) {
  transform: rotate(30deg);
  background-color: #0f0;
}

.slice:nth-child(3) {
  transform: rotate(50deg);
  background-color: #00f;
}

[data-value="30"] {
  clip: rect(0, 50px, 100px, 0);
}

[data-value="20"] {
  clip: rect(0, 100px, 100px, 50px);
}

[data-value="50"] {
  clip: rect(0, 200px, 100px, 100px);
}

</style>

在上述代码中，使用了一个 `div` 元素作为饼状图的容器，并使用了三个 `div` 元素作为切片。每个切片都设置了不同的背景颜色，表示不同类型的比例。切片的大小和位置通过 `transform` 属性来控制。

为了让每个切片显示正确的比例，使用了 `data-value` 属性来存储每个类型的比例值，并使用了 `clip` 属性来裁剪切片的大小和位置。根据比例值计算出对应的裁剪区域，从而实现不同类型的比例。

您可以根据需要修改代码中的样式和比例值来适应不同的需求。