整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
lt;div class="sector"></div>
.sector{
width: 200px;
height: 200px;
border-radius: 200px;
background-color: deepskyblue;
position: relative;
}
.sector::before{
content: "";
width: 200px;
height: 200px;
position: absolute;
background-color: white;
border-radius: 200px;
/*裁减半圆，再做旋转*/
clip: rect(0px,100px,200px,0);
transform: rotate(-60deg);
}
.sector::after{
content: "";
width: 200px;
height: 200px;
position: absolute;
background-color: white;
border-radius: 200px;
/*裁减半圆，再做旋转*/
clip: rect(0px,200px,200px,100px);
transform: rotate(60deg);
}方式二
<>
<style>
#demo {
position: relative;
width: 50px;
height: 50px;
overflow: hidden;
}
#circle {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
}
</style>
<body>
<div id="demo">
<div id="circle"></div>
</div>
</body>
</>方式三
网上统计图插件非常多，比如Echarts、Chart.js等，但是如果你要的是功能简单，单一的统计图，应用这些就会很浪费，也增加自身体积，如果你想要简单的扇形统计图，请看过来！
Canvas绘制扇形统计图，50行代码的统计图
Canvas绘制扇形统计图，50行代码的统计图
Canvas绘制扇形统计图，50行代码的统计图
Canvas绘制扇形统计图，50行代码的统计图
// 示例一
drawCircle({
id: 'one',//dom元素
color: '#10af7e',//颜色
bgLine: '#e4e4e4',//背景颜色
angle: 0.5,//所占比例
lineWidth: 15,//宽度(像素)
lineCap: 'round'//描边的样式
});
// 示例二
drawCircle({
id: 'two',
angle: 0.75,
color: '#49b1f5',
bgLine: '#f3766f',
lineWidth: 20
});
// 示例三
drawCircle({
id: 'three',
angle: 1,
lineWidth: 25,
color: 'grd'
});
这里的css主要是用来[示例页面](http://demo.javanx.cn/canvas-charts/)布局的，可以直接忽略
.box ul, .box li {
list-style: none;
margin: 0;
padding: 0;
}
.box ul li {
float: left;
width: 33%;
text-align: center;
}
需要源码和演示地址的同学，点击下方“了解更多”！
更多资源敬请关注！
ss3给我们前端开发带来了很便利, 我们可以使用css3
*请认真填写需求信息，我们会在24小时内与您取得联系。
