$(function() { laydate.render({ elem: '#time2', range: '~', format: 'yyyy-MM-dd', theme: '#114a97', done: function(value, date) { partOne(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1]); partTwo(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1]); partThree(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1]); } }); Ajax(); }) //part 1 //受理群众区域统计 对接完毕 var part_1 = echarts.init(document.getElementById('part_1')); part_1.setOption({ color: ['#69e1a9', '#6a91e0', '#ceba5f', '#f06e84', '#569d4e', '#7d55ba', '#ce5aba', '#345cdd', '#569d4e'], tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { show: true, backgroundColor: '#333' } } }, grid: { left: '2%', right: '5%', bottom: '6%', containLabel: true }, legend: { top: 'top', left: '180px', data: [], textStyle: { color: '#00e9ff' } }, xAxis: { name: '时', data: [], axisLine: { lineStyle: { color: '#3061a2' } }, axisTick: { alignWithLabel: true, show: false }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, yAxis: { name: '(数量)', splitLine: { show: false }, axisLine: { lineStyle: { color: '#3061a2' } }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, series: [] }); function partOne(dates) { $.ajax({ type: "get", url: huayi.config.callcenter_url + "info/GetAreaCount24ByDate", async: true, dataType: "json", data: { date: dates }, 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 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); }) part_1.setOption({ xAxis: { data: part1Axis }, legend: { data: con.cols }, series: sers }); } } }); } //part2 //渠道来源 var source = echarts.init(document.getElementById('source')); source.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: false, label: { show: true, backgroundColor: '#030917' } }, }, // legend: { // top: 'top', // left: '180px', // data: [], // textStyle: { // color: '#00e9ff' // } // }, xAxis: { // name: '时', data: [], axisLine: { lineStyle: { color: '#3061a2' } }, axisTick: { alignWithLabel: true, show: false }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, yAxis: { name: '数量', splitLine: { show: false }, axisLine: { lineStyle: { color: '#3061a2' } }, axisLabel: { //横轴字体颜色 show: true, textStyle: { color: '#eff0f4' } } }, series: [{ name: '数量', type: 'bar', barWidth: 18, itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = ['#368cab','#54b793','#4b6ab0','#2531a9']; return colorList[params.dataIndex] } } }, label: { normal: { show: true, position: 'top',//顶部数据显示位置 textStyle: { color: '#fff' //顶部数据颜色 }, formatter: '{c}' // 这里是数据展示的时候显示的数据 } }, data: [] }] }); function partTwo(start,end) { $.ajax({ type:"get", url: huayi.config.callcenter_url + "info/GetSourcePercentByDate", dataType: 'json', async: true, data:{ start:start, end:end }, success: function(data) { if(data.state.toLowerCase() == "success") { // layer.close(index); var con=data.data; var qd_legend = []; var ser_data = []; $(con).each(function(i, n) { ser_data.push(n.Count) qd_legend.push(n.Source); }) source.setOption({ // legend: { // data: qd_legend // }, xAxis: { data: qd_legend }, series: { data: ser_data } }) } } }); } // part3 受理区域统计 var part3 = echarts.init(document.getElementById('part3')); part3.setOption({ color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e','#7d55ba','#ce5aba','#355cdd','#44c1c6','#ceba5e','#c64444'], title: { text: '各乡镇街道占比', x: 'center', y: '45%', textStyle: { fontWeight: 'normal', fontSize: 14, color:'#fff' } }, tooltip: { trigger: 'item', formatter: "{a}
{b} : {c} ({d}%)", axisPointer: { crossStyle: { color: '#fff' } } }, // legend: { // // orient: 'vertical', // bottom: 'bottom', // data: [], // textStyle: { // color: '#fff' // } // }, series: [{ name: '数据', type: 'pie', radius: ['30%', '60%'], center: ['50%', '50%'], data: [], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label: { show: true, // formatter: '{b} : {c} ({d}%)' formatter: '{d}%' }, labelLine: { show: true } } }, label: { normal: { textStyle: { color: '#fff' } } } }] }); function partThree(start, end) { // 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: start, end: end }, success: function(data) { if(data.state.toLowerCase() == 'success') { // layer.close(index); $('.complaint_typeL').html(''); $('.complaint_typeR').html(''); var con = data.data; var part_1_legend = []; var part_1_ser = []; $(con).each(function(i, n) { if( n.AreaName.indexOf('当即办理') ==-1){ part_1_legend.push(n.AreaName) var part_1_obj = {}; part_1_obj.value = n.Count; part_1_obj.name = n.AreaName; part_1_ser.push(part_1_obj) if(n.AreaName.indexOf('城乡一体') != -1){ n.AreaName="城乡示范" } var str='
  • ' + '' + n.AreaName + ' ' + n.Count + '' + '
  • ' if(i<=7){ $(str).appendTo('.complaint_typeL'); }else{ $(str).appendTo('.complaint_typeR'); } } }) part3.setOption({ // legend: { // selected: { // '当即办理': false // } // }, series: [{ data: part_1_ser }] }) } } }); } function Ajax(){ partOne($('#time2').val()&& $('#time2').val().split(' ~ ')[0]) partTwo($('#time2').val()&& $('#time2').val().split(' ~ ')[0],$('#time2').val() && $('#time2').val().split(' ~ ')[1]); partThree($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1]) }