html 扇形360 c,css3实现360°扇形/饼图-简单易用

引入pie-shape.js (function(global, undefined){

var PieShape = function(options){

var

o = options || {},

wrap = document.createElement("div"),

half1 = document.createElement("div"),

half2 = document.createElement("div"),

halfSpan1 = document.createElement("span"),

halfSpan2 = document.createElement("span");

o = {

radius: o.radius || 400,

containerId: o.containerId || "",

containerClass: o.containerClass || "",

containerPosition: o.containerPosition || "absolute",

backgroundColor: o.backgroundColor || "",

parentNode: o.parentNode || document.getElementsByTagName("body")[0],

transition: undefined !== o.transition ? o.transition : true

};

var r = o.radius;

// 处理html元素

wrap.id = o.containerId,

wrap.className = "pieshape-wrap" + " " + o.containerClass,

wrap.style.width = r * 2 + "px",

wrap.style.height = r * 2 + "px",

wrap.style.borderRadius = r + "px",

wrap.style.position = o.containerPosition;

half1.className = "pieshape-half-1",

half2.className = "pieshape-half-2";

halfSpan1.style.borderRadius

= r + "px " + r + "px 0 0" ,

halfSpan2.style.borderRadius

= "0 0 " + r + "px " + r + "px",

halfSpan1.style.backgroundColor

= halfSpan2.style.backgroundColor

= o.backgroundColor,

halfSpan1.style.webkitTransform

= halfSpan2.style.webkitTransform

= "rotateZ(-180deg)";

o.transition && (

halfSpan1.style.webkitTransition

= halfSpan2.style.webkitTransition

= "-webkit-transform linear .3s"

),

halfSpan2.classList.add("hide"),

half1.appendChild(halfSpan1),

half2.appendChild(halfSpan2),

wrap.appendChild(half1),

wrap.appendChild(half2);

o.parentNode.appendChild(wrap);

// 保存元素

this._options = o,

this._wrap = wrap,

this._halfSpan1 = halfSpan1,

this._halfSpan2 = halfSpan2;

if("undefined" === typeof PieShape._initialized){

PieShape.prototype.setAngle = function(angle){

var pie1 = this._halfSpan1, pie2 = this._halfSpan2,

pie2Hide = pie2.classList.contains("hide"),

transition = this._options.transition;

if(0 <= angle && 180 >= angle){

if(pie2Hide){

pie1.style.webkitTransform = "rotateZ("+ (-180 + angle) + "deg)";

}else{

var handlePie = function(){

pie2.classList.add("hide"),

pie1.style.webkitTransform = "rotateZ("+ (-180 + angle) + "deg)",

removeEvent && pie2.removeEventListener("webkitTransitionEnd", handlePie, false);

}, removeEvent;

pie2.style.webkitTransform = "rotateZ(-180deg)";

if(transition)

removeEvent = true,

pie2.addEventListener("webkitTransitionEnd", handlePie, false);

else

removeEvent = false,

handlePie();

}

}else if(360 >= angle){

pie1.style.webkitTransform = "rotateZ(0)";

var showPie2 = function(){

pie2.classList.remove("hide"),

pie2.style.webkitTransform = "rotateZ("+ (-180 + angle - 180) + "deg)";

removeEvent && pie1.removeEventListener("webkitTransitionEnd", showPie2, false);

}, removeEvent;

if(transition && pie2Hide)

removeEvent = true,

pie1.addEventListener("webkitTransitionEnd", showPie2, false);

else

removeEvent = false,

showPie2();

}

},

PieShape.prototype.resize = function(radius){

var wrap = this._wrap,

halfSpan1 = this._halfSpan1,

halfSpan2 = this._halfSpan2,

r = radius;

wrap.style.width = r * 2 + "px",

wrap.style.height = r * 2 + "px",

halfSpan1.style.borderRadius

= r + "px " + r + "px 0 0" ,

halfSpan2.style.borderRadius

= "0 0 " + r + "px " + r + "px",

this._options.radius = radius;

},

PieShape.prototype.teardown = function(){

this._wrap.parentNode.removeChild(this._wrap),

this._wrap

= this._halfSpan1

= this._halfSpan2

= this.teardown

= this.resize

= this.setAngle = null;

},

PieShape._initialized = true;

}

};

if ( "function" === typeof define && define.amd ) {

define( "PieShape", [], function() {

return PieShape;

});

}else{

global.PieShape = PieShape;

}

})("undefined" !== typeof window ? window : this);