XYUpgrade_UI/CallCenterWe.../WebChart/js/huawu.js

$(document).ready(function() {
	//part 1
	var main1 = echarts.init(document.getElementById('main1'));
	main1.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					show: true,
					backgroundColor: '#333'
				}
			}
		},
		legend: {
			bottom:'bottom',
//			data: ["来电数量", "接通数量",  "放弃数量", "黑名单拒接数量"],
			data: ["来话量", "通话量"],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: {
			name: '时',
			data: [],
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			}
		},
		yAxis: {
			name: '数量',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			}
		},
		series: []
	});
	

	function partOne() {
		var index = layer.load(1, {
			shade: [0.5, '#030303'] //0.1透明度的白色背景
		});
//		$('.list_one').html('');
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "CallManage/GetCallCount",
			async: true,
			dataType: "json",
			data: {
//				date: $('#time1').val()
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
					layer.close(index);
					var con = data.data;
					main1.setOption({
						xAxis: {
							data: con.hour
						},
						series: [{
							name: "来话量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.callin
						}, {
							name: "通话量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.callconn
//						},
//						 {
//							name: "放弃数量",
//							type: "line",
//							smooth: true,
//							showAllSymbol: true,
//							symbol: "emptyCircle",
//							symbolSize: 10,
//							data: con.gcounts
//						},
//						{
//							name: "黑名单拒接数量",
//							type: "line",
//							smooth: true,
//							showAllSymbol: true,
//							symbol: "emptyCircle",
//							symbolSize: 10,
//							data: con.scounts
						}]

					})

				}
			}

		});

	}
	//part 2
	var phone_num = echarts.init(document.getElementById('phone_num'));
	phone_num.setOption({
//				color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e'],
				color: [ '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e'],
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)",
					axisPointer: {
						crossStyle: {
							color: '#fff'
						}
					}
				},
							legend: {
								//      orient: 'vertical',
								bottom: 'bottom',
								data: ['来电量','呼出量'],
								textStyle: {
									color: '#fff'
								}
							},
				series: [{
					name: '数据',
					type: 'pie',
					radius: '50%',
//					radius: ['30%', '60%'],
					center: ['50%', '50%'],
					data: [],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						},
						normal: {
							label: {
								show: true,
//								formatter: '{b} : {c} ({d}%)' 
								formatter: '{c} ({d}%)' 
//								formatter: '{d}%'
							},
							labelLine: {
								show: true
							}
						}
					},
					label: {
						normal: {
							textStyle: {
								color: '#fff'
							}
						}
					}
				}]
			});
	
	var phone_num2 = echarts.init(document.getElementById('phone_num2'));
	phone_num2.setOption({
				color: [ '#ae765a', '#569d4e'],
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)",
					axisPointer: {
						crossStyle: {
							color: '#fff'
						}
					}
				},
							legend: {
								//      orient: 'vertical',
								bottom: 'bottom',
								data: ['接通量','未接通量'],
								textStyle: {
									color: '#fff'
								}
							},
				series: [{
					name: '数据',
					type: 'pie',
					radius: '50%',
					center: ['50%', '50%'],
					data: [],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						},
						normal: {
							label: {
								show: true,
//								formatter: '{b} : {c} ({d}%)' 
								formatter: '{c} ({d}%)' 
							},
							labelLine: {
								show: true
							}
						}
					},
					label: {
						normal: {
							textStyle: {
								color: '#fff'
							}
						}
					}
				}]
			});
	
	function partTwo() {
		var index = layer.load(1, {
			shade: [0.5, '#030303'] //0.1透明度的白色背景
		});
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "CallManage/GetCallTotal",
			async: true,
			dataType: "json",
			data: {
//				date: $('#time2').val()
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
					layer.close(index);
					var con = data.data;
					var part_2_ser = [{'value':con.daycallin ,'name':'来电量'},{'value':con.daycallout ,'name':'呼出量'}];
					
					phone_num.setOption({
								series: [{
									data: part_2_ser
								}]
					})
					var part_2_ser2 = [{'value':con.daycallconnect ,'name':'接通量'},{'value':con.daycallwconnect ,'name':'未接通量'}];
					
					phone_num2.setOption({
								series: [{
									data: part_2_ser2
								}]
					})

				}
			}

		});

	}

