AnYang_UI/WebChart_bak/js/huawu.js

$(document).ready(function() {
	laydate.render({
		elem: '#time1',
		theme: '#00a1cb'
	});
	laydate.render({
		elem: '#time2',
		theme: '#00a1cb'
	});
	laydate.render({
		elem: '#time3',
		theme: '#00a1cb'
	});

	laydate.render({
		elem: '#time4',
		theme: '#00a1cb'
	});
	//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: ["来电数量", "接通数量",  "放弃数量", "黑名单拒接数量"],
			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 + "info/GetTelCount24ByDate",
			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.hours
						},
						series: [{
							name: "来电数量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.rcounts
						}, {
							name: "接通数量",
							type: "line",
							smooth: true,
							showAllSymbol: true,
							symbol: "emptyCircle",
							symbolSize: 10,
							data: con.ccounts
						},
						 {
							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
						}]

					})

				}
			}

		});

	}

$('.part1Btn').click(function() {
				partOne();
			})
	
	//part 2
	var phone_num = echarts.init(document.getElementById('phone_num'));
	phone_num.setOption({
		title: {
			//		text: '投诉/举报汇总',
			x: 'center',
			textStyle: {
				color: '#fff',
				fontSize: 16
			},
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		toolbox: {
			show: true,
		},
		calculable: true,
		xAxis: [{
			type: 'category',
			//		name: '月份',
			splitLine: {
				show: false
			}, //去除网格线
			data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
			//		axisTick: {
			//			alignWithLabel: true
			//		},
			axisLine: {
				show: false,
				lineStyle: {
					color: '#fff'
				}
			},
			//		axisLine: {},
			axisTick: {
				show: false
			}

		}],
		yAxis: [{
			show: false
		}],
		series: [{
				name: '数量',
				type: 'bar',
				barWidth: '30%', //图形宽度
				data: [],
				itemStyle: {
					normal: {
						label: {
							show: true,
							textStyle: {
								color: '#fff' //顶部数据颜色
							}
						}
					}
				},
				label: {
					normal: {
						show: true,
						position: 'top' //顶部数据显示位置
					}

				}
			}

		]
		//  color: ['#ff9800','#61a0a8','#1ab394']
	});
	
	function partTwo() {
		var index = layer.load(1, {
			shade: [0.5, '#030303'] //0.1透明度的白色背景
		});
		$.ajax({
			type: "get",
			url: huayi.config.callcenter_url + "info/GetTelCountByDate",
			async: true,
			dataType: "json",
			data: {
				date: $('#time2').val()
			},
			success: function(data) {
				if(data.state.toLowerCase() == "success") {
					layer.close(index);
					var con = data.data;
					phone_num.setOption({
						series: [{
							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes]
							//						data: [20, 100, 5, 80]
						}]

					})

				}
			}

		});

	}

$('.part2Btn').click(function() {
				partTwo();
			})
//pasrt 3
	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: ["空闲", "通话", "置忙"],
			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 + "info/GetUserStateCount24ByDate",
			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.hours
						},
						series: [{
							name: "空闲",
							type: "bar",
							data: con.kxpercents
						}, {
							name: "通话",
							type: "bar",
							data: con.thpercents
						}, {
							name: "置忙",
							type: "bar",
							data: con.zmpercents
						}]

					})

				}
			}

		});
    }
$('.part3Btn').click(function() {
				partThree();
			})
Ajax()
function Ajax(){
	partOne();
	partTwo() 
	partThree();
}

	setInterval(Ajax, huayi.config.indextime); //Ajax调用函数
})