使用纯css制作扇形图，合并起来形成饼图：
应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图
html：<div id="circle">11</div>
css：
#circle{
width:0
height:0
border-radius:100px
border-width:100px
border-style:solid
border-color: red blue green yellow
line-height:99em
overflow:hidden
cursor:pointer
margin: 30px auto
}
效果：
4.同样我们对其中三个边框设置透明色即可得到扇形
html：<div id="fan">11</div>
css:
#fan{
width:0
height:0
border-radius:100px
border-width:100px
border-style:solid
border-color:red transparent transparent transparent
line-height:99em
overflow:hidden
cursor:pointer
margin: 30px auto
}
效果：
项目需要做个环形的导航排列，网上找到一篇详细介绍原理的文章 javascript-按圆形排列DIV元素(一)---- 分析 ，然后尝试着把它实现了，效果图如下：
源码分享给大家哦，拿走不谢O(∩_∩)O
vue版本的根据项目需求做了些略微的修改
