config.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. $(window).load(function(){
  2. initStyles1();
  3. });
  4. function initStyles1() {
  5. // 设置环状统计报表
  6. var viewWidth = $('.work-circlebg').width(); //屏幕宽度
  7. var diameter = viewWidth ; // 图标宽度
  8. var high = diameter; // 图标高度
  9. var radius1 = high/2; // 外环半径
  10. var radius2 = radius1-3; // 内环半径
  11. var cx = diameter/2; // x轴坐标
  12. var cy = high*0.50; // y轴坐标
  13. var percentnum = $('.flow_text1 span').text();
  14. dial(percentnum,diameter,high,cx,cy,radius1,radius2,"flow_chartCvs1","gradient"); // 第一个数值即为百分比数值
  15. }
  16. function dial(percent,width,height,cx,cy,r1,r2,eleId,colorFlag){
  17. var paper = Raphael(document.getElementById(eleId),width,height);
  18. var a = 225 - percent * 270 / 100, a0 = 225;
  19. var dial_0 = paper.path(doughnut_path(cx,cy,r1,r2,-45,225)).attr({"fill":"#FFF","stroke":"none"}),
  20. dial_1 = paper.path(doughnut_path(cx,cy,r1,r2,225,225)).attr({"fill":"#fff","stroke":"none"});
  21. if (colorFlag=="gradient") {
  22. dial_0.attr(
  23. {
  24. "fill":"#c6ea91"
  25. }
  26. )
  27. dial_1.attr(
  28. {
  29. gradient: '#FE7E56',
  30. 'stroke-linejoin': 'round',
  31. rotation: -90
  32. }
  33. );
  34. };
  35. drawTemp();
  36. function drawTemp(){
  37. if(a0>a){
  38. a0--;
  39. dial_0.attr({"path":doughnut_path(cx,cy,r1,r2,-45,a0)});
  40. dial_1.attr({"path":doughnut_path(cx,cy,r1,r2,a0-1,225)});
  41. setTimeout(drawTemp,1);
  42. }
  43. }
  44. function doughnut_path(cx,cy,r1,r2,startAngle,endAngle){
  45. var rad = Math.PI / 180;
  46. var x1 = cx + r1 * Math.cos(-startAngle * rad), y1 = cy + r1 * Math.sin(-startAngle * rad),
  47. x2 = cx + r2 * Math.cos(-startAngle * rad), y2 = cy + r2 * Math.sin(-startAngle * rad),
  48. x3 = cx + r2 * Math.cos(-endAngle * rad), y3 = cy + r2 * Math.sin(-endAngle * rad),
  49. x4 = cx + r1 * Math.cos(-endAngle * rad), y4 = cy + r1 * Math.sin(-endAngle * rad); //四点坐标
  50. 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"];
  51. }
  52. }