├── README.md
├── cricleRoundring.js
├── exmaple.png
└── yuanhuan.html
/README.md:
--------------------------------------------------------------------------------
1 | ## 前言
2 | 百度echart中并没有圆角环形图，highchart的圆角环形图和项目中的有些出入，因此，写了一个，在这里分享一下
3 |
4 | ## 示例图片
5 |
6 | 
7 |
8 | ## 参数
9 |
10 |
11 | * @param {type} radius 圆环半径
12 | * @param {type} lineWidth 圆环宽度
13 | * @param {type} strokeStyle 默认背景
14 | * @param {type} fillStyleArray 数组，圆环色块颜色
15 | * @param {type} capType 类型：round是圆角，square正方形顶帽，butt是正常
16 | * @param {type} percentArray ，数字，每个占据的百分比
17 | * @param {type} startAngle 开始的角度
18 | * @param {type} criclex，cricley 圆心坐标，一般是canvas的一半，例如：canvas给的宽度是250，高度是250，那么criclex是125
19 | * @returns {Circle}
20 |
21 |
22 |
23 | ## 使用方法
24 |
25 |
26 | var canvas = document.getElementById('canvas');
27 | var ctx = canvas.getContext('2d');
28 | var ring = new Ring("80", "25", "#ccc", ["#a1b91d", "#e9636a", "#e7ba21"], "round");
29 | ring.drawRing(ctx, 2 * Math.PI / 3, [20, 50, 30],125,125);//占据的百分比分别是20%，50%，30%,圆心是125，,125
30 |
31 |
32 |
33 | ## demo案例
34 |
35 | http://resource.haorooms.com/uploads/demo/canvas/cricleRoundring/yuanhuan.html
36 |
37 |
--------------------------------------------------------------------------------
/cricleRoundring.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @param {type} radius 圆环半径
4 | * @param {type} lineWidth 圆环宽度
5 | * @param {type} strokeStyle 默认背景
6 | * @param {type} fillStyleArray 数组，圆环色块颜色
7 | * @param {type} capType 类型：round是圆角，square正方形顶帽，butt是正常
8 | * @returns {Circle} criclex、cricley圆心坐标
9 | * author haorooms
10 | *
11 | */
12 | function Circle(radius, lineWidth, strokeStyle, fillStyleArray, capType) {
13 | this.radius = radius; // 圆环半径
14 | this.lineWidth = lineWidth; // 圆环边的宽度
15 | this.strokeStyle = strokeStyle; //边的颜色
16 | this.fillStyle = fillStyleArray; //填充色
17 | this.lineCap = capType;
18 | }
19 | Circle.prototype.draw = function (ctx,criclex,cricley) {
20 | ctx.beginPath();
21 | ctx.arc(criclex, cricley, this.radius, 0, Math.PI * 2, true); // 坐标为90的圆，这里起始角度是0，结束角度是Math.PI*2
22 | ctx.lineWidth = this.lineWidth;
23 | ctx.strokeStyle = this.strokeStyle;
24 | ctx.stroke(); // 这里用stroke画一个空心圆，想填充颜色的童鞋可以用fill方法
25 | };
26 | function Ring(radius, lineWidth, strokeStyle, fillStyleArray, capType) {
27 | Circle.call(this, radius, lineWidth, strokeStyle, fillStyleArray, capType);
28 | }
29 | Ring.prototype = Object.create(Circle.prototype);
30 |
31 | Ring.prototype.drawRing = function (ctx, startAngle, percentArray ,criclex,cricley) {
32 | startAngle = startAngle || 3 * Math.PI / 2;
33 | percentArray = percentArray || [];
34 | this.draw(ctx,criclex,cricley); // 调用Circle的draw方法画圈圈
35 | var _this = this;
36 | // angle
37 | percentArray.forEach(function (item, index) {
38 | ctx.beginPath();
39 | var anglePerSec = 2 * Math.PI / (100 / item); // 蓝色的弧度
40 | ctx.arc(criclex, cricley, _this.radius, startAngle, startAngle + anglePerSec, false); //这里的圆心坐标要和cirle的保持一致
41 | startAngle = startAngle + anglePerSec;
42 | ctx.strokeStyle = _this.fillStyle[index];
43 | ctx.lineCap = _this.lineCap;
44 | ctx.stroke();
45 | ctx.closePath();
46 | })
47 | //小圆圈覆盖
48 | ctx.beginPath();
49 | ctx.arc(criclex, cricley, _this.radius, startAngle, startAngle, false); //这里的圆心坐标要和cirle的保持一致
50 | ctx.strokeStyle = _this.fillStyle[0];
51 | ctx.lineCap = _this.lineCap;
52 | ctx.stroke();
53 | ctx.closePath();
54 | }
--------------------------------------------------------------------------------
/exmaple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/confidence68/cricleRoundring/9a6f3031cd38239743fcfad283e62c4ef3512c29/exmaple.png
--------------------------------------------------------------------------------
/yuanhuan.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 圆角环形
13 |
14 |
15 |
16 |
17 |
18 |
19 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------