$(window).load(function(){ initStyles1(); }); function initStyles1() { // 设置环状统计报表 var viewWidth = $('.work-circlebg').width(); //屏幕宽度 var diameter = viewWidth ; // 图标宽度 var high = diameter; // 图标高度 var radius1 = high/2; // 外环半径 var radius2 = radius1-3; // 内环半径 var cx = diameter/2; // x轴坐标 var cy = high*0.50; // y轴坐标 var percentnum = $('.flow_text1 span').text(); dial(percentnum,diameter,high,cx,cy,radius1,radius2,"flow_chartCvs1","gradient"); // 第一个数值即为百分比数值 } function dial(percent,width,height,cx,cy,r1,r2,eleId,colorFlag){ var paper = Raphael(document.getElementById(eleId),width,height); var a = 225 - percent * 270 / 100, a0 = 225; var dial_0 = paper.path(doughnut_path(cx,cy,r1,r2,-45,225)).attr({"fill":"#FFF","stroke":"none"}), dial_1 = paper.path(doughnut_path(cx,cy,r1,r2,225,225)).attr({"fill":"#fff","stroke":"none"}); if (colorFlag=="gradient") { dial_0.attr( { "fill":"#c6ea91" } ) dial_1.attr( { gradient: '#FE7E56', 'stroke-linejoin': 'round', rotation: -90 } ); }; drawTemp(); function drawTemp(){ if(a0>a){ a0--; dial_0.attr({"path":doughnut_path(cx,cy,r1,r2,-45,a0)}); dial_1.attr({"path":doughnut_path(cx,cy,r1,r2,a0-1,225)}); setTimeout(drawTemp,1); } } function doughnut_path(cx,cy,r1,r2,startAngle,endAngle){ var rad = Math.PI / 180; var x1 = cx + r1 * Math.cos(-startAngle * rad), y1 = cy + r1 * Math.sin(-startAngle * rad), x2 = cx + r2 * Math.cos(-startAngle * rad), y2 = cy + r2 * Math.sin(-startAngle * rad), x3 = cx + r2 * Math.cos(-endAngle * rad), y3 = cy + r2 * Math.sin(-endAngle * rad), x4 = cx + r1 * Math.cos(-endAngle * rad), y4 = cy + r1 * Math.sin(-endAngle * rad); //四点坐标 return ["M",x2,y2,"A",r2,r2, 0, +(endAngle - startAngle > 180),0,x3,y3,"L",x4,y4,"A",r1,r1,0,+( endAngle - startAngle > 180),1,x1,y1,"z"]; } }