var token = $.cookie("token"); var date; //初始日期 var myChart; var tabIndex = 0; $(document).ready(function() { var nowY = helper.DateFormat.getNowYear(); $('#chooseTime').val(nowY); layui.use('laydate', function() { var laydate = layui.laydate; //日期 laydate.render({ elem: '#chooseTime', format: 'yyyy', type: 'year', //value: nowY, theme: '#1ab394', }); }); //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: ['#1ab394'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'line' // 默认为直线,可选为:'line' | 'shadow' } }, toolbox: { show: true, }, calculable: 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); loadDatas(); //搜索事件 $(".sear").click(function() { $(".huTable tbody").html(''); date = $("#chooseTime").val(); loadDatas(); }); }) function getDataList() { layui.use('table', function() { var table = layui.table; //方法级渲染 table.render({ elem: '#t_callTotal', url: huayi.config.callcenter_url + "TotalCall/GetDataList", method: 'get', //如果无需自定义HTTP类型,可不加该参数 skin: 'row', //line (行边框风格) row (列边框风格) nob (无边框风格) even: true, //开启隔行背景 size: 'md', //sm,lg,md尺寸的表格 where: { years: date, token: token }, //如果无需传递额外参数,可不加该参数 //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' }); }); } //获取图形数据 function tu() { $.ajax({ type: "get", url: huayi.config.callcenter_url + "TotalCall/GetChartData", async: true, dataType: 'json', data: { token: token, years: date }, success: function(data) { myChart.hideLoading(); if(data.data) { myChart.setOption({ series: [{ data: data.data }] }); } } }); } //导出 $('.export').click(function() { dcexcel(this); }) function dcexcel(obj) { var url = huayi.config.callcenter_url + "TotalCall/ExptList?token=" + $.cookie("token"); url += "&years=" + $("#chooseTime").val(); obj.href = url; } function loadDatas() { if(tabIndex == 0) { tu(); //加载图形 } else if(tabIndex == 1) { getDataList(); //加载表格 } }