<div id="piechart" class="page out" data-title="饼状图插件">
	<div id="piechart-header"></div>
	<div id="piechart-a"></div>
    <div id="piechart-b"></div>
</div>
<script>
require(["NavHeader", "PieChart"], function(NavHeader, PieChart) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "piechart-header",
			option: {
				title:"饼状图插件", 
				smallTitle:"piechart"
			}
		}).render();
	}
	new PieChart({
		el: "piechart-a",
		option: {
			chartType : "pie",//pie 饼状图 donut 环形图
			data : [	
			 	{"name":"直接访问","value":"335"},
			 	{"name":"邮件营销","value":"310"},
			 	{"name":"联盟广告","value":"234"},
			 	{"name":"视频广告","value":"135"},
			 	{"name":"搜索引擎","value":"1548"}
			],//图表数据
			height : 400,//图表高度
			title : {
				show : true,
				text : "某站点用户访问来源",//标题
				subtext: "纯属虚构"//副标题
			},
			legend : {
				show : true,//是否显示图例
				bottom : "bottom",//图例底部边距
				left:5,
				right:5
			},
			label : {
				show : true,
				position : "outside",//标签位置  inside图表里部  outside图表外部
				textStyle:{
                	fontSize:12 //标签字体大小
                }
			},
			labelLine : {
				show : true,//是否显示引线
				length : 5,//第一段引线长度
				length2 : 5//第二点引线长度
			},
			radius : 60,//图表直径,取值0-100，控制饼图大小
			color:"#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色，默认
			click : function(params){
				var url = "/mobilemode/mobile/demo/plugin/NewChart/detail.html?name="+params.name+"&seriesname="+params.seriesName+"&value="+params.value;
				$u(url, true);
			}
		}
	}).render().then(function(){
		if (!hasClsPicker) return;
		_u.vetically("#piechart-a");
		clsPicker.golalSetting({
			container: "#piechart-a",
			type: "Piechart"
		});
		new clsPicker({
			selector: ".wev-chart-container",
			text: ".wev-chart-container",
			skew: [10, 9],
			lineYSkew: 30,
			position: "bottom right"
		});
	});
});
</script>