Echarts世界流向图

【前言】
Echarts----世界流向图 demo

【效果图】
效果图如下：
【CODE】
code如下：

 /*
    图中相关城市经纬度,根据需求添加数据
    关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
*/
var geoCoordMap = {
    '南宁': [108.479, 23.1152],
    '广州': [113.5107, 23.2196],
    '重庆': [107.7539, 30.1904],
    '芬兰': [24.909912, 60.169095], 
    '美国': [-100.696295, 33.679979], 
    '日本': [139.710164, 35.706962], 
    '韩国': [126.979208, 37.53875], 
    '瑞士': [7.445147, 46.956241],
    '东南亚': [117.53244, 5.300343], 
    '澳大利亚': [135.193845, -25.304039], 
    '德国': [13.402393, 52.518569], 
    '英国': [-0.126608, 51.208425], 
    '加拿大': [-102.646409, 59.994255]
};

/* 
    记录下起点城市和终点城市的名称，以及权重
    数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小
 */

// 重庆
var CQData = [
    [{name: '芬兰'}, {name: "重庆",value: 30}],
    [{name: '德国'}, {name: "重庆",value: 30}],
    [{name: '英国'}, {name: "重庆",value: 30}],
    [{name: '重庆'}, {name: "英国",value: 30}]
];

// 广州
var GZData = [
    [{name: '日本'}, {name: "广州",value: 30}],
    [{name: '东南亚'}, {name: "广州",value: 30}]
];

// 南宁
var NNData = [
    [{name: '南宁'}, {name: "加拿大",value: 30}],
    [{name: '南宁'}, {name: "美国",value: 100}],
    [{name: '南宁'}, {name: "澳大利亚",value: 95}],
    [{name: '南宁'}, {name: "瑞士",value: 30}]
];

// 小飞机的图标，可以用其他图形替换
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 convertData = function(data) {
    var res = []; 
    for(var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[1].name];
        var toCoord = geoCoordMap[dataItem[0].name];
        if(fromCoord && toCoord) {
            res.push([{
                coord: fromCoord // 起点坐标
            }, {
                coord: toCoord // 终点坐标
            }])
        }
    }
    return res;
}

var color  = ['#9ae5fc', '#dcbf71'];    // 自定义图中要用到的颜色
var series = [];                        // 用来存储地图数据

/*
    图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。
    要用到setOption中的series属性，并且对每个城市都要进行三次设置。
*/
[['重庆', CQData],['广州', GZData],['南宁', NNData]].forEach(function(item, i) {
    series.push({
        // 白色航线特效图
        type: 'lines',    
        zlevel: 1,                    // 用于分层，z-index的效果
        effect: {
            show: true,               // 动效是否显示
            period: 6,                // 特效动画时间
            trailLength: 0.7,         // 特效尾迹的长度
            color: '#fff',            // 特效颜色
            symbolSize: 3             // 特效大小
        },
        lineStyle: {
            normal: {                 // 正常情况下的线条样式
                color: color[0],
                width: 0,             // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
                curveness: -0.2       // 线条曲度
            }
        },
        data: convertData(item[1])    // 特效的起始、终点位置
    }, {  // 小飞机航线效果
        type: 'lines',
        zlevel: 2,
        //symbol: ['none', 'arrow'],   // 用于设置箭头
        symbolSize: 10,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,         // 特效形状，可以用其他svg pathdata路径代替
            symbolSize: 15             
        },
        lineStyle: {
            normal: {
                color: color[0],
                width: 1,
                opacity: 0.6,
                curveness: -0.2
            }
        },
        data: convertData(item[1])     // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
    }, { // 散点效果
        type: 'effectScatter',         
        coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系
        zlevel: 3,
        rippleEffect: {
            brushType: 'stroke'        // 波纹绘制效果
        },
        label: {
            normal: {                  // 默认的文本标签显示样式
                show: true,
                position: 'left',      // 标签显示的位置
                formatter: '{b}'       // 标签内容格式器
            }
        },
        itemStyle: {
            normal: {
                color: color[0]
            }
        },
        data: item[1].map(function(dataItem) {
            return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name],  // 起点的位置
                symbolSize: dataItem[1].value / 8,  // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
            };
        })
    });
});

// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
series.push({
    type: 'effectScatter',
    coordinateSystem: 'geo',
    zlevel: 3,
    rippleEffect: {
        brushType: 'stroke'
    },
    label: {
        normal: {
            show: true,
            position: 'left',
            formatter: '{b}'
        }
    },
    symbolSize: function(val) {
        return val[2] / 8;
    },
    itemStyle: {
        normal: {
            color: color[1]
        }
    },
    data: [{  
        // 这里面的数据，由于一开始就知道终点位置是什么，所以直接写死，如果通过ajax来获取数据的话，还要进行相应的处理
        name: "重庆",
        value: [107.7539, 30.1904, 30],
        label: {
            normal: {
                position: 'top'
            }
        }
    }, {
        name: '广州',
        value: [113.5107, 23.2196, 30],
        label: {
            normal: {
                position: 'right'
            }
        }
    }, {
        name: '南宁',
        value: [108.479, 23.1152, 30]
    }]
});

// 最后初始化世界地图中的相关数据
var option= ({
    backgroundColor: '#404a59',
    title: {
        show:'false'
    },
    geo: {
        map: 'world',       // 与引用进来的地图js名字一致
        roam: false,        // 禁止缩放平移
        itemStyle: {        // 每个区域的样式 
            normal: {
                areaColor: '#ff8800'
            },
            emphasis: {
                areaColor: 'red'
            }
        },
        regions: [{        // 选中的区域
            name: 'China',
            selected: true,
            itemStyle: {   // 高亮时候的样式
                emphasis: {
                    areaColor: '#7d7d7d'
                }
            },
            label: {    // 高亮的时候不显示标签
                emphasis: {
                    show: false
                }
            }
        }]
    },
    series: series,   // 将之前处理的数据放到这里
    textStyle: {
        fontSize: 12
    }
});

/* 然后就没有然后了，全剧终！ */

感谢 Thanks！！！