$(function() {
loadMapData(); //页面加载时调用封装加载echarts地图的函数
});
function loadMapData (cityName) {
if (cityName == '' || cityName == null) {
cityName = '广州市'; //默认查询的城市, 此处默认查询广州市的迁入迁出情况
}
$.get('${basePath }/enterpriseMigration/getCityMigrationData',{'cityName':cityName}, function (migrationData) {
var inDataCount = migrationData.inDataCount;
var outDataCount = migrationData.outDataCount;
if (inDataCount == null) {
inDataCount = 0;
}
if (outDataCount == null) {
outDataCount = 0;
}
$("#inDataCount").html(inDataCount+' <span> 户</span>');
$("#outDataCount").html(outDataCount+' <span> 户</span>');
$("#inDataCount").html();
var geoCoordMap = { //可以在地图上显示的城市的坐标信息
'广州市': [113.5107,23.2196],
'韶关市':[113.6,24.82],
'深圳市':[114.05,22.55],
'珠海市':[113.57,22.27],
'汕头市':[116.68,23.35],
'佛山市':[113.12,23.02],
'江门市':[113.08,22.58],
'湛江市':[110.35,21.27],
'茂名市':[110.92,21.67],
'肇庆市':[112.47,23.05],
'惠州市':[114.42,23.12],
'梅州市':[116.12,24.28],
'汕尾市':[115.37,22.78],
'河源市':[114.7,23.73],
'阳江市':[111.98,21.87],
'清远市':[113.03,23.7],
'东莞市':[113.75,23.05],
'中山市':[113.38,22.52],
'潮州市':[116.62,23.67],
'揭阳市':[116.37,23.55],
'云浮市':[112.03,22.92]
};
var inData = [
[{name:'云浮市',value:95},{name:'广州市'}], //数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上
[{name:'揭阳市',value:95},{name:'广州市'}]
];
var outData = [
[{name:'广州市'},{name:'揭阳市',value:95}],
[{name:'广州市'},{name:'潮州市',value:95}]
];
inData = migrationData.in;
outData = migrationData.out;
if (inData == null){
inData = [];
}
if (outData == null){
outData = [];
}
/* for(var i = 0; i < inData.length; i ++) {
alert(inData[i][1].name);
} */
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var convertData0 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [toCoord, fromCoord]
});
}
}
return res;
};
var convertData1 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord ,toCoord]
});
}
}
return res;
};
var color = ['#eee035', '#b958f5'];
var series = [];
[['迁入企业', inData], ['迁出企业', outData]].forEach(function (item, i) {
if (i == 0) {
convertData = convertData0;
}
if (i == 1) {
convertData = convertData1;
}
series.push({
name: item[0],
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: 'triangle',
symbolSize: 10
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
$.getJSON(basePath + '/resources/data/guangdong.json', function(data) {
echarts.registerMap('guangdong', data);
gdchart3 = echarts.init(document.getElementById('gdmap3'));
var option = {
title : {
left: 'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
bottom: 200,
left: 100,
data:['迁入企业', '迁出企业'],
textStyle: {
color: '#fff'
},
selectedMode: 'multiple'
},
geo: {
map: 'guangdong',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#1c498a',
borderColor: '#d278fc'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
layoutCenter: ['50%', '38.5%'], //地图在屏幕上显示的位置
layoutSize: screen.width/1.95, //地图加载的尺寸比例设置, screen.width为屏幕可用宽度
series: series
};
gdchart3.setOption(option);
$(window).on("resize", gdchart3.resize); //根据屏幕大小, 自适应加载地图
gdchart3.on('click',function (params) {
var cityName = params.name; //点击地图获取城市名称
$("#inTitleSpan").html('实时各地迁入'+cityName+'的企业总量');
$("#outTitleSpan").html('实时各地迁出'+cityName+'的企业总量');
loadMapData(cityName);
});
});
},'json');
}