AnYang_UI/WebChartNewest/js/trafficData.js

var telCountData
var barWidth = 20
$('.btn_time').click(function(e) {
	if(e.target.tagName == 'SPAN') {
		if($(e.target).attr('data-state') == '1') {
			$(".hwsjtj").hide()
			$('.daySeat').css('display', 'none')
			$('.timeTraffic').css('display', 'inline-block')
			$('#traffic').css('display', 'none')
			$('#timeTraffic').css('display', 'block')
			$(this).siblings(".act").children("label").attr("indexTitle", "日话务数据统计1")
			$('.call_situation h2').text('话务数据统计')
			getworkOrder()
			trafficState = 0
		}
	}
	e.stopPropagation();
})

var insertType = '';
var insertText = '';

function getworkOrder() {
	insertType = '';
	insertText = '';

	let workOrderData = [];
	let workOrderName = []
	new doAjax({
		url: huayi.config.callcenter_url + "/InfoNew/GetTelCountByNow",
		data: {
			token: $.cookie("token"),
			second:$('#secondCut').val(),
			timetype: telCountByNowType
		},
		callBack: function(res) {
			var data = res.data.hw[0]
//			var data = {"invalid":40,"hwcount":426,"jtcount":384,"zzcount":0,"hbcount":11,"hccount":68,"hcjtcount":37,"jtbili":"99.48","zzbili":"0.00","hbbili":"2.85","hcbili":"54.41","effective":386.0};
			telCountData = data
			
			if ($('#secondCut').val() == '15') {
//				if (data.hbcount > 0) {
//					insertType = '回拨';
//					insertText = '人工: ' + data.artificial + '(' + telCountData.hbbili + '%)'
//				} else if (data.zzcount > 0) {
//					insertType = '自助';
//					insertText = '人工: ' + data.artificial + '(' + telCountData.hbbili + '%)'
//				} else if (data.jtcount > 0) {
//					insertType = '接通';
//					insertText = '人工: ' + data.artificial + '(' + telCountData.hbbili + '%)'
//				}
				insertText = '人工: ' + data.artificial + '(' + telCountData.artificialbili + '%)'

			}
			trafficDataChart(data)
			
		}
	});
}

function getLabelOption(positionObj, numberType) {
	var labelOption = {
		show: true,
		rotate: 0,
		align: 'left',
		color: '#fff',
		verticalAlign: 'middle',
		position: positionObj,
		formatter: function(params) {
//			console.log(params.seriesName, 'params.seriesName')
			if(params.value > 0) {
				dataValue = params.seriesName + ': ' + params.value
				if ($('#secondCut').val() == '15') {
					
					if (params.seriesName == '接通') {
						return insertText;
					} else if(params.seriesName === "呼出接通") {
						dataValue = dataValue + '(' + telCountData.hcbili + '%)'
					} else if (['回拨', '自助'].includes(params.seriesName)) {
						return '';
					}
					
				} else {
					
					if(params.seriesName === "回拨") {
						dataValue = dataValue + '(' + telCountData.hbbili + '%)'
					} else if(params.seriesName === "自助") {
						dataValue = dataValue + '(' + telCountData.zzbili + '%)'
					} else if(params.seriesName === "人工") {
						dataValue = dataValue + '(' + telCountData.jtbili + '%)'
					} else if(params.seriesName === "接通") {
						dataValue = dataValue + '(' + telCountData.jtbili + '%)'
					} else if(params.seriesName === "呼出接通") {
						dataValue = dataValue + '(' + telCountData.hcbili + '%)'
					}
				}
			
				
//				if ($('#secondCut').val() == '15') {
//					dataValue += '  \n\n'
//				}
				
//				if (insertType && params.seriesName == insertType) {
//					dataValue = insertText + '\n\n' + dataValue
//				}
//				
				return dataValue;
			} else {
				return ' ';
			}
		},
		fontSize: 12,
	};
	return labelOption
}
function getItemStyleColor(colorSting){
	var ColorData 
	if (colorSting === 'red') {
		ColorData = ['#DC0707','#DC0707','#AF0808','#AF0808']
	} else if(colorSting === 'yellow'){
		ColorData = ['#EE7923','#F67C20','#D16A1E','#CC681E']
	} else if (colorSting === 'green'){
		ColorData = ['#2ADFE1','#32FFEE','#04D1C1','#00E8D5']
	}
	
	var color = {
		type: 'linear',
		x: 0,
		x2: 1,
		y: 0,
		y2: 0,
		colorStops: [{
				offset: 0,
				color: ColorData[0]
			},
			{
				offset: 0.5,
				color: ColorData[1]
			},
			{
				offset: 0.5,
				color: ColorData[2]
			},
			{
				offset: 1,
				color: ColorData[3]
			}
		]
	}
	return color
}

