echarts的饼图制作分析

echarts底层是使用canvas的类库ZRender实现的，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

看了echarts的饼状图，思考了他的实现方法

那么canvas怎么绘制饼状图呢？下面上代码：

var canvas=document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var x = canvas.width/2,//饼图圆心x
			y = canvas.height/2,//饼图圆心y
			persent = 0.5,//半径占的百分比
			radial = (x>y?y:x)*persent,
			value1 = 20,
			value2=30,
			value3=40,
			sum=value1+value2+value3;
			//定义扇形方法，封装功能
		CanvasRenderingContext2D.prototype.sector = function(x,y,radial,start,end){
		this.beginPath();
		this.moveTo(x,y);
		this.arc(x,y,radial,start,end);
		this.closePath();
		return this;
		}
		ctx.fillStyle = 'red';
		//调用绘制扇形
		ctx.sector(x,y,radial,0,value1*2*Math.PI/sum).fill();
		ctx.fillStyle = 'green';
		ctx.sector(x,y,radial,value1*2*Math.PI/sum,(value1*2*Math.PI/sum+value2*2*Math.PI/sum)).fill();
		ctx.fillStyle = 'blue';
		ctx.sector(x,y,radial,(value1*2*Math.PI/sum+value2*2*Math.PI/sum),2*Math.PI).fill();