使用纯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
}
效果：
方法一：border
我们知道利用border+宽高：0 可以实现如下效果 （假设圆的半径是100px）
如果要实现扇形在此基础上圆角一下即可，同时设置某一方颜色透明即可实现”某一块扇形”的视觉效果
方法二：矩形+半圆相切
基本思路是：左边的半圆旋转与右边的矩形相切。
至于细节：
1.半圆的由来：可以rect裁剪只显示圆的左边部分
2.同理，矩形也通过rect裁剪只显示右边部分，同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分
然后剩下的完善同样三个标签旋转一定角度。
画扇形统计图首先要知道什么是扇形统计图以及扇形统计图的一些基本知识。
扇形图，又叫扇形统计图，它是用整个圆表示总数，用圆内各个扇形的大小表示各部分数量占总数的百分数。
扇形统计图是用圆的面积代表事物总体，以扇形的面积和圆的面积的比值表示个项目占总体的百分数的统计图。
1.首先要计算出要填入扇形统计图的各个数据的百分比的比值，根据统计资料，整理或计算出必要的数据（包括部分占整体的百分数）。
2.用圆规画出一个圆。
3.确定好各个数据在扇形统计图中说占的比值（用量角器分别量出各个数据所占扇形的比值部分），根据数据，算出各部分扇形圆心角的度数根据需要，取适当的半径画圆，用量角器依次按圆心角把圆分成几个扇形。
4.填入各个数据所在位置的比值大小及数据名称，写出统计图标题，借助量角器完成扇形统计图，并在各扇形内标上每部分的内容及占总体的百分数。其中，用虚线、实线或不同颜色将各部分区分开来。
5，检查所做的扇形统计图及数据是否正确。
扩展资料
扇形统计图是用整个圆表示总数，也就是100o/o，并且扇形统计图用圆内各个扇形表示各个部分数量占总数的百分之几。
用扇形统计图可以清楚地表示出各部分数量与总数之间的关系。
从扇形统计图上可以直观地看出各部分数量的大小关系。
参考资料来源百度百科-扇形图
