css饼图制作

使用CSS制作饼图的方法

使用conic-gradient实现基础饼图

通过CSS的conic-gradient可以快速创建饼图。这种方法适合展示简单的比例分布。

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #FF6384 0% 30%,
    #36A2EB 30% 70%,
    #FFCE56 70% 100%
  );
}

使用transform和伪元素创建动画饼图

通过旋转伪元素实现更复杂的动画效果，适合需要交互的场景。

.pie-animated {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background: #FF6384;
  overflow: hidden;
}

.pie-animated::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #36A2EB;
  transform: rotate(0.3turn);
  transform-origin: left;
  animation: rotate 2s ease-in-out;
}

@keyframes rotate {
  from { transform: rotate(0turn); }
  to { transform: rotate(0.3turn); }
}

使用CSS变量实现动态饼图

结合CSS变量和JavaScript可以实现动态更新的饼图。

<div class="pie-dynamic" style="--percentage: 65;"></div>

.pie-dynamic {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #4CAF50 calc(var(--percentage) * 1%),
    #ddd 0
  );
}

多段饼图的高级实现

对于需要展示多个数据段的场景，可以通过叠加多个conic-gradient实现。

.pie-multi {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    conic-gradient(
      transparent 0 25%,
      #FF6384 0
    ),
    conic-gradient(
      transparent 0 50%,
      #36A2EB 0
    ),
    conic-gradient(
      transparent 0 75%,
      #FFCE56 0
    ),
    conic-gradient(
      transparent 0 100%,
      #9966FF 0
    );
  background-blend-mode: overlay;
}

添加标签和边框效果

为饼图添加装饰性元素增强可视化效果。

.pie-decorated {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #FF6384 0% 30%,
    #36A2EB 30% 70%,
    #FFCE56 70% 100%
  );
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  position: relative;
}

.pie-decorated::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: white;
  top: 10%;
  left: 10%;
}

每种方法都有其适用场景，从简单的静态展示到复杂的动态交互都能覆盖。现代CSS特性如conic-gradient大大简化了饼图的实现过程，而结合CSS变量和动画可以创建更丰富的可视化效果。