function trafficDataChart(getdata) {
	let hotThingsLeft = echarts.init(document.getElementById("timeTrafficLeft"));
	let hotThingsRight = echarts.init(document.getElementById("timeTrafficRight"));
	window.onresize = function() {
		hotThingsLeft.resize()
		hotThingsRight.resize()
	}
	
//	console.log($('#secondCut').val(), '123')
	if ($('#secondCut').val() == '15') {
		hotThingsLeft.setOption(getOption15(getSeriesLeftData15(),['呼入量接通量']));
	} else {
		hotThingsLeft.setOption(getOption(getSeriesLeftData(),['呼入量接通量']));
	}

//hotThingsLeft.setOption(getOption(getSeriesLeftData(),['呼入量接通量']));
	
	hotThingsRight.setOption(getOption(getSeriesRightData(),['呼出量呼出接通量']));
}

function getSeriesLeftData15 (){
	return  [{
		name: '有效来电',
		type: 'bar',
		stack: 'A',
		label: getLabelOption(['-350%', 40], 0),
		barWidth,
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.effective],
		itemStyle: {
				color: getItemStyleColor('red')
			}
	},
	{
		name: '无效来电',
		type: 'bar',
		stack: 'A',
		label: getLabelOption(['-350%', 0], 0),
		barWidth,
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.invalid],
		itemStyle: {
				color: getItemStyleColor('yellow')
			}
	},
	{
		name: '接通',
		type: 'bar',
		stack: 'Ad',
		barWidth, //hbbili
		label: getLabelOption(['100%', 20], 0),
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.jtcount],
		itemStyle: {
				color: getItemStyleColor('green')
			}
	},
	{
		name: '自助',
		type: 'bar',
		stack: 'Ad',
		barWidth,
		label: getLabelOption(['100%', 0], 0),
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.zzcount],
		itemStyle: {
				color: getItemStyleColor('yellow')
			}
	},
	{
		name: '回拨',
		type: 'bar',
		stack: 'Ad',
		barWidth,
		label: getLabelOption(['100%', -20], 0),
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.hbcount],
		itemStyle: {
				color: getItemStyleColor('red')
			}
	},
]

}

function getSeriesLeftData (){
	return  [{
		name: '有效来电',
		type: 'bar',
		stack: 'A',
		label: getLabelOption(['-350%', 40], 0),
		barWidth,
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.effective],
		itemStyle: {
				color: getItemStyleColor('red')
			}
	},
	{
		name: '无效来电',
		type: 'bar',
		stack: 'A',
		label: getLabelOption(['-350%', 0], 0),
		barWidth,
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.invalid],
		itemStyle: {
				color: getItemStyleColor('yellow')
			}
	},
	{
		name: '人工',
		type: 'bar',
		stack: 'Ad',
		barWidth, //hbbili
		label: getLabelOption(['100%', 20], 0),
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.jtcount],
		itemStyle: {
				color: getItemStyleColor('green')
			}
	},
	{
		name: '自助',
		type: 'bar',
		stack: 'Ad',
		barWidth,
		label: getLabelOption(['100%', 0], 0),
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.zzcount],
		itemStyle: {
				color: getItemStyleColor('yellow')
			}
	},
	{
		name: '回拨',
		type: 'bar',
		stack: 'Ad',
		barWidth,
		label: getLabelOption(['100%', -20], 0),
		emphasis: {
			focus: 'series'
		},
		data: [telCountData.hbcount],
		itemStyle: {
				color: getItemStyleColor('red')
			}
	},
]

}

