微信订阅号：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来动态显示了。
网友评论