利用百度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);