echarts 實現世界地圖地域流向炫酷效果

效果展現

實現世界地圖地域流向炫酷效果主要步驟：

1.引入echart.js 和 world.js

<script src="echarts.min.js"></script>
<script src="world.js"></script>

2.存放地圖的容器

<div id="echartsMap"></div>

3.地圖生成相關邏輯

let chart = echarts.init(document.getElementById('echartsMap'));

// 小飛機的圖標，能夠用其餘圖形替換
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[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push([{
                coord: fromCoord // 起點座標
            }, {
                coord: toCoord // 終點座標
            }])
        }
    }
    return res;
}

var color = ['#9ae5fc', '#dcbf71']; // 自定義圖中要用到的顏色
var series = []; // 用來存儲地圖數據

[
    //['中國', DMData],
    //['中國', D1LData]
    ['中國', OMData]
].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: 5
        },
        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 / 4, // 散點的大小，經過以前設置的權重來計算，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: [{
        name: '中國',
        value: [116.46, 39.92, 30],
        label: {
            normal: {
                position: 'right'
            }
        }
    }]
});

// 最後初始化世界地圖中的相關數據
chart.setOption({
    backgroundColor: '#101724',
    title: {
        //text: '中國國際貿易促進委員會',
        //subtext: '國別資訊',
        textStyle: {
            color: '#fff',
            fontSize: 20
        },
        top: '10px',
        left: '10px'
    },
    geo: {
        map: 'world', // 與引用進來的地圖js名字一致
        roam: false, // 禁止縮放平移
        itemStyle: { // 每一個區域的樣式
            normal: {
                areaColor: '#7d7d7d'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        regions: [{ // 選中的區域
            name: 'China',
            selected: false,
            itemStyle: { // 高亮時候的樣式
                emphasis: {
                    areaColor: '#7d7d7d'
                }
            },
            label: { // 高亮的時候不顯示標籤
                emphasis: {
                    show: false
                }
            }
        }]
    },
    series: series, // 將以前處理的數據放到這裏
    textStyle: {
        fontSize: 12
    }
});

相關數據

/*
圖中相關城市經緯度,根據你的需求添加數據
關於國家的經緯度，能夠用首都的經緯度或者其餘城市的經緯度
*/
var geoCoordMap = {
    //東盟十國
    '廣州': [113.5107, 23.2196],
    '馬來西亞': [101.975766, 4.210484],
    '印度尼西亞': [113.921327, -0.789275],
    '泰國': [100.992541, 15.870032],
    '菲律賓': [121.774017, 12.879721],
    '文萊': [114.727669, 4.535277],
    '越南': [108.277199, 14.058324],
    '老撾': [102.495496, 19.85627],
    '緬甸': [95.956223, 21.913965],
    '柬埔寨': [104.990963, 12.565679],
    '新加坡': [103.51, 1.17],
    //一帶一路
    '廣州': [113.5107, 23.2196],
    '中國': [116.40, 39.90],
    '蒙古': [103.846656, 46.862496],
    '俄羅斯': [105.318756, 61.52401],
    '東帝汶': [125.727539, -8.874217],
    '印度': [78.96288, 20.593684],
    '巴基斯坦': [69.34511599999999, 30.375321],
    '孟加拉國': [90.356331, 23.684994],
    '斯里蘭卡': [80.77179699999999, 7.873053999999999],
    '阿富汗': [67.709953, 33.93911],
    '尼泊爾': [84.12400799999999, 28.394857],
    '馬爾代夫': [73.5, 4.2],
    '不丹': [90.433601, 27.514162],
    '沙特阿拉伯': [45.079162, 23.885942],
    '阿聯酋': [53.847818, 23.424076],
    '阿曼': [55.923255, 21.512583],
    '伊朗': [53.688046, 32.427908],
    '土耳其': [35.243322, 38.963745],
    '以色列': [34.851612, 31.046051],
    '埃及': [30.802498, 26.820553],
    '科威特': [47.481766, 29.31166],
    '伊拉克': [43.679291, 33.223191],
    '卡塔爾': [51.183884, 25.354826],
    '約旦': [36.238414, 30.585164],
    '黎巴嫩': [35.862285, 33.854721],
    '巴林': [50.36, 26.12],
    '也門': [48.516388, 15.552727],
    '敘利亞': [38.996815, 34.80207499999999],
    '巴勒斯坦': [34.28, 31.30],
    '波蘭': [19.145136, 51.919438],
    '羅馬尼亞': [24.96676, 45.943161],
    '捷克共和國': [15.472962, 49.81749199999999],
    '斯洛伐克': [19.699024, 48.669026],
    '保加利亞': [25.48583, 42.733883],
    '匈牙利': [19.503304, 47.162494],
    '拉脫維亞': [24.603189, 56.879635],
    '立陶宛': [23.881275, 55.169438],
    '斯洛文尼亞': [14.995463, 46.151241],
    '愛沙尼亞': [25.013607, 58.595272],
    '克羅地亞': [15.2, 45.1],
    '阿爾巴尼亞': [20.168331, 41.153332],
    '塞爾維亞': [21.005859, 44.016521],
    '馬其頓': [21.745275, 41.608635],
    '波黑': [43.52, 18.26],
    '黑山': [19.37439, 42.708678],
    '哈薩克斯坦': [66.923684, 48.019573],
    '烏茲別克斯坦': [64.585262, 41.377491],
    '土庫曼斯坦': [59.556278, 38.969719],
    '吉爾吉斯斯坦': [74.766098, 41.20438],
    '塔吉克斯坦': [71.276093, 38.861034],
    '烏克蘭': [31.16558, 48.379433],
    '白俄羅斯': [27.953389, 53.709807],
    '格魯吉亞': [43.356892, 42.315407],
    '阿塞拜疆': [47.576927, 40.143105],
    '亞美尼亞': [45.038189, 40.069099],
    '摩爾多瓦': [28.369885, 47.411631],
    //歐美國家
    '挪威': [8.468945999999999, 60.47202399999999],
    '丹麥': [9.501785, 56.26392],
    '瑞典': [18.643501, 60.12816100000001],
    '芬蘭': [25.748151, 61.92410999999999],
    '英國': [-3.435973, 55.378051],
    '荷蘭': [5.291265999999999, 52.132633],
    '愛爾蘭': [-8.24389, 53.41291],
    '比利時': [4.469936, 50.503887],
    '盧森堡': [6.129582999999999, 49.815273],
    '法國': [2.213749, 46.227638],
    '西班牙': [-3.74922, 40.46366700000001],
    '葡萄牙': [-8.224454, 39.39987199999999],
    '德國': [10.451526, 51.165691],
    '奧地利': [14.550072, 47.516231],
    '瑞士': [8.227511999999999, 46.818188],
    '美國': [-95.712891, 37.09024],
    '加拿大': [-102.646409, 59.994255],
    '澳大利亞': [133.775136, -25.274398],
    '新西蘭': [174.885971, -40.900557]
};

// 東盟10國
var DMData = [
    [{
        name: '中國'
    }, {
        name: "馬來西亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "印度尼西亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "泰國",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "菲律賓",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "文萊",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "越南",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "老撾",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "緬甸",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "柬埔寨",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "新加坡",
        value: 30
    }]
];
//一帶一路
var D1LData = [
    [{
        name: '中國'
    }, {
        name: "蒙古",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "俄羅斯",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "東帝汶",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "印度",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "巴基斯坦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "孟加拉國",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "斯里蘭卡",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "阿富汗",
        value: 30
    }],
    [{
        name: '廣州'
    }, {
        name: "尼泊爾",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "馬爾代夫",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "不丹",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "沙特阿拉伯",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "阿聯酋",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "阿曼",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "伊朗",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "土耳其",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "以色列",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "埃及",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "科威特",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "伊拉克",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "卡塔爾",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "約旦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "黎巴嫩",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "巴林",
        value: 30
    }],
    [{
        name: '廣州'
    }, {
        name: "也門",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "敘利亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "巴勒斯坦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "波蘭",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "羅馬尼亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "捷克共和國",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "斯洛伐克",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "保加利亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "匈牙利",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "拉脫維亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "立陶宛",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "斯洛文尼亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "愛沙尼亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "克羅地亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "阿爾巴尼亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "塞爾維亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "馬其頓",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "波黑",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "黑山",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "哈薩克斯坦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "烏茲別克斯坦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "土庫曼斯坦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "吉爾吉斯斯坦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "塔吉克斯坦",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "烏克蘭",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "白俄羅斯",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "格魯吉亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "阿塞拜疆",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "亞美尼亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "摩爾多瓦",
        value: 30
    }]
];
var OMData = [ //歐美國家
    [{
        name: '中國'
    }, {
        name: "挪威",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "丹麥",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "瑞典",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "芬蘭",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "英國",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "荷蘭",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "愛爾蘭",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "比利時",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "盧森堡",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "法國",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "西班牙",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "葡萄牙",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "德國",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "奧地利",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "瑞士",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "美國",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "加拿大",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "澳大利亞",
        value: 30
    }],
    [{
        name: '中國'
    }, {
        name: "新西蘭",
        value: 30
    }]
];

完整的demo

<!DOCTYPE html>
<html>
    <head>
        <title>demo | vue-amap</title>
        <meta charset="UTF-8">
    </head>
    <style scoped="">
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #echartsMap {
            width: 1920px;
            height: 1080px;

        }

        .map-wrapper {
            background-color: #101724;
            display: flex;
            width: 100%;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }
    </style>
    <body>
        <div class="map-wrapper">
            <div id="echartsMap"></div>
        </div>
    </body>
    <!-- 引入組件庫 -->
    <script src="echarts.min.js"></script>
    <script src="world.js"></script>
    <script>
        let chart = echarts.init(document.getElementById('echartsMap'));
        /*
            圖中相關城市經緯度,根據你的需求添加數據
            關於國家的經緯度，能夠用首都的經緯度或者其餘城市的經緯度
        */
        var geoCoordMap = {
            //東盟十國
            '廣州': [113.5107, 23.2196],
            '馬來西亞': [101.975766, 4.210484],
            '印度尼西亞': [113.921327, -0.789275],
            '泰國': [100.992541, 15.870032],
            '菲律賓': [121.774017, 12.879721],
            '文萊': [114.727669, 4.535277],
            '越南': [108.277199, 14.058324],
            '老撾': [102.495496, 19.85627],
            '緬甸': [95.956223, 21.913965],
            '柬埔寨': [104.990963, 12.565679],
            '新加坡': [103.51, 1.17],
            //一帶一路
            '廣州': [113.5107, 23.2196],
            '中國': [116.40, 39.90],
            '蒙古': [103.846656, 46.862496],
            '俄羅斯': [105.318756, 61.52401],
            '東帝汶': [125.727539, -8.874217],
            '印度': [78.96288, 20.593684],
            '巴基斯坦': [69.34511599999999, 30.375321],
            '孟加拉國': [90.356331, 23.684994],
            '斯里蘭卡': [80.77179699999999, 7.873053999999999],
            '阿富汗': [67.709953, 33.93911],
            '尼泊爾': [84.12400799999999, 28.394857],
            '馬爾代夫': [73.5, 4.2],
            '不丹': [90.433601, 27.514162],
            '沙特阿拉伯': [45.079162, 23.885942],
            '阿聯酋': [53.847818, 23.424076],
            '阿曼': [55.923255, 21.512583],
            '伊朗': [53.688046, 32.427908],
            '土耳其': [35.243322, 38.963745],
            '以色列': [34.851612, 31.046051],
            '埃及': [30.802498, 26.820553],
            '科威特': [47.481766, 29.31166],
            '伊拉克': [43.679291, 33.223191],
            '卡塔爾': [51.183884, 25.354826],
            '約旦': [36.238414, 30.585164],
            '黎巴嫩': [35.862285, 33.854721],
            '巴林': [50.36, 26.12],
            '也門': [48.516388, 15.552727],
            '敘利亞': [38.996815, 34.80207499999999],
            '巴勒斯坦': [34.28, 31.30],
            '波蘭': [19.145136, 51.919438],
            '羅馬尼亞': [24.96676, 45.943161],
            '捷克共和國': [15.472962, 49.81749199999999],
            '斯洛伐克': [19.699024, 48.669026],
            '保加利亞': [25.48583, 42.733883],
            '匈牙利': [19.503304, 47.162494],
            '拉脫維亞': [24.603189, 56.879635],
            '立陶宛': [23.881275, 55.169438],
            '斯洛文尼亞': [14.995463, 46.151241],
            '愛沙尼亞': [25.013607, 58.595272],
            '克羅地亞': [15.2, 45.1],
            '阿爾巴尼亞': [20.168331, 41.153332],
            '塞爾維亞': [21.005859, 44.016521],
            '馬其頓': [21.745275, 41.608635],
            '波黑': [43.52, 18.26],
            '黑山': [19.37439, 42.708678],
            '哈薩克斯坦': [66.923684, 48.019573],
            '烏茲別克斯坦': [64.585262, 41.377491],
            '土庫曼斯坦': [59.556278, 38.969719],
            '吉爾吉斯斯坦': [74.766098, 41.20438],
            '塔吉克斯坦': [71.276093, 38.861034],
            '烏克蘭': [31.16558, 48.379433],
            '白俄羅斯': [27.953389, 53.709807],
            '格魯吉亞': [43.356892, 42.315407],
            '阿塞拜疆': [47.576927, 40.143105],
            '亞美尼亞': [45.038189, 40.069099],
            '摩爾多瓦': [28.369885, 47.411631],
            //歐美國家
            '挪威': [8.468945999999999, 60.47202399999999],
            '丹麥': [9.501785, 56.26392],
            '瑞典': [18.643501, 60.12816100000001],
            '芬蘭': [25.748151, 61.92410999999999],
            '英國': [-3.435973, 55.378051],
            '荷蘭': [5.291265999999999, 52.132633],
            '愛爾蘭': [-8.24389, 53.41291],
            '比利時': [4.469936, 50.503887],
            '盧森堡': [6.129582999999999, 49.815273],
            '法國': [2.213749, 46.227638],
            '西班牙': [-3.74922, 40.46366700000001],
            '葡萄牙': [-8.224454, 39.39987199999999],
            '德國': [10.451526, 51.165691],
            '奧地利': [14.550072, 47.516231],
            '瑞士': [8.227511999999999, 46.818188],
            '美國': [-95.712891, 37.09024],
            '加拿大': [-102.646409, 59.994255],
            '澳大利亞': [133.775136, -25.274398],
            '新西蘭': [174.885971, -40.900557]
        };

        // 東盟10國
        var DMData = [
            [{
                name: '中國'
            }, {
                name: "馬來西亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "印度尼西亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "泰國",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "菲律賓",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "文萊",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "越南",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "老撾",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "緬甸",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "柬埔寨",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "新加坡",
                value: 30
            }]
        ];
        //一帶一路
        var D1LData = [
            [{
                name: '中國'
            }, {
                name: "蒙古",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "俄羅斯",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "東帝汶",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "印度",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "巴基斯坦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "孟加拉國",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "斯里蘭卡",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "阿富汗",
                value: 30
            }],
            [{
                name: '廣州'
            }, {
                name: "尼泊爾",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "馬爾代夫",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "不丹",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "沙特阿拉伯",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "阿聯酋",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "阿曼",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "伊朗",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "土耳其",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "以色列",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "埃及",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "科威特",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "伊拉克",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "卡塔爾",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "約旦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "黎巴嫩",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "巴林",
                value: 30
            }],
            [{
                name: '廣州'
            }, {
                name: "也門",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "敘利亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "巴勒斯坦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "波蘭",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "羅馬尼亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "捷克共和國",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "斯洛伐克",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "保加利亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "匈牙利",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "拉脫維亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "立陶宛",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "斯洛文尼亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "愛沙尼亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "克羅地亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "阿爾巴尼亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "塞爾維亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "馬其頓",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "波黑",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "黑山",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "哈薩克斯坦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "烏茲別克斯坦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "土庫曼斯坦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "吉爾吉斯斯坦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "塔吉克斯坦",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "烏克蘭",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "白俄羅斯",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "格魯吉亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "阿塞拜疆",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "亞美尼亞",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "摩爾多瓦",
                value: 30
            }]
        ];
        var OMData = [ //歐美國家
            [{
                name: '中國'
            }, {
                name: "挪威",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "丹麥",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "瑞典",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "芬蘭",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "英國",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "荷蘭",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "愛爾蘭",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "比利時",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "盧森堡",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "法國",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "西班牙",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "葡萄牙",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "德國",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "奧地利",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "瑞士",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "美國",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "加拿大",
                value: 30
            }],
            [{
                name: '中國'
            }, {
                name: "澳大利亞",
                value: 30
            }],
            [{
                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[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord // 起點座標
                    }, {
                        coord: toCoord // 終點座標
                    }])
                }
            }
            return res;
        }

        var color = ['#9ae5fc', '#dcbf71']; // 自定義圖中要用到的顏色
        var series = []; // 用來存儲地圖數據

        [
            //['中國', DMData],
            //['中國', D1LData]
            ['中國', OMData]
        ].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: 5
                },
                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 / 4, // 散點的大小，經過以前設置的權重來計算，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: [{
                name: '中國',
                value: [116.46, 39.92, 30],
                label: {
                    normal: {
                        position: 'right'
                    }
                }
            }]
        });

        // 最後初始化世界地圖中的相關數據
        chart.setOption({
            backgroundColor: '#101724',
            title: {
                //text: '中國國際貿易促進委員會',
                //subtext: '國別資訊',
                textStyle: {
                    color: '#fff',
                    fontSize: 20
                },
                top: '10px',
                left: '10px'
            },
            geo: {
                map: 'world', // 與引用進來的地圖js名字一致
                roam: false, // 禁止縮放平移
                itemStyle: { // 每一個區域的樣式
                    normal: {
                        areaColor: '#7d7d7d'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                },
                regions: [{ // 選中的區域
                    name: 'China',
                    selected: false,
                    itemStyle: { // 高亮時候的樣式
                        emphasis: {
                            areaColor: '#7d7d7d'
                        }
                    },
                    label: { // 高亮的時候不顯示標籤
                        emphasis: {
                            show: false
                        }
                    }
                }]
            },
            series: series, // 將以前處理的數據放到這裏
            textStyle: {
                fontSize: 12
            }
        });
    </script>
</html>