0 准备城市坐标值
/**
* 全国主要城市的坐标值
*/
var cityCoordiante_var =
{
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
'东营': [118.7073,37.5513],
'中山': [113.4229,22.478],
'临汾': [111.4783,36.1615],
'临沂': [118.3118,35.2936],
'丹东': [124.541,40.4242],
'丽水': [119.5642,28.1854],
'乌鲁木齐': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'兰州': [103.5901,36.3043],
....
};
1 准备UI素材
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 color = ['#a6c84c', '#ffa022', '#46bee9'];
2 准备迁徙数组
2.1 迁入数据
var TochengduData2015 =
[
[ {name:'上海',value:95},{name:'成都'}],
[ {name:'广州',value:90},{name:'成都'}],
[ {name:'大连',value:80},{name:'成都'}],
[ {name:'南宁',value:70},{name:'成都'}],
[ {name:'南昌',value:60},{name:'成都'}],
[ {name:'拉萨',value:50},{name:'成都'}],
[ {name:'长春',value:40},{name:'成都'}],
[ {name:'包头',value:30},{name:'成都'}],
[ {name:'重庆',value:20},{name:'成都'}],
[ {name:'常州',value:10},{name:'成都'}]
];
2.2 迁出数据
var FromchengduData2016 = [
[ {name:'成都'},{name:'上海',value:92}],
[ {name:'成都'},{name:'广州',value:91}],
[ {name:'成都'},{name:'大连',value:82}],
[ {name:'成都'},{name:'南宁',value:73}],
[ {name:'成都'},{name:'南昌',value:66}],
[ {name:'成都'},{name:'拉萨',value:57}],
[ {name:'成都'},{name:'长春',value:48}],
[ {name:'成都'},{name:'包头',value:39}],
[ {name:'成都'},{name:'重庆',value:20}],
[ {name:'成都'},{name:'常州',value:11}]
];
3 填充迁徙数据Series
3.1 将迁徙数据改写为地图中的连线形式
var LineCities = function (data)
{
var res = [];
for (var i = 0; i < data.length; i++)
{
var dataItem = data[i];
var fromCoord = cityCoordiante_var[dataItem[0].name];
var toCoord = cityCoordiante_var[dataItem[1].name];
if (fromCoord && toCoord)
{
res.push
({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
3.2 高亮指定城市
/**
* 利用城市名称-值，实现地图高亮
* @param {Object} cityName 城市名
* @param {Object} value 值
*/
var markerCity = function (cityName,value)
{
var res = [];
var geoCoord = cityCoordiante_var[cityName];
if (geoCoord)
{
if(value==undefined)
value=100;
res.push({name: cityName,value: geoCoord.concat(value)});
}
return res;
};
3.3 填装迁徙数据
/**
* 填装迁徙数据
* @param {Object} data [[{name:fromcity,value:fromvalue},{name:tocity,value:tocity}]]
* @param {Object} isFrom 是迁入还是迁出数据
*/
var fullLineCityData=function(data,isFrom)
{
index=isFrom?0:1;
var res = [];
data.map(function (dataItem)
{
res.push
({
name:dataItem[index].name,
value: cityCoordiante_var[dataItem[index].name].concat([dataItem[index].value])
/**注意value的格式 [lat,lon,value] 一定是数组包裹的*/
});
});
return res;
}
3.4 迁徙数据可视化设置
/**
* 填装迁徙数据集合(谨慎修改)
* @param {Object} MigraineData 填装数据集合
*/
var FullMigraineData= function(MigraineData,isTo)
{
if(isTo==undefined)
isTo=true;
/**
* 准备数据集合
*/
var series = [];
/**
* 从TochengduData2015数据集中遍历数据
*/
[['成都', MigraineData]].forEach(function (item, i)
{
series.push
(
{
name: item[0] + ' Top10',
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: LineCities(item[1])
},
{
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect:
{
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle:
{
normal: {color: color[i],width: 1,opacity: 0.6,curveness: 0.2}
},
data: LineCities(item[1])
},
{
name: item[0] + ' Top10',
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: fullLineCityData(item[1],isTo)
},
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {brushType: 'stroke'},
label:
{
normal:
{
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val)
{
return val[2] / 8;
},
itemStyle:
{
normal: {color: color[1]}
},
data: markerCity(item[0])
}
);
});
return series;
}
4 构建地图对象
/**设置迁入数据*/
var series = FullMigraineData(TochengduData2015,true);
/**设置迁出数据*/
/**设置地图样式(可修改样式)*/
option =
{
backgroundColor: '#121212',
title :
{
text: '模拟迁徙',
subtext: '数据纯属虚构',
left: 'center',
textStyle : {color: '#fff'}
},
tooltip : {trigger: 'item'},
legend:
{
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['成都 Top10'],
textStyle: {olor: '#fff'},
selectedMode: 'single'
},
geo:
{
map: 'china',
label: {emphasis: {show: false}},
roam: true,
itemStyle:
{
normal: {areaColor: '#323c48',borderColor: '#404a59'},
emphasis: {areaColor: '#2a333d'}
}
},
series: series
};
var myChart = echarts.init(document.getElementById('MigraineMap'));
myChart.setOption(option);