Home

通过css3的旋转属性来实现饼图的效果。封装了一个饼图类，通过实例化来生成各种样式的饼图。

以前一直用highcharts做饼图的效果，但有时候，一些比较简单的饼图用highcharts的话有点杀鸡用牛刀的感觉。所以自己研究了一下如何用css3来达到这个效果。并封装了一下，写了一个 pie.js 。

原理是这样的，父容器是一个div，背景颜色是左边一半灰色，右边一半绿色。

里面有2个可以旋转的div，小于50%的时候，第一个div是灰色的，顺时针旋转一下就好了，即用灰色遮绿色。

如果超过50%了，则需要用到第二个绿色的div，也是顺时针旋转一下，是绿色遮灰色的底。

有兴趣的同学可以fork一下。

效果 如图所示

####html是这样的，用data-value属性来存要显示的百分比。

<div class="pie" id="colorful-pie" data-value="0.2"></div>

####然后实例化一个饼图,有一些参数，可配可不配。

var myPie = new Pie({
	el : ‘#colorful-pie’,  // 选择器
	animite : true,        // 是否要有动画效果
	ring : 0.7,            // 中间是否要空心，并设置空心的半径 
	color : '#ff9933'      // 自定义饼图的颜色,
    number :false,         // 是否要显示中间的百分比
    rotate : -40           // 设置起点角度，默认是从12点钟方向开始的
});
myPie.init();    // 实例化

这样使用起来感觉也相当的方便了。

PS： 应该还有更好的方法来实现，希望大家能告诉我。多谢！