(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: ['红山区', '松山区', '元宝山区', '其他'],
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)'
}],
});
bar_l_option.xAxis.data.push("其他");
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();
})();