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