$(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 + '%
';
} else {
html += params.seriesName + ': ' + params.value + '
';
}
}
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
};
}