function getSeriesRightData (){
	return [{
			name: '呼出',
			type: 'bar',
			barWidth,
			label: getLabelOption(['-200%', -5], 0),
			labelLine:{  
	              show:true,
	              normal:{  
	                length:15,
					length2: 0,
	              }  
	           },
			emphasis: {
				focus: 'series'
			},
			data: [telCountData.hccount],
			itemStyle: {
				color: getItemStyleColor('red')
			}
		},
		{
			name: '呼出接通',
			type: 'bar',
			barWidth,
			label: getLabelOption(['-100%', -5], 0),
			emphasis: {
				focus: 'series'
			},
			data: [telCountData.hcjtcount],
			itemStyle: {
				color: getItemStyleColor('green')
			}
		}
	]

}

function getOption15(getSeriesData,xAxisData) {

	return option = {
		tooltip: {
			trigger: 'item',
			show: true,
			// 进行数据处理
			formatter: function(params) {
//				console.log(params, 'params')
				var html = '';
				if(params.value > 0) {
					html += params.marker;
					if(params.name.indexOf('率') >= 0) {
						html += params.seriesName + ': ' + params.value + '%<br/>';
					} else {
						html += params.seriesName + ': ' + params.value + '<br/>';
					}
				}
				return html;
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '15%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#ffffff'
				}
			},
			axisLabel: {
				show: true,
				rotate: 0, // 角度值：Number
				interval: '0',
				verticalAlign: 'left',
				fontSize: 12, // 顺便调小一点字体大小
				padding: [0, 0, 0, -10],
				textStyle: {
					color: '#ffffff'
				},
				formatter: function(value) {
					//x轴的文字改为竖版显示
					var str;
//					console.log(value)
					if(value === "呼入量接通量") {
						str = "呼入量   接通量"
					} else if(value === "呼出量呼出接通量") {
						str = "    呼出量   呼出接通量"
					}
					return str
				}
			},
			data: xAxisData
		}],
		yAxis: [{
			type: 'value',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ffffff'
				}
			}
		}],
		color: ['#cd5c5c', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
			'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'
		],
		series: getSeriesData
	};

}

function getOption(getSeriesData,xAxisData) {

	return option = {
		tooltip: {
			trigger: 'item',
			show: true,
			// 进行数据处理
			formatter: function(params) {
//				console.log(params, 'params')
				var html = '';
				if(params.value > 0) {
					html += params.marker;
					if(params.name.indexOf('率') >= 0) {
						html += params.seriesName + ': ' + params.value + '%<br/>';
					} else {
						html += params.seriesName + ': ' + params.value + '<br/>';
					}
				}
				return html;
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '15%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#ffffff'
				}
			},
			axisLabel: {
				show: true,
				rotate: 0, // 角度值：Number
				interval: '0',
				verticalAlign: 'left',
				fontSize: 12, // 顺便调小一点字体大小
				padding: [0, 0, 0, -10],
				textStyle: {
					color: '#ffffff'
				},
				formatter: function(value) {
					//x轴的文字改为竖版显示
					var str;
//					console.log(value)
					if(value === "呼入量接通量") {
						str = "呼入量   接通量"
					} else if(value === "呼出量呼出接通量") {
						str = "    呼出量   呼出接通量"
					}
					return str
				}
			},
			data: xAxisData
		}],
		yAxis: [{
			type: 'value',
			splitLine: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ffffff'
				}
			}
		}],
		color: ['#cd5c5c', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
			'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'
		],
		series: getSeriesData
	};

}