【CSS】饼图（双色）

微信订阅号：Rabbit_svip 微信订阅号：Rabbit_svip

这是本节用纯CSS做出来的效果。当然，最后还会用JS模拟接收后台数据来控制饼图的比例。

本节的核心思想是通过CSS做出上面两种效果。

要做到上图的效果，首先要有以下基础知识：

【CSS】渐变背景（background-image）
【CSS】椭圆、半圆、1/4圆

---

现在画饼图的方法非常多，可以用 echarts.js、G2.js、chart.js、flotr2等 JS 库，也可以用SVG，也可以用Canvas来画。

上述的方法本节都不会讲到。本节只讲解如何用 CSS 画出基本饼图。

用CSS画饼图的核心思想如下图所示

微信订阅号：Rabbit_svip

蓝色是最底层的圆，并设置了overflow: hidden;
红色代表另一个比例(比率)，放在蓝色圆的子层。

核心思路：把圆形的两个占比部分指定两种颜色，然后用伪元素覆盖上去，通过旋转来决定比率。

---

先来演示一下上面最简单的圆。

【方法 1-1】
HTML代码

<div class="pie"></div>

CSS代码

.pie {
  width: 200px;
  height: 200px;
  background: #1d365d;
  border-radius: 50%;
  background-image: linear-gradient(to right, transparent 50%, #ff2d51 0);
}

这里用了背景渐变的方式，很轻巧的就把效果做出来了。

微信订阅号：Rabbit_svip

当然，也可以用伪元素的方式来写。

方法 1-2】
HTML代码

<div class="pie"></div>

CSS代码

.pie {
  width: 200px;
  height: 200px;
  background: #1d365d;
  border-radius: 50%;
  overflow: hidden;
}
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  background: #ff2d51;
}

也能达到几乎相同的效果。效果图我就不上了。

需要注意的是，用伪元素写的话，主元素要设置overflow: hidden;
又或者给伪元素设置适合的 border-radius。

border-radius: 0 100% 100% 0 / 50%;

---

如果饼图的比例不是1:1，是更加复杂的比例，就要用【方法1-1】配合伪元素来做了。
逻辑如下图所示：

微信订阅号：Rabbit_svip

我们可以通过 rotate() 变形属性让这个伪元素旋转起来。

比如要显示10%的比率，可以指定旋转值为36deg（1.2 x 360 = 36）。当然，写成 0.1turn 会显得更加直观一些。

设置旋转之前，要先设置好旋转的中心点（transform-origin: 0 50%;）。

HTML代码

<div class="pie"></div>

CSS代码

.pie {
  width: 200px;
  height: 200px;
  background-color: #1d365d;
  border-radius: 50%;
  background-image: linear-gradient(to right, transparent 50%, #ff2d51 50%);
}

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  background-color: inherit;
  border-radius: 0 100% 100% 0 / 50%;
  transform-origin: left;
  transform: rotate(.1turn);
}

微信订阅号：Rabbit_svip

还没完！

此时这个饼图在 0 - 500% 的比率时是能正常显示的，但如果超过 50 % 结果就变成如下图所示

微信订阅号：Rabbit_svip

通过观察可以发现上图是这样的

微信订阅号：Rabbit_svip

当超过50%时，应该换另一种思路。

伪元素应该一直在右边，然后把伪元素的颜色改成底圆右边的颜色。

当伪元素的比率是51% - 100%的时候，就用当前比率 减去 50。

微信订阅号：Rabbit_svip

这样就能做出 50%- 100% 比率的饼图了。

HTML代码

<div class="pie"></div>

CSS代码

.pie {
  width: 200px;
  height: 200px;
  background-color: #1d365d;
  border-radius: 50%;
  background-image: linear-gradient(to right, transparent 50%, #ff2d51 50%);
}

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  background-color: #ff2d51;
  border-radius: 0 100% 100% 0 / 50%;
  transform-origin: left;
  transform: rotate(.1turn);
}

微信订阅号：Rabbit_svip

以上就是用 纯CSS 画饼图是思路。

如果需要在中间加上数字来显示占比，可以在底圆设置position: relative;
然后在底圆的元素里面再添加一个 div 元素，调整该 div 元素的样式即可。

---

上面的思路是完完全全可以画一个简单的饼图的。但通常页面是活的，数据是能改变的。当数据是动态的改变的时候，就只能借助JS来动态显示了。

完整代码