https://aquaplumb.cz/templates/Aquaplumb/js/progress-circle/jQuery.circleProgressBar.js

1(function($) {
2
3    $.fn.percentageLoader = function(options) {
4
5        this.each(function() {
6            var $this = $(this);
7            //配置项
8            var config = $.extend({}, $.fn.percentageLoader.defaultConfig, options);
9
10            var val = parseInt($this.children(config.valElement).text()),
11                init = true,
12                speed = 200,
13                w = parseInt($this.css('width')),
14                h = parseInt($this.css('height')),
15                rx = w / 2,
16                ry = h / 2,
17                r = rx - config.strokeWidth / 2,
18                z = null,
19                txt = null,
20                dstop = null;
21
22            var paper = Raphael(this, w, h);
23
24            function minit() {
25                //构造圆环
26                //自定义arc属性，传入进度值80%，总份数100%，半径80
27                paper.customAttributes.arc = function(value, total, R) {
28                    var alpha = 360 / total * value, //角度
29                        a = (90 - alpha) * Math.PI / 180, //弧度
30                        x = rx + R * Math.cos(a),
31                        y = ry - R * Math.sin(a),
32                        path;
33                    if (total == value) {
34                        path = [
35                            ["M", rx, ry - R],
36                            ["A", R, R, 0, 1, 1, rx - 0.01, ry - R]
37                            //半长轴，
38                            //半短轴，
39                            //x轴与水平线夹角
40                            //1代表大角度弧线，0代表小角度弧线
41                            //1代表顺时针画弧，0代表逆时针
42                            //结束点的x，y坐标
43                        ];
44                    } else {
45                        path = [
46                            ["M", rx, ry - R],
47                            ["A", R, R, 0, +(alpha > 180), 1, x, y]
48                        ];
49                    };
50
51                    return {
52                        path: path
53                    };
54                };
55                //绘制背景圆环
56                paper.path().attr({
57                    arc: [100, 100, r],
58                    'stroke-width': config.strokeWidth,
59                    'stroke': config.bgColor
60                });
61                if (!!val) {
62                    z = paper.path().attr({
63                        arc: [0.01, 100, r],
64                        'stroke-width': config.strokeWidth,
65                        'stroke': config.ringColor,
66                        'cursor': "pointer"
67                    });
68                    updateVal(val, 100, r, z, 2);
69                }
70
71                txt = paper.text(rx, ry, val + "%").attr({
72                    font: config.fontWeight + " " + config.fontSize + " Arial",
73                    fill: config.textColor
74                });
75            };
76            minit();
77            // //色谱
78            // function getColor(size) {
79            //  var arr = [];
80            //  for (var i = 0; i <= 255; i++) {
81            //      arr.push("rgb(" + i + "," + (255 - i) + "," + 0 + ")");
82            //  }
83            //  console.log(arr);
84            //  return arr[parseInt(size * 2.55)];
85            // }; 
86            //环形动起来和事件绑定
87            function updateVal(value, total, R, hand, id) {
88                if (init) {
89                    hand.animate({
90                        arc: [value, total, R]
91                    }, 900, ">");
92                } else {
93                    if (!value || value == total) {
94                        value = total;
95                        hand.animate({
96                            arc: [value, total, R]
97                        }, 750, "bounce", function() {
98                            hand.attr({
99                                arc: [0, total, R]
100                            });
101                        });
102                    } else {
103                        hand.animate({
104                            arc: [value, total, R]
105                        }, 750, "elastic");
106                    }
107                }
108            };
109
110        });
111
112    };
113    //默认值
114    $.fn.percentageLoader.defaultConfig = {
115        valElement: 'p',
116        strokeWidth: 20,
117        bgColor: '#d9d9d9',
118        ringColor: '#d53f3f',
119        textColor: '#9a9a9a',
120        fontSize: '12px',
121        fontWeight: 'normal'
122    };
123
124})(jQuery);