//pasrt 5
//	var main = echarts.init(document.getElementById('main'));
//	main.setOption({
//
//		tooltip: {
//			trigger: 'axis',
//			axisPointer: {
//				type: 'cross',
//				label: {
//					show: true,
//					backgroundColor: '#333'
//				}
//			},
//			formatter: function(datas) {
//				var res = datas[0].name + '<br/>',
//					val;
//				for(var i = 0, length = datas.length; i < length; i++) {
//					val = (datas[i].value) + '%';
//					res += datas[i].seriesName + '：' + val + '<br/>';
//				}
//				return res;
//			}
//		},
//		legend: {
////			data: ["空闲", "通话", "置忙"],
//			data: [],
//			textStyle: {
//				color: '#fff'
//			},
//			bottom:'bottom'
//		},
//		xAxis: {
//			name: '时',
//			data: [],
//			axisLine: {
//				lineStyle: {
//					color: '#ccc'
//				}
//			}
//		},
//		yAxis: {
//			name: '比率',
//			splitLine: {
//				show: false
//			},
//			axisLine: {
//				lineStyle: {
//					color: '#ccc'
//				}
//			}
//		},
//		series: []
//	});
// 	
    function partThree(){ 
    		var index = layer.load(1, {
			shade: [0.5, '#030303'] //0.1透明度的白色背景
		});
    	$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "CallManage/FreeBusyRate",
			async: true,
			dataType: "json",
			data: {
//				start: $('#time3').val(),
//				end: $('#time4').val()
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
					layer.close(index);
					var con = data.data;
//					var part3 = result.data.b;
					main.setOption({
						xAxis: {
							data: con.hour
						},
						legend: {
							data: con.callstate
						},
						series: [{
							name: "空闲",
							type: "bar",
							data: con.freecount
						}, {
							name: "通话中",
							type: "bar",
							data: con.callincount
						}, {
							name: "小休",
							type: "bar",
							data: con.restcount
						}]

					})

				}
			}

		});
    }
	
	
	
	//接通率报表part3
var jtv = echarts.init(document.getElementById('jtv_num'));
jtv.setOption({
		color: ['#4ab7c7', '#FF9800'],
//	title: {
//		text: '接通率统计',
//		x: 'center',
//		textStyle: {
//			color: '#fff',
//			fontSize: 18,
//			fontWeight: 'normal'
//		}
//	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true,
				backgroundColor: '#333'
			}
		},
		formatter: function(datas) 
              {
              var res = datas[0].name + '<br/>', val;
                  for(var i = 0, length = datas.length; i < length; i++) {
                        val = (datas[i].value) + '%';
                        res += datas[i].seriesName + '：' + val + '<br/>';
                    }
                    return res;
               }
	},
	legend: {
//		top: 30,
		bottom:'bottom',
		data: [],
		textStyle: {
			color: '#fff'
		}
	},
	xAxis: {
		name: '时',
		data: [],
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		},

	},
	yAxis: {
		name: '比率',
		splitLine: {
			show: false
		},
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		}
	},
	series: [{
		name: '接通量',
		type: 'bar',
		barWidth: 8,
		data: []
	},{
		name: '未接量',
		type: 'bar',
		barWidth: 8,
		data: []
	}]

});

function partFour(){
	var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
	});
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "CallManage/GetCallState",
   	   	async:true,
   	   	dataType:'json',
   	   	data:{
// 	   		date:$('#time4').val()
   	   	},
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
// 	   			var part3=data.data.b;
				jtv.setOption({
						legend: {
							data: con.callstates,
						},
						xAxis: {
							data:con.hour
						},
						series: [{
							data:con.callconn
						},{
							data:con.callunconn
						}]
						
				})
			
   	   		}
   	   	}
   	   });
   }
 
	//通话时长part4
var th_nums = echarts.init(document.getElementById('th_nums'));
th_nums.setOption({
//	title: {
//		text: '通话时长统计',
//		x: 'center',
//		textStyle: {
//			color: '#fff',
//			fontSize: 18,
//			fontWeight: 'normal'
//		}
//	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true,
				backgroundColor: '#333'
			}
		}
	
	},
	legend: {
		bottom:'bottom',
		data: ['平均通话时长'],
		textStyle: {
			color: '#fff'
		}
	},
	xAxis: {
		name: '时',
		data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		},

	},
	yAxis: {
		name: '秒',
		splitLine: {
			show: false
		},
		axisLine: {
			lineStyle: {
				color: '#ccc'
			}
		}
	},
	series: [{
		name: '平均通话时长',
		type: 'line',
		smooth:true,
		showAllSymbol:true,
		symbol :"emptyCircle",
		symbolSize: 10,
		data: []
	}]
});

function partFive(){
	var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
	});
   	   $.ajax({
   	   	type:"get",
   	   	url:huayi.config.callcenter_url + "CallManage/GetCallTime",
   	   	async:true,
   	   	dataType:'json',
   	   	data:{
// 	   		date:$('#time5').val()
   	   	},
   	   	success:function(data){
   	   		if(data.state.toLowerCase()=='success'){
   	   			layer.close(index);
   	   			var con=data.data;
				th_nums.setOption({
//						xAxis: {
//							data:con.hours
//						},
						series: [{
							data:con.avgtime
						}]
						
				})
			
				
			
   	   		}
   	   	}
   	   });
   }
	Ajax();
	function Ajax(){
		partOne();
		partTwo() 
//		partThree();
		partFour();
		partFive();
	}
	setInterval(Ajax, huayi.config.indextime); //Ajax调用函数
})