AnYang_UI/WebChartNewest/js/trafficData.js

trafficDataChart('timeTraffic', daySeatName, callDate, callDate[0])
$('.btn_time').click(function(e) {
	if(e.target.tagName == 'SPAN') {
		if($(e.target).attr('data-state') == '1') {
			$('.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('话务数据统计')
			trafficDataChart('timeTraffic', ['登陆坐席数量1', '呼叫排队数量1', '话务量1', '呼入接通量1'], callDate, callDate[0])
			trafficState = 0
		}
	}
	e.stopPropagation();
})

function trafficDataChart(dom, data, count, count1, rotate = 0) {
	let hotThings = echarts.init(document.getElementById("timeTraffic"));
	console.log(hotThings)
	window.onresize = function() {
		hotThings.resize()
	}
	const labelOption = {
		show: true,
		rotate: 90,
		align: 'left',
		verticalAlign: 'middle',
		position: 'insideBottom',
		//distance: 15,
		//formatter: '{c}  {name|{a}}',
		formatter: () => {
			console.log('{c}', 'c')
		},
		//fontSize: 16,
		rich: {
			name: {}
		}
		//		normal: {
		//      formatter: function(params) {
		//          // 可以打印自己看一下, 其实params就是每根柱子的对象
		//          console.info(params);
		//          var html = '';
		//          if (params.value > 0) {
		//              // 千万不要html += '';
		//              html = params.value + '次  ' + params.seriesName;
		//              return html;
		//          }
		//          // 没有数据的返回'' 不是返回0
		//          return html;
		//      },
		//   }
	};

	option = {
		//		tooltip: {
		//			trigger: 'axis',
		//			axisPointer: {
		//				type: 'shadow'
		//			},
		//		},
		tooltip: {
			trigger: 'item',
			//			trigger: 'axis',
			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;
			}
		},
		//		legend: {
		//			textStyle: {
		//				fontSize: 12, //字体大小
		//				color: '#ffffff' //字体颜色
		//			},
		//			lineStyle: {
		//				color: '#ffffff'
		//			}
		//		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '15%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#ffffff'
				}
			},
			axisLabel: {
				show: true,
				rotate: -30, // 角度值：Number
				fontSize: 11, // 顺便调小一点字体大小
				textStyle: {
					color: '#ffffff'
				}
			},
			data: ['呼入量\r\n     接通量', '呼入接通率', '呼出量\r\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} 100%'
				}
			}
		],
		series: [{
				name: '呼入量',
				type: 'bar',
				barGap: 0,
				label: labelOption,
				emphasis: {
					focus: 'series'
				},
				data: [320, 332, 301, 334]
			},
			{
		      name: '未接通回拨量',
		      type: 'bar',
		      stack: 'Ad',
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [120, 0, 191, 0]
		    },
		    {
		      name: '自助接通量',
		      type: 'bar',
		      stack: 'Ad',
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [220, 0, 0, 0]
		    },
		    {
		      name: '人工接通',
		      type: 'bar',
		      stack: 'Ad',
		      label: labelOption,
		      emphasis: {
		        focus: 'series'
		      },
		      data: [150, 0, 0, 0]
		    }
		]
	};
	hotThings.setOption(option);
}