AnYang_UI/WebChartNewest/js/trafficData.js

$(document).ready(function() {
	getworkOrder()
})

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();
})

function getworkOrder() {
	let workOrderData = [];
	let workOrderName = []
	new doAjax({
		url: huayi.config.callcenter_url + "/InfoNew/GetTelCountByNow",
		data: {
			token: $.cookie("token"),
			timetype: telCountByNowType
		},
		callBack: function(res) {
			var data = res.data.hw[0]
			telCountData = data
			trafficDataChart(data)
			
		}
	});
}

function getLabelOption(positionObj, numberType) {
	var labelOption = {
		show: true,
		rotate: 0,
		align: 'left',
		color: '#fff',
		verticalAlign: 'middle',
		position: positionObj,
		formatter: function(params) {
			if(params.value > 0) {
				dataValue = params.seriesName + ': ' + params.value
				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.hcbili + '%)'
				}
				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()
	}
	hotThingsLeft.setOption(getOption(getSeriesLeftData(),['呼入量接通量']));
	hotThingsRight.setOption(getOption(getSeriesRightData(),['呼出量呼出接通量']));
}

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 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
	};

}