AnYang_UI/WebChartNewest/js/trafficData.js

//trafficDataChart('timeTraffic', daySeatName, callDate, callDate[0])
getworkOrder()
$('.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")

			//			$(".act").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: {
			timetype:telCountByNowType
		},
		callBack: function (res) {
			var data = res.data.hw[0]
			console.log(data)
			trafficDataChart(data)
		}
	});
}
function trafficDataChart(getdata) {
	let hotThings = echarts.init(document.getElementById("timeTraffic"));
	console.log(hotThings)
	window.onresize = function() {
		hotThings.resize()
	}
	const labelOption = {
		show: true,
		rotate: 0,
		align: 'center',
		verticalAlign: 'middle',
		position: 'inside',
		//distance: 15,
		formatter: function(params) {
		 	if (params.value > 0) {
				return params.value;
			 } else {
				return ' ';
			 }
		},
		fontSize: 12,
		rich: {
			name: {}
		}
	};

	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: -30, // 角度值：Number
				fontSize: 11, // 顺便调小一点字体大小
				padding: [0, 0, 0, -15],
				textStyle: {
					color: '#ffffff'
				},
//				formatter: function (value) {
//					//x轴的文字改为竖版显示
//					var str = value.split("");
//					return str.join("\n");
//				}
			},
			data: ['          接通量 \n\n呼入量', '\n呼入接通率', '          呼出接通量\n\n呼出量', '\n呼出接通率']
		}],
		yAxis: [{
				type: 'value',
				axisLine: {
					lineStyle: {
						color: '#ffffff'
					}
				},
				//			interval: 5,
				//			splitLine:{ show:false} ,
				//	        axisLine: {show: false}, 
				//	        axisTick: {show: false}
			},
			{
				type: 'value',
				axisLine: {
					lineStyle: {
						color: '#ffffff'
					}
				},
				splitLine: {
					show: false
				},
				min: 0,
				max: 100,
				axisLabel: {
					formatter: '{value} %'
				}
			}
		],
		series: [{
				name: '呼入量',
				type: 'bar',
				barGap: 0,
				label: labelOption,
				barWidth : 15,
				emphasis: {
					focus: 'series'
				},
				data: [getdata.hwcount, 0, 0, 0]
			},
			{
		      name: '人工接通',
		      type: 'bar',
		      stack: 'Ad',
		      barWidth : 15,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [getdata.jtcount, 0, 0, 0]
		   },
		   {
		      name: '自助接通量',
		      type: 'bar',
		      stack: 'Ad',
		      barWidth : 15,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [getdata.zzcount, 0, 0, 0]
		    },
			{
		      name: '未接通回拨量',
		      type: 'bar',
		      stack: 'Ad',
		      barWidth : 15,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [getdata.hbcount, 0, 0, 0]
		    },
		    
		    {
		      name: '回拨率',
		      type: 'bar',
		      stack: 'B',
		      barWidth : 15,
		      yAxisIndex: 1,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [0, getdata.hbbili, 0, 0]
		    },
		    {
		      name: '自助率',
		      type: 'bar',
		      stack: 'B',
		      barWidth : 15,
		      yAxisIndex: 1,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [0, getdata.zzbili, 0, 0]
		    },
		    {
		      name: '接通率',
		      type: 'bar',
		      stack: 'B',
		      barWidth : 15,
		      yAxisIndex: 1,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [0, getdata.jtbili, 0, 0]
		    },
		    {
		      name: '呼出数量',
		      type: 'bar',
		      barWidth : 15,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [0, 0, getdata.hccount, 0]
		    },
		    {
		      name: '呼出接通量',
		      type: 'bar',
		      barWidth : 15,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [0, 0, getdata.hcjtcount,0]
		    },
		    {
		      name: '呼出接通率',
		      type: 'bar',
		      barWidth : 15,
		      yAxisIndex: 1,
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [0, 0, 0, getdata.jtbili]
		    }
		    
		    
		]
	};
	hotThings.setOption(option);
}