var myChart; var tabIndex = 0; $(document).ready(function() { layui.use('laydate', function() { var laydate = layui.laydate; //日期 laydate.render({ elem: '#sc_times', range: "~", theme: '#249fea', }); }); //tab切换 $('.hu-tab li').click(function() { $(this).addClass('active') .siblings().removeClass('active'); tabIndex = $(this).index(); $('.hu-content >div').eq(tabIndex).show() .siblings().hide(); }); //柱形图 //基于准备好的dom,初始化echarts实例 myChart = echarts.init(document.getElementById('huData')); var option = { tooltip: { trigger: 'axis', }, legend: { data: ['接通次数', '呼损次数', '接通率', '呼损率'], bottom: 60 }, grid: { bottom: 180 }, dataZoom: [{ // 这个dataZoom组件,默认控制x轴。 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 xAxisIndex: 0, start: 0, // 左边在 0% 的位置。 end: 100, // 右边在 100% 的位置。 bottom: 100, }, ], xAxis: [{ type: 'category', data: [], axisPointer: { type: '' }, axisLabel: { rotate: 30, interval: 0 } }], yAxis: [{ type: 'value', name: '通话次数(次)', nameLocation: 'end', nameGap: 40, // min: 0, // max:300, interval: 50, axisLabel: { formatter: '{value} ' } }, { type: 'value', name: '百分比(%)', nameLocation: 'end', nameGap: 35, min: 0, max: 100, interval: 10, axisLabel: { formatter: '{value} ' } } ], series: [{ type: 'bar', name: '接通次数', data: [] }, { type: 'bar', name: '呼损次数', data: [] }, { type: 'line', name: '接通率', data: [], yAxisIndex: 1, }, { type: 'line', name: '呼损率', data: [], yAxisIndex: 1, } ], color: ['#1ab394', '#fbbe5b', '#88ebc4', '#fa957f'] } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //搜索事件 $("#sc_btns").click(function() { getDataList(); }); getDataList(); }) function getDataList() { var loadindex = layer.load(); $.ajax({ type:"get", url:huayi.config.callcenter_url + "callcenterapi/api/switchedlosscall/getdatalist", async:true, dataType:'json', data:{ stime: $('#sc_times').val() && $('#sc_times').val().split(' ~ ')[0], endtime: $('#sc_times').val() && $('#sc_times').val().split(' ~ ')[1] }, success:function(data){ if(data.state.toLowerCase() == "success"){ layui.use('table', function() { var table = layui.table; //方法级渲染 table.render({ elem: '#t_callTotal', skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格) even: true, //开启隔行背景 size: 'lg', //sm,lg尺寸的表格 cellMinWidth: 100, page: true, cols: [ [{ field: '日期', title: '日期', align: 'center', fixed: true, sort: true, width: 150, }, { field: '接通次数', title: '接通次数', align: 'center', width: '', }, { field: '呼损次数', title: '呼损次数', align: 'center', width: '', }, { field: '接通率', title: '接通率(%)', align: 'center', width: '', }, { field: '呼损率', title: '呼损率(%)', align: 'center', width: '', }, ] ], data: data.data, height: 'full-230' }); }); myChart.setOption({ xAxis: { data: (function() { var res = []; for(var i = 0; i < data.data.length; i++) { res.push(data.data[i].日期); } return res; })(), }, series: (function() { var sres = [], sres1 = [], sres2 = [], sres3 = []; var sobj = [{ data: sres, }, { data: sres1, }, { data: sres2, }, { data: sres3, }, ]; for(var i = 0; i < data.data.length; i++) { sres.push(data.data[i].接通次数); sres1.push(data.data[i].呼损次数); sres2.push(data.data[i].接通率); sres3.push(data.data[i].呼损率); } return sobj; })(), }); } } }).then(function() { layer.close(loadindex); }); } function getNowYear() { //获取当前年份 var myDate = new Date(); return myDate.getFullYear(); //获取完整的年份(4位,1970-????) } //导出 function dcexcel(obj) { var beginyear=$('#sc_times').val() && $('#sc_times').val().split(' ~ ')[0]; var endyear=$('#sc_times').val() && $('#sc_times').val().split(' ~ ')[1]; var url=huayi.config.callcenter_url +"callcenterapi/api/switchedlosscall/exportexcel?stime="+ beginyear +"&endtime="+endyear ; obj.href = url; }