<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/animsition.min.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/drop-down.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/common.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/qk.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/xgzb.css" />
	</head>
	<body>
		
		<div class="data_wrap" style="background: #efeff5; width: 1020px; padding: 10px; overflow: hidden;">
		    <div class="animsition">

				<div class="qk_wrap" style=" margin-bottom: 10px;">
					<div>
						<div id="main4" class="my_main" style="width: 1020px;"></div>
					</div>
					
				</div>

				<div class="xhzb_wrap" style="height: 250px">
					<div>
						<div id="main11" class="my_main3"></div>
					</div>
				</div>
				<div class="xhzb_wrap" style="height: 250px">
					<div>
						<div id="main10" class="my_main3"></div>
					</div>
				</div>

				<div class="qk_wrap" style=" margin-bottom: 10px;">
					<div>
						<div id="main1" class="my_main" style="width: 630px;"></div>
					</div>
					<div>
						<div id="main2" class="my_main" style="width: 380px;"></div>
					</div>
				</div>

			</div>
		    </div>
		</div>
		
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
		<script src="__TMPL__/public/rfm/js/select-widget-min.js"></script>
		<script src="__TMPL__/public/rfm/js/jquery.animsition.min.js"></script>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
		<script src="__TMPL__/public/rfm/js/macarons .js"></script>
		<script src="__TMPL__/public/rfm/js/common.js"></script>


		<script src="__TMPL__/public/rfm/js/select-widget-min.js"></script>
		<script src="__TMPL__/public/rfm/js/jquery.animsition.min.js"></script>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
		<script>
			$(document).ready(function() {
  			  //初始化切换
			  $(".animsition").animsition({
			  
			    inClass               :   'fade-in-right',
			    outClass              :   'fade-out',
			    inDuration            :    1500,
			    outDuration           :    800,
			    linkElement           :   '.animsition-link',
			    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
			    loading               :    true,
			    loadingParentElement  :   'body', //animsition wrapper element
			    loadingClass          :   'animsition-loading',
			    unSupportCss          : [ 'animation-duration',
			                              '-webkit-animation-duration',
			                              '-o-animation-duration'
			                            ],
			    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
			    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
			    
			    overlay               :   false,
			    
			    overlayClass          :   'animsition-overlay-slide',
			    overlayParentElement  :   'body'
			  });
			  
			  //虚拟数据
			 	var date = ['2016/11/1','2016/11/2','2016/11/3','2016/11/4','2016/11/5','2016/11/6','2016/11/7','2016/11/8','2016/11/9','2016/11/10',
				'2016/11/11','2016/11/12','2016/11/13','2016/11/14','2016/11/15','2016/11/16','2016/11/17','2016/11/18'
				,'2016/11/19','2016/11/20','2016/11/21','2016/11/22','2016/11/23','2016/11/24','2016/11/25','2016/11/26','2016/11/27'
				,'2016/11/28','2016/11/29','2016/11/30'];
				
				
				function my_data(){
					var data = [];
					for( var i =0; i<30; i++){
						data.push(Math.round(Math.random() * (500 - 100) + 100));
					};
					return data;
				}
			   var num = my_data();
			   var bl = '30%';

                var axisData = [
                    "2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30",
                    "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6",
                    "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20",
                    "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27",
                    "2013/2/28", "2013/3/1", "2013/3/4", "2013/3/5", "2013/3/6",
                    "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", "2013/3/13",
                    "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20",
                    "2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27",
                    "2013/3/28", "2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3",
                    "2013/4/8", "2013/4/9", "2013/4/10", "2013/4/11", "2013/4/12",
                    "2013/4/15", "2013/4/16", "2013/4/17", "2013/4/18", "2013/4/19",
                    "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", "2013/4/26",
                    "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8",
                    "2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15",
                    "2013/5/16", "2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22",
                    "2013/5/23", "2013/5/24", "2013/5/27", "2013/5/28", "2013/5/29",
                    "2013/5/30", "2013/5/31", "2013/6/3", "2013/6/4", "2013/6/5",
                    "2013/6/6", "2013/6/7", "2013/6/13"
                ];
                function GetData(){
                    var myData = [];
                    for( var i = 0; i < axisData.length; i++ ){
                        myData.push( Math.round(Math.random() * 10000) );
                    };
                    return myData;
                };

                function GetDataHg(){
                    var myData = [];
                    for( var i = 0; i < axisData.length; i++ ){
                        myData.push( Math.round(Math.random() * 100) );
                    };
                    return myData;
                };




			     // 路径配置
		        require.config({
		            paths: {
		                echarts: 'http://echarts.baidu.com/build/dist'
		            }
		        });
		        
		        // 使用
		        require(
		            [
		                'echarts',
		                'echarts/chart/bar',
		                'echarts/chart/line',
		                'echarts/chart/pie'// 使用柱状图就加载bar模块,按需加载
		            ],
		            function (ec) {
		                // 基于准备好的dom,初始化echarts图表
		                var myChart = ec.init(document.getElementById('main1'),'macarons');
		                var myChart2 = ec.init(document.getElementById('main2'),'macarons');
		                var myChart4 = ec.init(document.getElementById('main4'),'macarons');
                        var myChart10 = ec.init(document.getElementById('main10'),'macarons');
                        var myChart11 = ec.init(document.getElementById('main11'),'macarons');

		                var option = {
			        	backgroundColor:'white',
			        		title:{
			        			text : '新老客户分析',
			        			y: '15'
			        		},
						    tooltip : {
						        trigger: 'axis',
						         formatter : function(data){
						        	//console.log(data);
						        	var str = data[1].name ;
						        	str += '</br>新客户人数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>新客户销售额:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>新客户成交笔数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>老客户人数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>老客户销售额:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>老客户成交笔数:' + data[1].value + ' 占比:' + bl;
						        	
						        	return str;
						        }
						    },
						    legend: {
						    	selectedMode : false,
						        data:['新客户','老客户'],
						        y:'20'
						    },
						   grid:{
						   	y:'100'
						   },
						    toolbox: {
						        show : false,
						        y:'20',
						        feature : {
						            mark : {show: false},
						            dataView : {show: true, readOnly: false},
						            magicType : {show: true, type: ['line', 'bar']},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    dataZoom : {
						        show : true,
						        realtime : true,
						        y: 320,
						        height: 20,
						        start : 85,
						        end : 100
						    },
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : true,
						            data : date
						        }
						    ],
						    yAxis : [
						        {
						        	name : '人数',
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'新客户',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
						            data:my_data()
						        },
						        {
						            name:'老客户',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
						            data:my_data()
						        },
						        
						    ]
						};
						var option2 = {
						title:{
		        			text : '普通客户 忠诚客户 骨灰级客户分析',
		        			y: '15'
		        		},
			        	backgroundColor:'white',
						    tooltip : {
						        trigger: 'axis',
						        formatter : function(data){
						        var str = data[1].name ;
						        	str += '</br>普通客户人数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>普通客户销售额:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>普通客户成交笔数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>忠诚客户人数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>忠诚客户销售额:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>忠诚客户成交笔数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>骨灰级客户人数:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>骨灰级客户销售额:' + data[1].value + ' 占比:' + bl;
						        	str += '</br>骨灰级客户成交笔数:' + data[1].value + ' 占比:' + bl;
						        	
						        	return str;
						        }
						    },
						    legend: {
						    	selectedMode : false,
						        data:['普通客户','忠诚客户','骨灰级客户分析'],
						        y:'20'
						    },
						   grid:{
						   	y:'100'
						   },
						    toolbox: {
						        show : false,
						        y:'20',
						        feature : {
						            mark : {show: false},
						            dataView : {show: true, readOnly: false},
						            magicType : {show: true, type: ['line', 'bar']},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    dataZoom : {
						        show : true,
						        realtime : true,
						        y: 320,
						        height: 20,
						        start : 70,
						        end : 100
						    },
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : true,
						            data : date
						        }
						    ],
						    yAxis : [
						        {
						        	name : '人数',
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'普通客户',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
						            data:my_data()
						        },
						         {
						            name:'忠诚客户',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
						            data:my_data()
						        },
						         {
						            name:'骨灰级客户分析',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
						            data:my_data()
						        }
						        
						    ]
						};
						var option4 = {
						title:{
		        			text : '昨日订单来源分析',
		        			y: '15'
		        		},
						backgroundColor:'white',
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient : 'vertical',
					        x : 'right',
					        y : 'center',
					        data:['PC端','移动端','微信']
					    },
					    toolbox: {
					        show : false,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType : {
					                show: true, 
					                type: ['pie', 'funnel'],
					                option: {
					                    funnel: {
					                        x: '25%',
					                        width: '50%',
					                        funnelAlign: 'center',
					                        max: 1548
					                    }
					                }
					            },
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : false,
					    series : [
					        {
					            name:'客户来源',
					            type:'pie',
					            center:['40%','55%'],
					            radius : ['40%', '52%'],
					            itemStyle : {
					                normal : {
					                    label : {
					                        show : false
					                    },
					                    labelLine : {
					                        show : false
					                    }
					                },
					                emphasis : {
					                    label : {
					                        show : true,
					                        position : 'center',
					                        textStyle : {
					                            fontSize : '30',
					                            fontWeight : 'bold'
					                        }
					                    }
					                }
					            },
					            data:[
					                {value:335, name:'PC端'},
					                {value:310, name:'移动端'},
					                {value:234, name:'微信'}
					            ]
					        }
					    ]
					};
                        var option10 = {
                            backgroundColor : "white",
                            color : ["#c05050","#59678c"],
                            title : {
                                x : '980',
                                y : 'center',
                                text: '回\n购\n率',
                                textStyle : {
                                    fontSize : 16
                                }
                            },
                            tooltip : {
                                trigger: 'axis',

                                showDelay: 0,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
                                formatter: "{b}</br>{a} : {c}%"

                            },
                            dataZoom : {
                                show : true,
                                realtime: true,
                                y : 220,
                                height: 20,
                                start : 96,
                                end : 100
                            },
                            calculable : true,
                            grid: {
                                x: 80,
                                y: 40,
                                x2:60,
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : true,
                                    data : axisData
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    scale:true,

                                }
                            ],
                            series : [
                                {
                                    name:'回购率',
                                    type:'line',
                                    //stack: '人数',
                                    barWidth : 10,
                                    data:GetDataHg()
                                }
                            ]
                        };
                        var option11 = {
                            backgroundColor : "white",
                            color : ["#59678c"],
                            title : {
                                x : '980',
                                y : 'center',
                                text: '活\n跃\n度',
                                textStyle : {
                                    fontSize : 16
                                }
                            },
                            tooltip : {
                                trigger: 'axis',

                                showDelay: 0,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
                                formatter: "{b}</br>{a} : {c}%"

                            },
                            dataZoom : {
                                show : true,
                                realtime: true,
                                y : 220,
                                height: 20,
                                start : 96,
                                end : 100
                            },

                            calculable : true,
                            grid: {
                                x: 80,
                                y: 40,
                                x2:60,
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : true,
                                    data : axisData
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    scale:true,

                                }
                            ],
                            series : [
                                {
                                    name:'活跃度',
                                    type:'line',
                                    //stack: '人数',
                                    barWidth : 10,
                                    data:GetDataHg()
                                }
                            ]
                        };

		                // 为echarts对象加载数据 
		                myChart.setOption(option); 
		                myChart2.setOption(option4);
			        	myChart4.setOption(option2);
                        myChart10.setOption(option10);
                        myChart11.setOption(option11);
		            }
		        );
			});
		</script>
	</body>
</html>