/cricleRoundring

百度echart中并没有圆角环形图，highchart的圆角环形图和项目中的有些出入，因此，写了一个，在这里分享一下

Primary LanguageJavaScript

前言

百度echart中并没有圆角环形图，highchart的圆角环形图和项目中的有些出入，因此，写了一个，在这里分享一下

示例图片

示例图片

参数

 * @param {type} radius 圆环半径
 * @param {type} lineWidth 圆环宽度
 * @param {type} strokeStyle 默认背景
 * @param {type} fillStyleArray 数组，圆环色块颜色
 * @param {type} capType 类型：round是圆角，square正方形顶帽，butt是正常
 * @param {type} percentArray ，数字，每个占据的百分比
 * @param {type} startAngle 开始的角度
 * @param {type} criclex，cricley 圆心坐标，一般是canvas的一半，例如：canvas给的宽度是250，高度是250，那么criclex是125
 * @returns {Circle}

使用方法

            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var ring = new Ring("80", "25", "#ccc", ["#a1b91d", "#e9636a", "#e7ba21"], "round");
            ring.drawRing(ctx, 2 * Math.PI / 3, [20, 50, 30],125,125);//占据的百分比分别是20%，50%，30%,圆心是125，,125

demo案例

http://resource.haorooms.com/uploads/demo/canvas/cricleRoundring/yuanhuan.html