利用百度Echart库，完成简单迁徙图

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 = [];//遍历参数数组，参数格式如2.1或2.2所示for (var i = 0; i < data.length; i++) {//获取一条记录var dataItem = data[i];//利用切片方式，通过name属性，获得城市列表中城市的坐标var fromCoord = cityCoordiante_var[dataItem[0].name];var toCoord = cityCoordiante_var[dataItem[1].name];//如果起、止城市都获得成功if (fromCoord && toCoord){//按照json对象存入res数组中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);/**设置迁出数据*///var series = FullMigraineData(FromchengduData2016,false);/**设置地图样式(可修改样式)*/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);