lihai
/
PingAnYeXianSZCG_Web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="../css/bootstrap.min.css" />
		<link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
		<link href="../css/animate.min.css" rel="stylesheet">
		<link href="../css/init.css" rel="stylesheet" />
		<link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">
		<link href="../css/layer/need/layer.css" />
		<link rel="stylesheet" type="text/css" href="../css/visit/storeScore.css"/>
		<title>全国店面问题客户分析图</title>

	</head>

	<body>
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="container-fluid">
				<div class="daoHang clearfix">
					<div class="dhLeft">
						<sapn><i class="syIcon"></i>位置：
							<a href="javaScript:;" id="ReIndex">首页</a>&gt;
							<a href="javaScript:;">回访管理</a>&gt;
							<a href="" style="color: #000;">全国店面回访得分分析图</a>
						</sapn>
					</div>
				</div>
				<div class="headerBar clearfix">
					<div class="toolBar fr">
						<span>&nbsp;开始时间：<input type="text" class="laydate-icon" id="startTime" />
						结束时间：<input type="text" class="laydate-icon" id="endTime" /></span>
						<a class="btns searchG">搜索</a>
						<!--<a class="btns export ">导出</a>-->
					</div>
				</div>
				
				<div class="problemContent">
					<h2>全国店面问题客户分析图</h2>
					<div id="pcontainer"></div>					
				</div>

			</div>
		</div>

		<script src="../js/jquery.min.js?v=2.1.4"></script>
		<script src="../js/jquery.cookie.js"></script>
		<script src="../Script/Common/huayi.load.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<script src="../css/laydate/laydate.js"></script>
		<script src="../js/echarts.common.min.js"></script>
		<script>
					
		    var token = $.cookie("token");
			var myChartp;

			$(function() {
				laydate.skin('molv');
				laydate({
					elem: '#startTime',
					event: 'focus',
					format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
					//				  	festival: true, //显示节日
					choose: function(datas) { //选择日期完毕的回调
						//				    alert('得到：'+datas);
					}
				});
				laydate({
					elem: '#endTime',
					event: 'focus',
					format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
					//				  	festival: true, //显示节日
					choose: function(datas) { //选择日期完毕的回调
						//				    alert('得到：'+datas);
					}
				});
				
				
				//柱形图
				// 基于准备好的dom，初始化echarts实例
				myChartp = echarts.init(document.getElementById('pcontainer'));
				myChartp.clear();
				myChartp.showLoading();				
				
				option = {
					    //color: ['#003366', '#006699', '#4cabce', '#e5323e'],
//					    title:{
//					    	text:'全国店面问题客户分析图',
//				            textStyle:{
//				                color: '#f0f',
//				                fontSize: 20,
//				                align: 'center',
//				            },
//				            
//				            padding: 5,
//				            itemGap: 10,//主副标题之间的间距。
//				            left: '50%',
//					    },
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'shadow'
					        },
					        position: function(point, params, dom) { 
			                    var posDis = window.innerWidth - dom.offsetWidth-200; 
			                    return posDis<point[0]?[posDis+10, '10%']:[point[0]+10, '10%'];
			
			                },
					        //position:function(p){ return [p[0] + 10, p[1] - 200]; } 
					    },
					    legend: {
					    	type: 'scroll',
				            left: 100,
				            bottom: 0,
				            padding: 5,
					        data: []
					    },
			            grid:{
						   bottom: 180
						
						},
						dataZoom: [
            
				            {   // 这个dataZoom组件，默认控制x轴。
				                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
				                xAxisIndex: 0,
				                start: 0,      // 左边在 0% 的位置。
				                end: 100 ,
				                bottom: 100, // 右边在 60% 的位置。
				            },
				  
				        ],
					    toolbox: {
					        show: false,
					        orient: 'vertical',
					        left: 'right',
					        top: 'center',
					        feature: {
					            mark: {show: true},
					            dataView: {show: true, readOnly: false},
					            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
					            restore: {show: true},
					            saveAsImage: {show: true}
					        }
					    },
					    calculable: true,
					    xAxis: [
					        {
					            type: 'category',
					            name: '店面',
					            axisTick: {show: false},
					            data: [],
					            axisLabel: {
									interval:0,
									rotate:40
								}
					        }
					    ],
					    yAxis: [
					        {
					            type: 'value',
					            name: '数量',
					        }
					    ],
					    series: []
//					    [
//					        {
//					            name: 'Forest',
//					            type: 'bar',
//					            barGap: 0,
//					            //label: labelOption,
//					            data: ["320", "332", "301", "334", "390"]
//					        },
//					        {
//					            name: 'Steppe',
//					            type: 'bar',
//					            //label: labelOption,
//					            data: [220, 182, 191, 234, 290]
//					        },
//					        {
//					            name: 'Desert',
//					            type: 'bar',
//					            //label: labelOption,
//					            data: [150, 232, 201, 154, 190]
//					        },
//					        {
//					            name: 'Wetland',
//					            type: 'bar',
//					            //label: labelOption,
//					            data: [98, 77, 101, 99, 40]
//					        }
//					    ]
					};
				// 使用刚指定的配置项和数据显示图表。
				myChartp.setOption(option);
				showProblemData();//加载数据
				//搜索事件
				$(".searchG").click(function() {
					showProblemData();//加载数据
				});
				//导出
//				$('.export').click(function() {
//					dcexcel(this);
//				})
//				myChartp.on('click', function(params) {
//					console.log(params);
//					if(params.componentType === 'series') {
//						if(params.dataIndex) {
//							console.log(params.data)
//							var month = params.name;
//							console.log(month);
//						}
//					}
//				});
			});
			
			//获取数据
			function showProblemData() {
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + "VisitAnalysis/GetDPQReport",
					async: true,
					dataType: 'json',
					data: {
						token: token,
						starttime: $('#startTime').val(),
						endtime: $('#endTime').val()
					},
					success: function(data) {
						myChartp.hideLoading();
						//debugger;
						// 填入数据
						var con = data.data;
						if(con == null) {
							$('#containerStore').html('暂无数据');
						} else {
							myChartp.setOption({
        					    legend: {
							        data:(function (){
							          		var legendData = con.questype;
							          		//console.log(legendData);
							                //debugger;
							                var res = [];
							                for(var i = 0; i < legendData.length; i++){
							                	res.push(legendData[i].questype);
							                }
							                return res;
							            })(), 
							    },
						        xAxis: {
							        data: data.data.store,
							    },
						        series: (function(){
						        	var seriesData = con.questype;
					               // debugger;
					                var arrs = [];
					                for(var k = 0; k < seriesData.length; k++){
					        			var objs = {};
					                	objs.name = seriesData[k].questype;
					                	objs.type = 'bar';
					                	objs.data = seriesData[k].typecont;
					                	arrs.push(objs);
					                }
					                return arrs;
						        })()
						        
						    });
						}  
					}
				});
	
			}

			
			
	
//			function dcexcel(obj) {
//				var url = huayi.config.callcenter_url + "TotalCall/ExptList?token=" + $.cookie("token");
//				url += "&years=" + $("#chooseTime").val();
//				obj.href = url;
//			}
		</script>
	</body>

</html>