基于ocanvas.js的饼图实例展示

ocanvas是一个全局对象，它包含了所有的模块，以及核心构造函数和一些其他的方法。

#方法及属性
1.oCanvas.create(canvas,background,clearEachFrame,drawEachFrame,fps,plugins,disableScrolling) 
   设置新的核心实例。参数设置：
   canvas：指定的canvas元素,字符串或者一个HTMLCanvasElement；
   background：设置画布背景色；默认值：“透明”
   clearEachFrame：指定时间轴模块是否在每帧之前清除画布；默认值：true
   drawEachFrame：指定时间轴模块是否在每帧之后绘制画布；默认值：true
   fps：时间轴和动画模块每秒的帧数将运行；默认值：30
   plugins：设置应在此核心实例上使用的插件。该数组包含插件名称；默认值：[]
   disableScrolling：禁用在触摸设备上滚动。默认值：false

2.canvas实例.display.arc({})  属性：
   direction：定义角度的方向,可以是clockwise或anticlockwise。默认：clockwise
   end：结束角度。值0对应于east
   pieSection：默认值：false
   radius：弧的半径
   start：起始角度。值0对应于east

3.canvas实例.display.text({}) 创建文本对象

#画图实例（复合饼图、双饼图）

//html代码
<div class="canvasPie">
	<div class="page3"></div>
	<canvas id="canvas"></canvas>
</div>

//JavaScript代码
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ocanvas.min.js"></script>
<script type="text/javascript">
//定义所需参数
var dpr=Number($("html").attr("data-dpr")),//获取当前的dpr
    st=dpr>1?1: 2,//缩放系数
    fs=Number($("html").css("fontSize").replace("px",""))*st,//获取根目录下的字体大小
    fst=fs/st,//获取根目录下的字体大小
 	data = [60,90,30,50,100,30], //各扇形角度
	scale = [0.3,0.5,0.6,0.8,0.4,1],  //各深色扇形的直径比例
	width = $("#canvas").width(),  //画布宽度
	height = $("#canvas").height(),  //画布高度
	colorBg=["rgba(139,113,205,.3)","rgba(237,209,1,.3)","rgba(0,124,226,.3)","rgba(1,162,217,.3)","rgba(80,194,135,.3)","rgba(242,171,48,.3)"],  //各浅色扇形背景色
	color=["#8b71cd","#edd101","#007ce2","#01a2d9","#50c287","#f2ab4e"];  //各深色扇形背景色

//创建画布
var canvas = oCanvas.create({
	canvas: "#canvas",
	width: width,
	height: height,
	fps: 60
});
//设置画布宽高
canvas.width = width;
canvas.height = height;
var arc = canvas.display.arc({
	x: canvas.width / 2,
	y: canvas.height / 2,
	radius: canvas.height / 3,
	pieSection: true
});


//添加点击事件并重绘
function bindEvent(item){
	item.bind("mouseenter touchenter", function () {
		var index = this._index;
		bgPie[index].radius = canvas.height / 3 + 10;
		bgPie[index].fill = "#d97b00";
		pieces[index].radius = pieces[index]._radius + 10;
		pieces[index].fill = "#ff9000";
		canvas.redraw();
	}).bind("mouseleave touchleave", function () {
		var index = this._index;
		bgPie[index].radius = canvas.height / 3;
		bgPie[index].fill = colorBg[index];
		pieces[index].radius = pieces[index]._radius;
		pieces[index].fill = color[index];
		canvas.redraw();
	});
}

//饼状图旋转动画方法
function rotateScale(end,dom,radius,cb) {
    var ease="ease-out-quart",durTime=500;
    //圆圈动画
    dom.stop().animate({rotation: end,opacity:1,radius:radius}, {
        duration:durTime,
        easing: ease,
        callback: function () {
            if(cb) cb(dom,end,radius);
        }
    });
}

