var myChart; var tabIndex = 0; $(document).ready(function() { $('#sc_times').val(getNowYear()) layui.use('laydate', function() { var laydate = layui.laydate; //日期 laydate.render({ elem: '#sc_times', type: "year", 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(); loadDatas(); }); //柱形图 //基于准备好的dom,初始化echarts实例 myChart = echarts.init(document.getElementById('huData')); // myChart.clear(); // myChart.showLoading(); option = { color: ['#88bceb'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'line' // 默认为直线,可选为:'line' | 'shadow' } }, toolbox: { show: true, }, calculable: true, grid: { left: '5%', right: '5%', bottom: '5%', // containLabel: true }, xAxis: [{ type: 'category', name: '月份', splitLine: { show: false }, //去除网格线 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value', name: '通话量', nameLocation: 'end', splitLine: { show: false } //去除网格线 }], series: [{ name: '通话量', type: 'bar', barWidth: '30%', //图形宽度 data: [], itemStyle: { normal: { label: { show: true, textStyle: { color: '#800080' //顶部数据颜色 } } } }, label: { normal: { show: true, position: 'top' //顶部数据显示位置 } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //搜索事件 $("#sc_btns").click(function() { loadDatas(); }); loadDatas(); }) function getDataList() { var loadindex = layer.load(); layui.use('table', function() { var table = layui.table; //方法级渲染 table.render({ elem: '#t_callTotal', url: huayi.config.callcenter_url + "callcenterapi/api/totalcall/getdata", method: 'get', //如果无需自定义HTTP类型,可不加该参数 skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格) even: true, //开启隔行背景 size: 'lg', //sm,lg尺寸的表格 where: { years: $("#sc_times").val() }, //如果无需传递额外参数,可不加该参数 //request: {}, //如果无需自定义请求参数,可不加该参数 response: { statusName: 'state', //数据状态的字段名称,默认:code statusCode: 'success', //成功的状态码,默认:0 msgName: 'message', //状态信息的字段名称,默认:msg //countName: 'total', //数据总数的字段名称,默认:count //dataName: 'rows', //数据列表的字段名称,默认:data }, //如果无需自定义数据响应名称,可不加该参数 cols: [ [{ field: '月份', title: '月份', fixed: true, align: 'center', width: 200, }, { field: '日期', title: '日期', align: 'center', sort: true, //width: '30%', }, { field: '总数', title: '总数(次)', align: 'center', //width: '30%', }] ], height: 'full-230', done: function() { layer.close(loadindex); } }); }); } //获取图形数据 function getChartData() { $.ajax({ type: "get", url: huayi.config.callcenter_url + "callcenterapi/api/totalcall/getchartdata", async: true, dataType: 'json', data: { years: $("#sc_times").val(), }, success: function(data) { // myChart.hideLoading(); if(data.data) { myChart.setOption({ series: [{ data: data.data }] }); } } }); } function loadDatas() { if(tabIndex == 0) { getChartData(); //加载图形 } else if(tabIndex == 1) { getDataList(); //加载表格 } } function getNowYear() { //获取当前年份 var myDate = new Date(); return myDate.getFullYear(); //获取完整的年份(4位,1970-????) } //导出 function dcexcel(obj) { var url = huayi.config.callcenter_url + "callcenterapi/api/totalcall/exportexcel?years="+ $("#sc_times").val(); obj.href = url; }