(function () { //左上雷达图 var radarechart = echarts.init(document.getElementById('radar_echart')); //停车位数量及占比 // var bar_l_echart = echarts.init(document.getElementById('bar_l_echart')); //设备数量 // var bar_c_echart = echarts.init(document.getElementById('bar_c_echart')); //中间地图 var map_c_echart = echarts.init(document.getElementById('map_c_echart')); //右上线上线下排行榜图 var bar_r_echart = echarts.init(document.getElementById('bar_r_echart')); //车位配比 var line_r_echart = echarts.init(document.getElementById('line_r_echart')); //定义某个地市要显示的区县 var displayCountry = []; //赤峰的省市区县 function ChiFengMapSeries(name){ var obj = { // center:[118.361313,42.27018],//中心点 zoom:1.2,//当前视角的缩放比例。 // roam:'scale',//是否支持鼠标缩放 //selectedMode:true,//选中模式,表示是否支持多个选中,默认关闭 name:name, type:'map', map:'meishan', // markPoint:{ // symbol:'circle' // }, label: { normal: { show: true }, emphasis: { show: true, } }, mapLocation:{ y:60 }, itemStyle: { normal: { borderWidth: 1, borderColor: 'rgba(147,191,245,.3)', label: { show: false, textStyle: { color: "#fff" } } }, emphasis:{ areaColor: 'rgba(255,204,0,0.4)', label: { show: false, textStyle: { color: "#fff" } } } }, markPoint:{ symbol:'image://./../img/cf_map_icon.png', silent:true, symbolSize:[17, 17], data: [ { name: '', coord: [103.729882,30.136356], }, { name: '', coord: [103.789673,30.268198], }, { name: '', coord: [103.806921,29.789424], }, { name: '', coord: [104.164518,30.059866], }, { name: '', coord: [103.383783,30.04186], }, { name: '', coord: [103.26535,29.914721], }, ], label:{ normal:{ show:false, }, emphasis:{ show:false, }, } }, data:[ { name:'东坡区', value:0, }, { name:'彭山区', value:0 }, { name:'青神县', value:0 }, { name:'仁寿县', value:0 }, { name:'丹棱县', value:0 }, { name:'洪雅县', value:0 } ], }; return obj; }; var map_c_option = { tooltip: { trigger: 'item', formatter: function(params) { var res = params.name+'
'; var myseries = map_c_option.series; for (var i = 0; i < myseries.length; i++) { var displayVal = 0; for(var j=0;j'; } } return res; } }, // dataRange:{ // show:false, // }, visualMap: { show: false, min: 1, max: 10000, itemWidth: 0,//图形的宽度,即长条的宽度 itemHeight: 90,//图形的高度,即长条的高度 left: 5, bottom: 0, //text: ['High', 'Low'], realtime: false,//拖拽时,是否实时更新 calculable: false,//是否显示拖拽用的手柄 inRange: { color: ['rgba(29,71,193,.3)', 'rgba(33,77,203,.7)','rgba(29,71,193,.2)','rgba(33,77,203,.6)'] } }, series:[ //前三项位置固定,后面的动态添加 new ChiFengMapSeries("停车场数"), new ChiFengMapSeries("停车位数"), new ChiFengMapSeries("空闲车位数") /*new ChiFengMapSeries("地磁数")*/ ], }; var fun = { init:function () { //左上雷达图 var radar_echart_option = { animationDuration:2000, animationDelay:500, tooltip: { trigger: 'item' }, radar: { indicator: [ {text: '', max: 100}, {text: '', max: 100}, {text: '', max: 100}, {text: '', max: 100} ], name: { textStyle: { color: '#fff', fontFamily:"Microsoft YaHei", } }, center: ['50%','50%'], radius: '70%', shape: 'circle', splitNumber:3, startAngle:60, splitLine: { lineStyle: { color: '#1dc7ff' } }, axisLine: { lineStyle: { color: '#1dc7ff' } }, splitArea: { show: false }, }, series: [ { label: { normal: { show:true, position: 'left', textStyle: { color: '#fff', fontSize: 12, fontFamily:"Microsoft YaHei", }, //formatter: '{c}个 占比{d}%\n{b}' formatter:function (params) { //alert(params) } } }, animation:true, type: 'radar', tooltip: { trigger: 'item' }, itemStyle: { normal: { areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ee04e0' // 0% 处的颜色 }, { offset: 1, color: '#f88d06' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, type: 'default' } }, }, data: [ { value: [0,0,0,0], name: '空闲车位数' } ], } ] }; radarechart.setOption(radar_echart_option,true); //左中柱图bar_l_echart //中间地图 map_c_echart.setOption(map_c_option,true); // map_c_echart.mapselected({ // // }); currentIndex = -1; var dataLen = map_c_option.series[0].data.length; // 取消之前高亮的图形 map_c_echart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; // 高亮当前图形 map_c_echart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex:currentIndex }); // 显示 tooltip map_c_echart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); // setTimeout(function () { // currentIndex = -1; // var dataLen = map_c_option.series[0].data.length; // // 取消之前高亮的图形 // map_c_echart.dispatchAction({ // type: 'downplay', // seriesIndex: 0, // dataIndex: currentIndex // }); // currentIndex = (currentIndex + 1) % dataLen; // // 高亮当前图形 // map_c_echart.dispatchAction({ // type: 'highlight', // seriesIndex: 0, // dataIndex:currentIndex // }); // // 显示 tooltip // map_c_echart.dispatchAction({ // type: 'showTip', // seriesIndex: 0, // dataIndex: currentIndex // }); // },1000); // setInterval(function () { // var dataLen = map_c_option.series[0].data.length; // // 取消之前高亮的图形 // myChart.dispatchAction({ // type: 'downplay', // seriesIndex: 0, // dataIndex: currentIndex // }); // currentIndex = (currentIndex + 1) % dataLen; // // 高亮当前图形 // myChart.dispatchAction({ // type: 'highlight', // seriesIndex: 0, // dataIndex:currentIndex // }); // // 显示 tooltip // myChart.dispatchAction({ // type: 'showTip', // seriesIndex: 0, // dataIndex: currentIndex // }); // }, 1000); //右上线上线下排行榜图 var bar_r_option = { // tooltip : { // trigger: 'axis', // axisPointer : { // 坐标轴指示器,坐标轴触发有效 // type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' // } // }, animationDuration:2000, // animationDelay:500, legend: { data:[ { name:'线下服务次数', // icon : 'image:////favicon.png', // textStyle:{fontWeight:'bold', color:'green'} }, { name:'线上服务次数', // icon : 'image:////favicon.png', // textStyle:{fontWeight:'bold', color:'green'} }, ], bottom:0, left:'29%', selectedMode:false, textStyle:{ color:'#fff', fontFamily:"Microsoft YaHei", }, }, tooltip : { trigger: 'item', // formatter: "{a}
{b} : {c} " formatter:function (params) { var val = Math.abs(params.value); return params.seriesName +'
'+ params.name +':'+ val; }, }, grid: { left: '3%', right: '4%', bottom: '5%', top:'2%', containLabel: true }, xAxis : [ { show:false, type : 'value', // max:100, // min:-100, } ], yAxis : [ { type : 'category', axisTick : {show: false}, axisTick: { show: false }, axisLine: { show: false }, splitLine:{ show:false }, axisLabel:{ textStyle: { color: '#fff', fontFamily:"Microsoft YaHei", // fontSize:'10px' }, formatter:function (value) { if(value.length>7){ return value.substring(0,3)+'...'+value.substr(-3); }else{ return value; } } }, data : [], nameTextStyle:{ color:'#fff', fontFamily:"Microsoft YaHei", }, } ], series : [ { barGap:'20', name:'线上服务次数', type:'bar', stack: '总量', data:[], itemStyle:{ normal:{ barBorderRadius: [0, 125, 125, 0], color: { type: 'linear', x: 1, y: 1, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#00a2ff' // 0% 处的颜色 }, { offset: 1, color: '#00c888' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } } }, }, { barGap:'20', name:'线下服务次数', type:'bar', stack: '总量', data:[], itemStyle:{ normal:{ barBorderRadius: [125, 0, 0, 125], color: { type: 'linear', x: 1, y: 1, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#ee04e0' // 0% 处的颜色 }, { offset: 1, color: '#f88d06' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } } }, } ] }; bar_r_echart.setOption(bar_r_option); //右下图 var line_r_option = { animationDuration:2000, animationDelay:500, backgroundColor: 'rgba(13,74,250,.08)',//背景色 tooltip : { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // backgroundColor: '#6a7985' // } // } }, legend: { data:['红山区','松山区','元宝山区','其他'] }, grid: { left: '3%', right: '4%', bottom: '3%', top:'6%', containLabel: true }, xAxis : [ { nameLocation:'middle', axisTick: { show: false, }, axisLine: { show: false }, splitLine:{ show:false }, axisLabel: { textStyle: { color: '#fff', fontFamily:"Microsoft YaHei", }, }, type : 'category', boundaryGap : ['5%','2%'], data:['红山区','松山区','元宝山区','其他'] } ], yAxis : [ { axisTick: { show: false }, axisLine: { show: false }, splitLine:{ show:false }, axisLabel: { textStyle: { color: '#fff', fontFamily:"Microsoft YaHei", }, }, // max:1.5, // splitNumber:3, type : 'value' } ], series : [ { smooth:true, name:'车位配比', type:'line', stack: '总量', // markPoint : { // symbol:'image://../../img/line_r_option.png', // }, symbol:'image://./../img/line_r_option.png', symbolSize: 17, data:[], lineStyle:{ normal:{ color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#f88d06' // 0% 处的颜色 },{ offset: 1, color: '#ee04e0' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } } }, areaStyle:{ normal:{ color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'rgba(248,141,6,.3)' // 0% 处的颜色 },{ offset: 1, color: 'rgba(238,4,224,.3)' // 100% 处的颜色 }], // colorStops: [{ // offset: 0, color: '#f88d06' // 0% 处的颜色 // }, { // offset: 0.2, color: '#f88907' // 100% 处的颜色 // }, { // offset: 0.3, color: '#ffc600' // 100% 处的颜色 // }, { // offset: 1, color: '#ee04e0' // 100% 处的颜色 // }], globalCoord: false // 缺省为 false } } } } ] } line_r_echart.setOption(line_r_option); //自适应 window.onresize = function () { radarechart.resize(); // bar_l_echart.resize(); // pie_l_echart.resize(); // bar_c_echart.resize(); map_c_echart.resize(); bar_r_echart.resize(); line_r_echart.resize(); } }, requestData:function(){ fun.getFreeBerthsByAjax(); fun.getParkinglotBerthsColumnChartByAjax(); fun.getParkLotEqpCountChartByAjax(); fun.getQueryParkTransaction(); fun.getBerthSpaceRatioChart(); }, getFreeBerthsByAjax:function(){ var req= { sysCode:sysComm.sysCode, cityId:sysComm.cityId }; var freeBerthRadarChart= { method: "post", url: dataUrl.util.getFreeBerthRadarChart(), data: JSON.stringify(req), contentType: 'application/json; charset=utf-8', dataType:'json', success: function(res){ fun.updateFreeBerths(res); } } sysAjax(freeBerthRadarChart); //1分钟调用1次 window.setInterval(function(){ sysAjax(freeBerthRadarChart); },1000*60*5); }, //获取停车场和停车位数据 getParkinglotBerthsColumnChartByAjax:function(){ //停车位数量 var bar_l_option = { // animationDuration:2000, // animationDelay:500, xAxis: { data: [] }, series: [ {data: []}, {data: []} ] }; //停车场数据 // var pie_l_option = { // animationDuration:2000, // animationDelay:500, // series : [ // { // // data:[ // // {value:0, name:'其他'} // // ] // data:[ // {name:'红山区', // y: 21.43, // sliced: true, // selected: true } // // // {name:'元宝山区', y: 18.57}, // // {name:'松山区', y:20}, // // {name:'其他', y: 40} // ] // } // ] // }; // //先清空 // bar_l_option.series[0].data=[]; // bar_l_option.xAxis.data[i]=[]; // pie_l_option.series[0].data=[]; var dataCount=[]; var dataCountnew = []; //map类型,key:countryName,value:对应的数组下标 var countryIndex = {}; //根据要显示的区县初始化 for(var i = 0;i{point.key}
', pointFormatter: function() { // console.log(this.series.name) return '车位数:'+this.y+'
占比: '+((this.y/berthTotalNum)*100).toFixed(2)+'%'+'' } }, plotOptions: { column: { stacking: 'normal', depth: 40, dataLabels:{ enabled:false, // dataLabels设为true style:{ color:'#fff' } }, pointPadding:0.1, } }, xAxis: { gridLineWidth: 0, categories: bar_l_option.xAxis.data, labels: { style: { color: '#fff',//颜色 fontSize:'12px' //字体 } }, }, yAxis: { gridLineWidth: 0, title: { text: null }, labels: { style: { color: '#fff',//颜色 fontSize:'12px' //字体 } }, }, series: [{ // name: 'none', data: bar_l_option.series[0].data, color:'rgba(8,220,128,0.8)' }], }); var serieData = {value:otherParkLotNum, name:"其他"}; dataCount.push(serieData); for(var i=0;i{point.key}', pointFormat: ' {point.percentage:.1f}%' }, plotOptions : { pie : { allowPointSelect: true, cursor: 'pointer', depth: 30, dataLabels: { enabled: true, format:'{point.name} {point.percentage:.2f}%', style : {'fontSize' : '12px','color':'#fff','fontWeight':'normal'}, padding: 10, distance: 5 } } }, series: [{ type: 'pie', // name: '停车场数量及占比', data:dataCountnew, colors:['rgba(0,222,255,0.6)','rgba(1,178,102,0.6)','rgba(255,204,0,0.6)','rgba(248,21,139,0.6)'] }] // }); }); $("#parkplace").html(0); $("#parknum").html(0); //设置全部停车位和停车场数 $("#parkplace").html(berthTotalNum); $("#parknum").html(parkTotalNum); //中间地图 //停车位 var seriesBerthData=new ChiFengMapSeries("停车位数"); //停车场 var seriesParkData=new ChiFengMapSeries("停车场数"); for (var i = 0; i < seriesBerthData.data.length; i++) { var name = seriesBerthData.data[i].name; //获取该区停车场个数 seriesParkData.data[i].value=pkVo[name]==null?0:pkVo[name]; //获取该区的停车位个数 seriesBerthData.data[i].value=berthsVo[name]==null?0:berthsVo[name]; } map_c_option.series[0] = seriesParkData; map_c_option.series[1] = seriesBerthData; map_c_echart.setOption(map_c_option); }else{ } } }; sysAjax(parkinglotColumnChart); }, //更新空闲车位数 updateFreeBerths:function(resultData){ //空闲车位数网状图 var radar_echart_option = { radar: { indicator: [] }, series: [ { data: [{value: [0]}], name:'空闲车位数', } ] }; //先清空 radar_echart_option.radar.indicator=[]; radar_echart_option.series[0].data[0].value=[]; //map类型,key:countryName,value:对应的数组下标 var countryIndex = {}; //根据要显示的区县初始化 for(var i = 0;imaxDataVal?dataval[index]:maxDataVal; } //修改最大值 for(var i=0;imaxDataVa_l){ maxDataVa_l=dataval_l[i]; } } for (var i=0;imaxDataVal_r){ maxDataVal_r=-dataval_r[i]; } } if(parseInt(maxDataVa_l)>parseInt(maxDataVal_r)){ bar_r_option.xAxis[0].max=maxDataVa_l; bar_r_option.xAxis[0].min=-maxDataVa_l; }else{ bar_r_option.xAxis[0].max=maxDataVal_r; bar_r_option.xAxis[0].min=-maxDataVal_r; } bar_r_echart.setOption(bar_r_option); } } }; sysAjax(getParkLotEqpCountChart); }, //设备 getParkLotEqpCountChartByAjax:function(){ var req= { sysCode:sysComm.sysCode, cityId:sysComm.cityId }; var getParkLotEqpCountChart= { method: "post", url: dataUrl.util.getParkLotEqpCountChart(), data: JSON.stringify(req), contentType: 'application/json; charset=utf-8', dataType:'json', success: function(res){ if(res.code == '8888'){ var result = res.data; var bar_c_option = { animationDelay:500, animationDuration:2000, legend: { data:[] }, xAxis : [ { data : [] } ], series : [ ] }; //map类型,key:countryName,value:对应的数组下标 var countryIndex = {}; var iniData = []; //根据要显示的区县初始化 for(var i = 0;i{point.key}
', // pointFormat: '{series.name}: {point.y}',series.name formatter: function() { var s=this.series.name; return ''+this.key+'
'+s.substring(0,s.length-2)+'总数:'+this.total+'
'+this.series.name+':'+this.y+'' } }, plotOptions: { column: { stacking: 'normal', depth: 40, dataLabels:{ enabled:false, // dataLabels设为true style:{ color:'#D7DEE9' } }, pointPadding:0.1, }, series: { events: { legendItemClick: function(e) { return false; // 直接 return false 即可禁用图例点击事件 } }, } }, series:bar_c_option.series, /*series: [ { name: '地磁离线', data: [102, 186, 233, 144], stack: 'male' }, { name: '地磁在线', data: [500, 334, 433, 437], stack: 'male' }, { name: 'pos机离线', data: [130, 160, 174, 164], stack: 'female' }, { name: 'pos机在线', data: [289, 556, 676, 267], stack: 'female' } ],*/ colors:['rgba(0,204,255,0.8)','rgba(8,220,128,0.8)','rgba(250,5,218,0.8)','rgba(255,204,0,0.8)'] }); //中间地图 //从第4个元素开始位设备 var equIndex = 3; for(var equTypeName in result.totalEqpMap){ //中间地图 var seriesData=new ChiFengMapSeries(equTypeName); //设置不同区县的值 for (var i = 0; i < seriesData.data.length; i++) { var countryName = seriesData.data[i].name; //获取该区的设备个数 var equCountryMap = result.totalEqpMap[equTypeName]; if(equCountryMap!=null){ var equCount = equCountryMap[countryName]==null?0:equCountryMap[countryName]; seriesData.data[i].value=equCount; } } map_c_option.series[equIndex] = seriesData; equIndex++; } map_c_echart.setOption(map_c_option); } } }; sysAjax(getParkLotEqpCountChart); }, getBerthSpaceRatioChart:function(){ var req= { sysCode:sysComm.sysCode, cityId:sysComm.cityId }; var getBerthSpaceRatioChart= { method: "post", url: dataUrl.util.getBerthSpaceRatioChart(), data: JSON.stringify(req), contentType: 'application/json; charset=utf-8', dataType:'json', success: function(res){ if(res.code == '8888'){ var result = res.data; var line_r_option = { animationDuration:2000, animationDelay:500, legend: { data:[] }, xAxis : [ { data:[] } ], series : [ { data:[] } ] } var data=result.berthSpaceRatio; var dataRatio=0.0; var j = 0; for(var i=0; i< data.length; i++){ if(data[i].name=='总配比'){ dataRatio=data[i].data.toFixed(2); }else{ line_r_option.legend.data[j]=data[i].name; line_r_option.xAxis[0].data[j]=data[i].name; line_r_option.series[0].data[j]=data[i].data.toFixed(2); j++; } } $("#matchnum").html(dataRatio); line_r_echart.setOption(line_r_option); } } }; sysAjax(getBerthSpaceRatioChart); } }; //获取某个城市要显示的区县 function getDisplayCountryByCity(){ var req = { sysCode:sysComm.sysCode, cityId:sysComm.cityId }; if(displayCountry.length>0){ return displayCountry; } sysAjax({ method: "post", url: dataUrl.util.getDisplayCountry(), data: JSON.stringify(req), contentType: 'application/json; charset=utf-8', dataType:'json', async:false, success: function(res){ if(res.code == '8888'){ displayCountry = res.data; }else{ } } }); } var stompClient = null; function connect() { var socket = new SockJS(dataUrl.util.getParkWebSocketEndpoint()); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { // console.log('Connected: ' + frame); //订阅空闲车位数 stompClient.subscribe(dataUrl.util.subscribeFreeBerthRadarChartByWebSocket(), function (freeBerthsVo) { //显示空闲车位数 updateFreeBerths(JSON.parse(greeting.body).content); }); }); } function disconnect() { if (stompClient != null) { stompClient.disconnect(); } // console.log("Disconnected"); } function queryfreeBerthsByWebSocket() { stompClient.send(dataUrl.util.sendFreeBerthRadarChartByWebSocket(), {}, JSON.stringify({ sysCode:sysComm.sysCode, cityId:sysComm.cityId })); } /* $(function () { $("form").on('submit', function (e) { e.preventDefault(); }); $( "#connect" ).click(function() { connect(); }); $( "#disconnect" ).click(function() { disconnect(); }); $( "#send" ).click(function() { sendName(); }); });*/ //connect(); //queryfreeBerthsByWebSocket(); fun.init(); getDisplayCountryByCity(); fun.requestData(); })();