//生成引导线
function labelLine(item){
	var _end = item._end;
	var _start = item._start;
	var rad= Math.PI/180,//计算常量
		sectorR = canvas.height / 3,
		page3W = $(".page3").width();
		page3H = $(".page3").height();
        thisC={x:page3W / 2,y:page3H / 2},
        endX=thisC.x+(sectorR+15)* Math.cos((_end+_start)/2 * rad),
        endY=thisC.y+(sectorR+15)* Math.sin((_end+_start)/2 * rad),
        dom2X=endX<page3W /2?(endX-30):endX,
        dom3X=endX<page3W /2?dom2X:dom2X+30;
        dom4X=endX<page3W /2?dom3X-fst/2:dom3X-fst*3/5,
        dom4Y=endY<page3W /2?endY-40:endY;

    var html = "<hr class='lines line"+i+"_1'>"
	    + "<hr class='line"+i+"_2 smlines'>"
	    + "<div class='bounce"+i+"_3 bounces'></div>"
	    + "<h4 class='title"+i+"_4 animated300 titles delay100'>寿险<br>2143万</h4>";

	$(".page3").append(html);
    $(".page3 .line"+i+"_1").css({
        left: thisC.x,
        top: thisC.y,
        transform:'rotate('+(_end+_start)/2+"deg"+')',
        webkitTransform:'rotate('+(_end+_start)/2+"deg"+')',
        width:(sectorR+15)+"px",
        borderTopColor:color
    });
    $(".page3 .line"+i+"_2").css({
        left: dom2X,
        top: endY,
        borderTopColor:color
    });
    $(".page3 .bounce"+i+"_3").css({
        left:dom3X ,
        top: endY-0.04*fst,
        backgroundColor:color
    });
    $(".page3 .title"+i+"_4").css({
        left:dom4X ,
        top: dom4Y,
        color:color
    })
}

//生成扇形组合
var pieces = [], bgPie = [], whitePie = [], detailPie = [], end, lastEnd;
for (var i = 0; i < data.length; i++) {
	end = (i > 0 ? lastEnd : 0) + 360 / (360 / data[i]) - (i < 1 ? 90 : 0);
	//背景图
	bgPie.push(arc.clone({
		start: (i < 1 ? -90 : lastEnd),
		end: end,
		radius: canvas.height / 3,
		fill: colorBg[i]
		// shadow: "0 0 20px rgba(81,166,255, 0.8)"
	}));
	canvas.addChild(bgPie[i]);
	bgPie[i]._index = i;
	bgPie[i]._start = bgPie[i].start;
	bgPie[i]._end = bgPie[i].end;
	bgPie[i]._radius = bgPie[i].radius;
	//比例
	pieces.push(arc.clone({
		start: (i < 1 ? -90 : lastEnd),
		end: end,
		radius: (canvas.height / 3-canvas.height / 6)*scale[i]+canvas.height / 6,
		fill: color[i]
	}));
	canvas.addChild(pieces[i]);
	//内圆详情
	var circleInner = canvas.display.ellipse({
        x: canvas.width / 2,
		y: canvas.height / 2,
        radius: canvas.height / 7-5,
        stroke: 10+"px #fff",
        fill:"radial-gradient(#fff, #f7fcff, #e0f2ff)"
    });
    canvas.addChild(circleInner);
	//详情文字
	var buttonText = canvas.display.text({
		x: canvas.width / 2,
		y: canvas.height / 2,
		origin: { x: "center", y: "center" },
		align: "center",
		font: "100 14px sans-serif",
		text: "详情",
		fill: "#0084ff"
	});
	canvas.addChild(buttonText);

	lastEnd = end;
	pieces[i]._index = i;
	pieces[i]._start = pieces[i].start;
	pieces[i]._end = pieces[i].end;
	pieces[i]._radius = pieces[i].radius;
	pieces[i]._fill = pieces[i].fill;

	//动画
    var direction=i%2==0?"+":"-";
    rotateScale(direction+360,bgPie[i],bgPie[i]._radius,function(dom,end){dom.rotation=0;dom._rotation=0;});
    rotateScale(direction+360,pieces[i],pieces[i]._radius,function(dom,end){dom.rotation=0;dom._rotation=0;});

	//添加点击事件并重绘
	bindEvent(bgPie[i]);
	bindEvent(pieces[i]);
	//引导线
	labelLine(bgPie[i]);

	circleInner.bind("touchenter",function(){
		window.location.href="https://www.baidu.com/";
	})
	buttonText.bind("touchenter",function(){
		window.location.href="https://www.baidu.com/";
	})

}

setTimeout(function(){
    $(".page3").addClass("fadeIn");
    // $(".page3 .sector_liner .titles").addClass("bounceInRight");
},300);

	</script>