svg 畫圓餅、圓環

最近簡單的瞭解了下使用svg來繪製圓餅和圓環，由於要在圓餅、圓環上加標註，感覺位置不好控制，最後還是選擇使用echarts，這裏分享部分代碼，感興趣可以玩玩，代碼如下：

<svg id="" style="" viewBox="0,0,640,800" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
		<!-- <circle :cx="width/2" :cy="height/2" :r="width/3" stroke="black" stroke-width="2" fill="red"></circle> -->
		<path id="mypath1" :d='d1' stroke="none" fill="red"></path>
		<path id="mypath2" :d='d2' stroke="none" fill="blue"></path>
		<path id="mypath3" :d='d3' stroke="none" fill="green"></path>
		<path id="mypath4" :d='d4' stroke="none" fill="yellow"></path>
</svg>

1、順時針圓環

var Xo = this.width / 2
var Yo = this.height / 2
var rate = 30
var r = 100
document.getElementById('mypath').setAttribute('transform', 'translate(' + this.width/2 + ',' + this.height/2 + ')');
var progress = rate / 100.0
var degrees = progress * 360
var rad = degrees * (Math.PI / 180)
var x =  (Math.sin(rad) * r).toFixed(2)
var y =  - (Math.cos(rad) * r).toFixed(2)
// 大於180度時候畫大角度弧，小於180度的畫小角度弧，(deg > 180) ? 1 : 0
var lenghty = window.Number(degrees > 180)
this.d1 =  'M '+' '+ 0 +' '+ -r +' A '+ r+' '+ r+' '+ 0+' '+ lenghty+' '+ 1+' '+ x+' '+ y 

2.逆時針圓環

var Xo = this.width / 2
var Yo = this.height / 2
var rate = 30
var r = 100
document.getElementById('mypath').setAttribute('transform', 'translate(' + this.width/2 + ',' + this.height/2 + ')');
var progress = rate / 100.0
var degrees = progress * 360
var rad = degrees * (Math.PI / 180)
var x =  - (Math.sin(rad) * r).toFixed(2)
var y =  - (Math.cos(rad) * r).toFixed(2)
// 大於180度時候畫大角度弧，小於180度的畫小角度弧，(deg > 180) ? 1 : 0
var lenghty = window.Number(degrees > 180)
this.d1 =  'M '+' '+ 0 +' '+ -r +' A '+ r+' '+ r+' '+ 0+' '+ lenghty+' '+ 0+' '+ x+' '+ y 

3.繪製順時扇圖

this.rates = new Array()
this.rates[0] = 30
this.rates[1] = 20
this.rates[2] = 30
this.rates[3] = 20
var rad = 0
var Xo = this.width / 4
var Yo = this.height / 2
//-----------------
this.ratetemp = rad
rate = this.rates[0]
document.getElementById('mypath' + 1).setAttribute('transform', 'translate(' + Xo + ',' + Yo + ')');
var progress = rate / 100.0
var degrees = progress * 360
var rad = degrees * (Math.PI / 180)
var x = (Math.sin(rad) * this.r).toFixed(2)
var y = -(Math.cos(rad) * this.r).toFixed(2)
var lenghty = window.Number(this.rates[0] / 100.0 * 360 > 180)
this.d1 = 'M ' + 0 + ' ' + 0 + ' L ' + ' ' + this.r * Math.sin(this.ratetemp) + ' ' + -this.r * Math.cos(this.ratetemp) +
	' A ' + this.r + ' ' + this.r + ' ' + 0 + ' ' + lenghty + ' ' + 1 + ' ' + x + ' ' + y + ' L ' + 0 + ' ' + 0
this.r += this.radd
// ----------------
this.ratetemp = rad
var rate = rate + this.rates[1]
document.getElementById('mypath' + 2).setAttribute('transform', 'translate(' + Xo + ',' + Yo + ')');
var progress = rate / 100.0
var degrees = progress * 360
var rad = degrees * (Math.PI / 180)
x = (Math.sin(rad) * this.r).toFixed(2)
y = -(Math.cos(rad) * this.r).toFixed(2)
// document.getElementById('mytext' + 2).setAttribute('transform', 'translate(' + Xo + ',' + Yo + ')');
// this.x1 = (parseFloat(this.r * Math.sin(this.ratetemp)) + parseFloat(x)) / 2
// this.y1 = (-(Math.cos(this.ratetemp) * this.r).toFixed(2) + y) / 2
var lenghty = window.Number(this.rates[1] / 100.0 * 360 > 180)
this.d2 = 'M ' + 0 + ' ' + 0 + ' L ' + ' ' + (Math.sin(this.ratetemp) * this.r).toFixed(2) + ' ' + -this.r * Math
	.cos(this.ratetemp) + ' A ' + this.r + ' ' + this.r + ' ' + 0 + ' ' + lenghty + ' ' + 1 + ' ' + x + ' ' + y +
	' L ' + 0 + ' ' + 0
this.r += this.radd
// ----------======
this.ratetemp = rad
var rate = rate + this.rates[2]
document.getElementById('mypath' + 3).setAttribute('transform', 'translate(' + Xo + ',' + Yo + ')');
var progress = rate / 100.0
var degrees = progress * 360
var rad = degrees * (Math.PI / 180)
x = parseFloat((Math.sin(rad) * this.r).toFixed(2))
y = -(Math.cos(rad) * this.r).toFixed(2)
// document.getElementById('mytext' + 3).setAttribute('transform', 'translate(' + Xo + ',' + Yo + ')');
// this.x2 = (parseFloat(this.r * Math.sin(this.ratetemp)) + parseFloat(x)) / 2
// this.y2 = (-(Math.cos(this.ratetemp) * this.r).toFixed(2) + y) / 2
var lenghty = window.Number(this.rates[2] / 100.0 * 360 > 180)
this.d3 = 'M ' + 0 + ' ' + 0 + ' L ' + ' ' + (Math.sin(this.ratetemp) * this.r).toFixed(2) + ' ' + -this.r * Math
	.cos(this.ratetemp) + ' A ' + this.r + ' ' + this.r + ' ' + 0 + ' ' + lenghty + ' ' + 1 + ' ' + x + ' ' + y +
	' L ' + 0 + ' ' + 0
this.r += this.radd
// ----------======
this.ratetemp = rad
var rate = rate + this.rates[3]
// document.getElementById('mypath' + 4).setAttribute('transform', 'translate(' + Xo + ',' + Yo + ')');
var progress = rate / 100.0
var degrees = progress * 360
var rad = degrees * (Math.PI / 180)
x = parseFloat((Math.sin(rad) * this.r).toFixed(2))
y = -(Math.cos(rad) * this.r).toFixed(2)
// document.getElementById('mytext' + 4).setAttribute('transform', 'translate(' + Xo + ',' + Yo + ')');
// this.x3 = (parseFloat(this.r * Math.sin(this.ratetemp)) + parseFloat(x)) / 2
// this.y3 = (-(Math.cos(this.ratetemp) * this.r).toFixed(2) + y) / 2
var lenghty = window.Number(this.rates[3] / 100.0 * 360 > 180)
this.d4 = 'M ' + 0 + ' ' + 0 + ' L ' + ' ' + (Math.sin(this.ratetemp) * this.r).toFixed(2) + ' ' + -this.r * Math
	.cos(this.ratetemp) + ' A ' + this.r + ' ' + this.r + ' ' + 0 + ' ' + lenghty + ' ' + 1 + ' ' + x + ' ' + y +
	' L ' + 0 + ' ' + 0
this.r += this.radd