$(document).ready(function() { laydate.render({ elem: '#time1', theme: '#00a1cb' }); laydate.render({ elem: '#time2', theme: '#00a1cb' }); laydate.render({ elem: '#time3', theme: '#00a1cb' }); laydate.render({ elem: '#time4', theme: '#00a1cb' }); laydate.render({ elem: '#time5', theme: '#00a1cb' }); var container1 = echarts.init(document.getElementById('container1')); container1.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { show: true, backgroundColor: '#030917' } } }, legend: { // x : '20%', // y : '25%', // width:"90%", // bottom:0, // data: [], // textStyle: { // color: '#ccc' // }, show: false }, xAxis: { name: '时间', data: [], axisLine: { lineStyle: { color: '#ccc' } } }, yAxis: { name: '数量', // min: 0, // max: 100, // interval: 20, splitLine: { show: false }, axisLine: { lineStyle: { color: '#fff' } } }, series: [], color: ['#61a0a9', '#cb885d', '#c4352d', '#314452', '#a88c1e', '#2f5675', '#94c8b1', '#babc2f', '#e86617', '#afe817', '#e8178d'] }); function partOne() { var index = layer.load(1, { shade: [0.5, '#030303'] //0.1透明度的白色背景 }); $('.list_one').html(''); $.ajax({ type: "get", url: huayi.config.callcenter_url + "info/GetAreaCount24ByDate", async: true, dataType: "json", data: { date: $('#time1').val() }, success: function(data) { if(data.state.toLowerCase() == "success") { layer.close(index); var con = data.data; var part1Axis = con.hours; var sers = [] $(con.cols).each(function(i, n) { var html = ""; var obj = {}; obj.name = n; obj.type = "line"; obj.smooth = true; obj.showAllSymbol = true; obj.symbol = "emptyCircle"; obj.symbolSize = 10; obj.data = con.counts[i]; sers.push(obj); // qunZhongArea.push(n.AreaName); // $(''+ // ''+ n.AreaName +''+ // ''+ n.Count +''+ // '').appendTo('.table1 tbody'); html = '
  • ' + '
    ' + '' + con.cols[i] + ':'+con.tcounts[i]+'
    '+ '
    '+ con.cols[i] +':'+con.tcounts[i]+'
    ' $(con.items[i]).each(function(i, n) { html += '

    ' + n.TypeName + ':' + n.Count + '

    ' }) html += '
    ' + '
    ' + '
  • '; $('.list_one').append(html); }) container1.setOption({ xAxis: { data: part1Axis }, // legend: { // data: qunZhongArea.cols // }, series: sers }); } } }); } $('.list').on('click', 'li', function() { if($(this).find(".tooltips").css("display") == 'none') { $(this).find(".tooltips").show(); $(this).siblings().find(".tooltips").hide(); } else { $(this).find(".tooltips").hide() } }) $('.part1Btn').click(function() { partOne(); }) //受理区域统计 part2 var shouLiArea = echarts.init(document.getElementById('shouLiArea')); shouLiArea.setOption({ // title: { // text: '投诉/举报汇总', // x: 'center', // textStyle: { // color: '#fff', // fontSize: 18 // }, // }, tooltip: { trigger: 'item', formatter: "{a}
    {b} : {c} ({d}%)", axisPointer: { crossStyle: { color: '#fff' } } }, legend: { orient: 'vertical', bottom: '20%', right:'right', data: [], textStyle: { color: '#fff' } }, series: [{ name: '数量统计', type: 'pie', radius: '55%', center: ['35%', '50%'], data: [], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' // formatter: '{c} ({d}%)' }, labelLine: { show: true } } }, label: { normal: { textStyle: { color: '#fff' } } } }] }); function partTwo(){ $('.list_two').html(''); var index = layer.load(1, { shade: [0.5, '#030303'] //0.1透明度的白色背景 }); $.ajax({ type:"get", url:huayi.config.callcenter_url + "info/GetAreaCountByDate", async:true, dataType:'json', data:{ start:$('#time2').val(), end:$('#time3').val() }, success:function(data){ if(data.state.toLowerCase()=='success'){ layer.close(index); var con=data.data; var hsouLiArea_lengend = []; var hsouLiArea_ser = []; $(con).each(function(i, n) { var html = ""; var hsouLiArea_obj = {}; if(n.AreaName.indexOf('商丘') != -1) { n.AreaName = "市直单位" } hsouLiArea_lengend.push(n.AreaName); hsouLiArea_obj.value = n.Count; hsouLiArea_obj.name = n.AreaName; hsouLiArea_ser.push(hsouLiArea_obj); html = '
  • ' + '
    ' + '' + n.AreaName + ':' + n.Count + '
    '+ '
    ' + n.AreaName + ':' + n.Count + '
    ' $(n.Item).each(function(j, m) { html += '

    ' + m.TypeName + ':' + m.Count + '

    ' }) html += '
    ' + '
    ' + '
  • '; $('.list_two').append(html); }) shouLiArea.setOption({ legend: { data: hsouLiArea_lengend, selected: { '当即办理': false } }, series: [{ data: hsouLiArea_ser }] }); } } }); } $('.part2Btn').click(function() { partTwo(); }) //受理渠道24小时统计 part3 var qd_box = echarts.init(document.getElementById('qd_box')); qd_box.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: false, label: { show: true, backgroundColor: '#030917' } }, // formatter: function(datas) // { // var res = datas[0].name + '
    ', val; // for(var i = 0, length = datas.length; i < length; i++) { // val = (datas[i].value) + '%'; // res += datas[i].seriesName + ':' + val + '
    '; // } // return res; // } }, legend: { top: 30, data: [], textStyle: { color: '#fff' } }, xAxis: { // name: '时', data: [], axisLine: { lineStyle: { color: '#ccc' } }, }, yAxis: { name: '数量', splitLine: { show: false }, axisLine: { lineStyle: { color: '#ccc' } } }, series: [{ name: '渠道占比', type: 'bar', barWidth: 18, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: '#14c8d4' }, { offset: 1, color: '#43eec6' } ] ) } }, label: { normal: { show: true, position: 'top', //顶部数据显示位置 formatter: '{c}' // 这里是数据展示的时候显示的数据 } }, data: [] }] }); function part_three(){ $('.list_three').html(''); var index = layer.load(1, { shade: [0.5, '#030303'] //0.1透明度的白色背景 }); $.ajax({ type:"get", url: huayi.config.callcenter_url + "info/GetSourcePercentByDate", dataType: 'json', async: true, data:{ start:$('#time4').val(), end:$('#time5').val() }, success:function(data){ if(data.state.toLowerCase()=='success'){ layer.close(index); var con=data.data; var qd_legend = []; var qd_sers = []; var ser_data = []; var qd_label = { normal: { show: true, position: 'inside', formatter: '{c}%' } }; $(con).each(function(i, n) { var htmls=""; ser_data.push(n.Count) qd_legend.push(n.Source); htmls = '
  • ' + '
    ' + '' + n.Source + ':' + n.Count + '
    ' $(n.Item).each(function(j, m) { htmls += '

    ' + m.TypeName + ':' + m.Count + '

    ' }) htmls += '
    ' + '
    ' + '
  • '; $('.list_three').append(htmls); }) qd_box.setOption({ legend: { data: qd_legend }, xAxis: { data: qd_legend }, series: { data: ser_data } }); } } }); } $('.part3Btn').click(function() { part_three(); }) Ajax(); function Ajax() { partOne(); partTwo(); part_three(); } setInterval(Ajax, huayi.config.indextime);//Ajax调用函数 // })