vue+echarts 实现世界地图

 

 

 

?

1	<div id="map" style="position: relative; width: 5.95rem; height: 5rem; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div>

　　

// 
import world from '@/assets/world.json'
import * as echarts from "echarts";

export default {
  name: "HelloWorld", 
  data() {
    return {
      value: "world",
      myChart:null,
    //   注册地图json
       jsonMap: {
        'world':world,
        },
        // 全球数据
        worldData :[
        {name: '美国', gold: 46, silver: 29, copper: 29, value: 104},
        {name: '中国', gold: 38, silver: 27, copper: 23, value: 88},
        {name: '英国', gold: 29, silver: 17, copper: 19, value: 65},
        {name: '俄罗斯', gold: 24, silver: 25, copper: 33, value: 82},
        {name: '韩国', gold: 13, silver: 8, copper: 7, value: 28},
        {name: '德国', gold: 11, silver: 19, copper: 14, value: 44},
        {name: '法国', gold: 11, silver: 11, copper: 12, value: 34},
        {name: '意大利', gold: 8, silver: 9, copper: 11, value: 28},
        {name: '匈牙利', gold: 8, silver: 4, copper: 5, value: 17},
        {name: '澳大利亚', gold: 7, silver: 16, copper: 12, value: 35},
        {name: '日本', gold: 7, silver: 14, copper: 17, value: 38},
        {name: '哈萨克斯坦', gold: 7, silver: 1, copper: 5, value: 13},
        {name: '荷兰', gold: 6, silver: 6, copper: 8, value: 20},
        {name: '乌克兰', gold: 6, silver: 5, copper: 9, value: 20},
        {name: '古巴', gold: 5, silver: 3, copper: 6, value: 14},
        {name: '新西兰', gold: 5, silver: 3, copper: 5, value: 13},
        {name: '伊朗', gold: 4, silver: 5, copper: 3, value: 12},
        {name: '牙买加', gold: 4, silver: 4, copper: 4, value: 12},
        {name: '捷克', gold: 4, silver: 3, copper: 3, value: 10},
        {name: '朝鲜', gold: 4, silver: 0, copper: 2, value: 6},
        {name: '西班牙', gold: 3, silver: 10, copper: 4, value: 17},
        {name: '巴西', gold: 3, silver: 5, copper: 9, value: 17},
        {name: '白俄罗斯', gold: 3, silver: 5, copper: 5, value: 13},
        {name: '南非', gold: 3, silver: 2, copper: 1, value: 6},
        {name: '埃塞俄比亚', gold: 3, silver: 1, copper: 3, value: 7},
        {name: '克罗地亚', gold: 3, silver: 1, copper: 2, value: 6},
        {name: '罗马尼亚', gold: 2, silver: 5, copper: 2, value: 9},
        {name: '肯尼亚', gold: 2, silver: 4, copper: 5, value: 11},
        {name: '丹麦', gold: 2, silver: 4, copper: 3, value: 9},
        {name: '波兰', gold: 2, silver: 2, copper: 6, value: 10},
        {name: '阿塞拜疆', gold: 2, silver: 2, copper: 6, value: 10},
        {name: '土耳其', gold: 2, silver: 2, copper: 1, value: 5},
        {name: '瑞士', gold: 2, silver: 2, copper: 0, value: 4},
        {name: '立陶宛', gold: 2, silver: 1, copper: 2, value: 5},
        {name: '挪威', gold: 2, silver: 1, copper: 1, value: 4},
        {name: '加拿大', gold: 1, silver: 5, copper: 12, value: 18},
        {name: '瑞典', gold: 1, silver: 4, copper: 3, value: 8},
        {name: '哥伦比亚', gold: 1, silver: 3, copper: 4, value: 8},
        {name: '格鲁吉亚', gold: 1, silver: 3, copper: 3, value: 7},
        {name: '墨西哥', gold: 1, silver: 3, copper: 3, value: 7},
        {name: '爱尔兰', gold: 1, silver: 1, copper: 3, value: 5},
        {name: '塞尔维亚', gold: 1, silver: 1, copper: 2, value: 4},
        {name: '斯洛文尼亚', gold: 1, silver: 1, copper: 2, value: 4},
        {name: '阿根廷', gold: 1, silver: 1, copper: 2, value: 4},
        {name: '突尼斯', gold: 1, silver: 1, copper: 1, value: 3},
        {name: '多米尼加', gold: 1, silver: 1, copper: 0, value: 2},
        {name: '乌兹别克斯坦', gold: 1, silver: 0, copper: 3, value: 4},
        {name: '特立尼达和多巴哥', gold: 1, silver: 0, copper: 3, value: 4},
        {name: '拉脱维亚', gold: 1, silver: 0, copper: 1, value: 2},
        {name: '格林纳达', gold: 1, silver: 0, copper: 0, value: 1},
        {name: '巴哈马', gold: 1, silver: 0, copper: 0, value: 1},
        {name: '乌干达', gold: 1, silver: 0, copper: 0, value: 1},
        {name: '委内瑞拉', gold: 1, silver: 0, copper: 0, value: 1},
        {name: '阿尔及利亚', gold: 1, silver: 0, copper: 0, value: 1},
        {name: '印度', gold: 0, silver: 2, copper: 4, value: 6},
        {name: '蒙古', gold: 0, silver: 2, copper: 3, value: 5},
        {name: '泰国', gold: 0, silver: 2, copper: 1, value: 3},
        {name: '埃及', gold: 0, silver: 2, copper: 0, value: 2},
        {name: '斯洛伐克', gold: 0, silver: 1, copper: 3, value: 4},
        {name: '比利时', gold: 0, silver: 1, copper: 2, value: 3},
        {name: '芬兰', gold: 0, silver: 1, copper: 2, value: 3},
        {name: '亚美尼亚', gold: 0, silver: 1, copper: 2, value: 3},
        {name: '马来西亚', gold: 0, silver: 1, copper: 1, value: 2},
        {name: '中华台北', gold: 0, silver: 1, copper: 1, value: 2},
        {name: '爱沙尼亚', gold: 0, silver: 1, copper: 1, value: 2},
        {name: '保加利亚', gold: 0, silver: 1, copper: 1, value: 2},
        {name: '印度尼西亚', gold: 0, silver: 1, copper: 1, value: 2},
        {name: '波多黎各', gold: 0, silver: 1, copper: 1, value: 2},
        {name: '黑山', gold: 0, silver: 1, copper: 0, value: 1},
        {name: '博茨瓦纳', gold: 0, silver: 1, copper: 0, value: 1},
        {name: '塞浦路斯', gold: 0, silver: 1, copper: 0, value: 1},
        {name: '葡萄牙', gold: 0, silver: 1, copper: 0, value: 1},
        {name: '加蓬', gold: 0, silver: 1, copper: 0, value: 1},
        {name: '危地马拉', gold: 0, silver: 1, copper: 0, value: 1},
        {name: '卡塔尔', gold: 0, silver: 0, copper: 2, value: 2},
        {name: '新加坡', gold: 0, silver: 0, copper: 2, value: 2},
        {name: '希腊', gold: 0, silver: 0, copper: 2, value: 2},
        {name: '摩尔多瓦', gold: 0, silver: 0, copper: 2, value: 2},
        {name: '巴林', gold: 0, silver: 0, copper: 1, value: 1},
        {name: '塔吉克斯坦', gold: 0, silver: 0, copper: 1, value: 1},
        {name: '中国香港', gold: 0, silver: 0, copper: 1, value: 1},
        {name: '摩洛哥', gold: 0, silver: 0, copper: 1, value: 1},
        {name: '沙特阿拉伯', gold: 0, silver: 0, copper: 1, value: 1},
        {name: '科威特', gold: 0, silver: 0, copper: 1, value: 1},
        {name: '阿富汗', gold: 0, silver: 0, copper: 1, value: 1}
        ],
        // 全球地域中文映射
        nameMap : {
            'Afghanistan':'阿富汗',
            'Albania':'阿尔巴尼亚',
            'Algeria':'阿尔及利亚',
            'Andorra':'安道尔',
            'Angola':'安哥拉',
            'Antarctica':'南极洲',
            'Antigua and Barbuda':'安提瓜和巴布达',
            'Argentina':'阿根廷',
            'Armenia':'亚美尼亚',
            'Australia':'澳大利亚',
            'Austria':'奥地利',
            'Azerbaijan':'阿塞拜疆',
            'The Bahamas':'巴哈马',
            'Bahrain':'巴林',
            'Bangladesh':'孟加拉国',
            'Barbados':'巴巴多斯',
            'Belarus':'白俄罗斯',
            'Belgium':'比利时',
            'Belize':'伯利兹',
            'Benin':'贝宁',
            'Bermuda':'百慕大',
            'Bhutan':'不丹',
            'Bolivia':'玻利维亚',
            'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那',
            'Botswana':'博茨瓦纳',
            'Brazil':'巴西',
            'Brunei':'文莱',
            'Bulgaria':'保加利亚',
            'Burkina Faso':'布基纳法索',
            'Burundi':'布隆迪',
            'Cambodia':'柬埔寨',
            'Cameroon':'喀麦隆',
            'Canada':'加拿大',
            'Cape Verde':'佛得角',
            'Central African Rep.':'中非共和国',
            "Côte d'Ivoire":'象牙海岸',
            'Chad':'乍得',
            'Chile':'智利',
            'China':'中国',
            'Colombia':'哥伦比亚',
            'Comoros':'科摩罗',
            'Dem. Rep. Congo':'刚果共和国',
            'Congo':'刚果',
            'Costa Rica':'哥斯达黎加',
            'Croatia':'克罗地亚',
            'Cuba':'古巴',
            'Cyprus':'塞浦路斯',
            'Czech Republic':'捷克共和国',
            'Denmark':'丹麦',
            'Djibouti':'吉布提',
            'Dominica':'多米尼加',
            'Dominican Republic':'多明尼加共和国',
            'Ecuador':'厄瓜多尔',
            'Egypt':'埃及',
            'El Salvador':'萨尔瓦多',
            'Equatorial Guinea':'赤道几内亚',
            'Eritrea':'厄立特里亚',
            'Estonia':'爱沙尼亚',
            'Ethiopia':'埃塞俄比亚',
            'Falkland Islands':'福克兰群岛',
            'Faroe Islands':'法罗群岛',
            'Fiji':'斐济',
            'Finland':'芬兰',
            'France':'法国',
            'French Guiana':'法属圭亚那',
            'French Southern and Antarctic Lands':'法属南半球和南极领地',
            'Gabon':'加蓬',
            'Gambia':'冈比亚',
            'Gaza Strip':'加沙',
            'Georgia':'格鲁吉亚',
            'Germany':'德国',
            'Ghana':'加纳',
            'Greece':'希腊',
            'Greenland':'格陵兰',
            'Grenada':'格林纳达',
            'Guadeloupe':'瓜德罗普',
            'Guatemala':'危地马拉',
            'Guinea':'几内亚',
            'Guinea Bissau':'几内亚比绍',
            'Guyana':'圭亚那',
            'Haiti':'海地',
            'Honduras':'洪都拉斯',
            'Hong Kong':'香港',
            'Hungary':'匈牙利',
            'Iceland':'冰岛',
            'India':'印度',
            'Indonesia':'印尼',
            'Iran':'伊朗',
            'Iraq':'伊拉克',
            'Iraq-Saudi Arabia Neutral Zone':'伊拉克阿拉伯中立区',
            'Ireland':'爱尔兰',
            'Isle of Man':'马恩岛',
            'Israel':'以色列',
            'Italy':'意大利',
            'Ivory Coast':'科特迪瓦',
            'Jamaica':'牙买加',
            'Jan Mayen':'扬马延岛',
            'Japan':'日本',
            'Jordan':'约旦',
            'Kazakhstan':'哈萨克斯坦',
            'Kenya':'肯尼亚',
            'Kerguelen':'凯尔盖朗群岛',
            'Kiribati':'基里巴斯',
            'North Korea':'北朝鲜',
            'South Korea':'韩国',
            'Kuwait':'科威特',
            'Kyrgyzstan':'吉尔吉斯斯坦',
            'Lao PDR':'老挝',
            'Latvia':'拉脱维亚',
            'Lebanon':'黎巴嫩',
            'Lesotho':'莱索托',
            'Liberia':'利比里亚',
            'Libya':'利比亚',
            'Liechtenstein':'列支敦士登',
            'Lithuania':'立陶宛',
            'Luxembourg':'卢森堡',
            'Macau':'澳门',
            'Macedonia':'马其顿',
            'Madagascar':'马达加斯加',
            'Malawi':'马拉维',
            'Malaysia':'马来西亚',
            'Maldives':'马尔代夫',
            'Mali':'马里',
            'Malta':'马耳他',
            'Martinique':'马提尼克',
            'Mauritania':'毛里塔尼亚',
            'Mauritius':'毛里求斯',
            'Mexico':'墨西哥',
            'Moldova':'摩尔多瓦',
            'Monaco':'摩纳哥',
            'Mongolia':'蒙古',
            'Morocco':'摩洛哥',
            'Mozambique':'莫桑比克',
            'Myanmar':'缅甸',
            'Namibia':'纳米比亚',
            'Nepal':'尼泊尔',
            'Netherlands':'荷兰',
            'New Caledonia':'新喀里多尼亚',
            'New Zealand':'新西兰',
            'Nicaragua':'尼加拉瓜',
            'Niger':'尼日尔',
            'Nigeria':'尼日利亚',
            'Northern Mariana Islands':'北马里亚纳群岛',
            'Norway':'挪威',
            'Oman':'阿曼',
            'Pakistan':'巴基斯坦',
            'Panama':'巴拿马',
            'Papua New Guinea':'巴布亚新几内亚',
            'Paraguay':'巴拉圭',
            'Peru':'秘鲁',
            'Philippines':'菲律宾',
            'Poland':'波兰',
            'Portugal':'葡萄牙',
            'Puerto Rico':'波多黎各',
            'Qatar':'卡塔尔',
            'Reunion':'留尼旺岛',
            'Romania':'罗马尼亚',
            'Russia':'俄罗斯',
            'Rwanda':'卢旺达',
            'San Marino':'圣马力诺',
            'Sao Tome and Principe':'圣多美和普林西比',
            'Saudi Arabia':'沙特阿拉伯',
            'Senegal':'塞内加尔',
            'Seychelles':'塞舌尔',
            'Sierra Leone':'塞拉利昂',
            'Singapore':'新加坡',
            'Slovakia':'斯洛伐克',
            'Slovenia':'斯洛文尼亚',
            'Solomon Islands':'所罗门群岛',
            'Somalia':'索马里',
            'S. Sudan':'苏丹',
            'South Africa':'南非',
            'Spain':'西班牙',
            'Sri Lanka':'斯里兰卡',
            'St. Christopher-Nevis':'圣',
            'St. Lucia':'圣露西亚',
            'St. Vincent and the Grenadines':'圣文森特和格林纳丁斯',
            'Sudan':'苏丹',
            'Suriname':'苏里南',
            'Svalbard':'斯瓦尔巴特群岛',
            'Swaziland':'斯威士兰',
            'Sweden':'瑞典',
            'Switzerland':'瑞士',
            'Syria':'叙利亚',
            'Taiwan':'台湾',
            'Tajikistan':'塔吉克斯坦',
            'United Republic of Tanzania':'坦桑尼亚',
            'Thailand':'泰国',
            'Togo':'多哥',
            'Tonga':'汤加',
            'Trinidad and Tobago':'特里尼达和多巴哥',
            'Tunisia':'突尼斯',
            'Turkey':'土耳其',
            'Turkmenistan':'土库曼斯坦',
            'Tanzania':'坦桑尼亚',
            'Turks and Caicos Islands':'特克斯和凯科斯群岛',
            'Uganda':'乌干达',
            'Ukraine':'乌克兰',
            'United Arab Emirates':'阿联酋',
            'United Kingdom':'英国',
            'United States':'美国',
            'Uruguay':'乌拉圭',
            'Uzbekistan':'乌兹别克斯坦',
            'Vanuatu':'瓦努阿图',
            'Venezuela':'委内瑞拉',
            'Vietnam':'越南',
            'Western Sahara':'西撒哈拉',
            'Western Samoa':'西萨摩亚',
            'Yemen':'也门',
            'Yugoslavia':'南斯拉夫',
            'Democratic Republic of the Congo':'刚果民主共和国',
            'Zambia':'赞比亚',
            'Zimbabwe':'津巴布韦',
            'South Sudan':'南苏丹',
            'Somaliland':'索马里兰',
            'Montenegro':'黑山',
            'Kosovo':'科索沃',
            'Republic of Serbia':'塞尔维亚',
        },



    };
  },
  created(){
         echarts.registerMap('world', world)
  },
   mounted(){
    //    初始化地图
     this.chinaConfigure(this.value);
  },
  methods:{
    chinaConfigure(area) {
         let option;
         this.myChart =echarts.init(document.getElementById("map")); //这里是为了获得容器所在位置        
         window.onresize = this.myChart.resize;
      //    let option={ // 进行相关配置
      //     visualMap: {
      //       show:false,
      //       max: 110,
      //       calculable: false,
      //       inRange: {
      //           color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
      //         }
      //             },
      //   series: [{
      //   type: 'map',
      //   map: area,
      //     data: area=='world'?this.worldData:area,
      //     nameMap: area=='world'?this.nameMap:{}
      // }]
      //   }
        function mapOptions() {
        let colorList = ['#4ab2e5', '#4fb6d2', '#52b9c7', '#5abead', '#f34e2b', '#f56321', '#f56f1c', '#f58414'
            , '#f58f0e'
            , '#f5a305'
            , '#e7ab0b'
            , '#dfae10'
            , '#d5b314'
            , '#c1bb1f'
            , '#b9be23'
            , '#a6c62c'
            , '#96cc34']
       
        var geoCoordMap = {
            济南: [116.98, 36.67],
            北京: [116.404184, 39.914578],
            尼日利亚: [-4.388361, 11.186148],
            美国洛杉矶: [-118.24311, 34.052713],
            香港邦泰: [114.195466, 22.282751],
            美国芝加哥: [-87.801833, 41.870975],
            加纳库马西: [-4.62829, 7.72415],
            英国曼彻斯特: [-1.657222, 51.886863],
            德国汉堡: [10.01959, 54.38474],
            哈萨克斯坦阿拉木图: [45.326912, 41.101891],
            俄罗斯伊尔库茨克: [89.116876, 67.757906],
            巴西: [-48.678945, -10.493623],
            埃及达米埃塔: [31.815593, 31.418032],
            西班牙巴塞罗纳: [2.175129, 41.385064],
            柬埔寨金边: [104.88659, 11.545469],
            意大利米兰: [9.189948, 45.46623],
            乌拉圭蒙得维的亚: [-56.162231, -34.901113],
            莫桑比克马普托: [32.608571, -25.893473],
            阿尔及利亚阿尔及尔: [3.054275, 36.753027],
            阿联酋迪拜: [55.269441, 25.204514],
            匈牙利布达佩斯: [17.108519, 48.179162],
            澳大利亚悉尼: [150.993137, -33.675509],
            美国加州: [-121.910642, 41.38028],
            澳大利亚墨尔本: [144.999416, -37.781726],
            墨西哥: [-99.094092, 19.365711],
            加拿大温哥华: [-123.023921, 49.311753],
            "阿富汗": [69.11, 34.28],
            "阿尔巴尼亚": [19.49, 41.18],
            "阿尔及利亚": [3.08, 36.42],
            "美属萨摩亚": [-170.43, -14.16],
            "安道尔": [1.32, 42.31],
            "安哥拉": [13.15, -8.50],
            "安提瓜和巴布达": [-61.48, 17.20],
            "阿根廷": [-60.00, -36.30],
            "亚美尼亚": [44.31, 40.10],
            "阿鲁巴": [-70.02, 12.32],
            "澳大利亚": [149.08, -35.15],
            "奥地利": [16.22, 48.12],
            "阿塞拜疆": [49.56, 40.29],
            "巴哈马": [-77.20, 25.05],
            "巴林": [50.30, 26.10],
            "孟加拉国": [90.26, 23.43],
            "巴巴多斯": [-59.30, 13.05],
            "白俄罗斯": [27.30, 53.52],
            "比利时": [4.21, 50.51],
            "伯利兹": [-88.30, 17.18],
            "贝宁": [2.42, 6.23],
            "不丹": [89.45, 27.31],
            "玻利维亚": [-68.10, -16.20],
            "波斯尼亚和黑塞哥维那": [18.26, 43.52],
            "博茨瓦纳": [25.57, -24.45],
            "巴西": [-47.55, -15.47],
            "英属维尔京群岛": [-64.37, 18.27],
            "文莱": [115.00, 4.52],
            "保加利亚": [23.20, 42.45],
            "布基纳法索": [-1.30, 12.15],
            "布隆迪": [29.18, -3.16],
            "柬埔寨": [104.55, 11.33],
            "喀麦隆": [11.35, 3.50],
            "加拿大": [-75.42, 45.27],
            "佛得角": [-23.34, 15.02],
            "开曼群岛": [-81.24, 19.20],
            "中非共和国": [18.35, 4.23],
            "乍得": [14.59, 12.10],
            "智利": [-70.40, -33.24],
            "中国": [116.20, 39.55],
            "哥伦比亚": [-74.00, 4.34],
            "科摩罗": [43.16, -11.40],
            "刚果": [15.12, -4.09],
            "哥斯达黎加": [-84.02, 9.55],
            "科特迪瓦": [-5.17, 6.49],
            "克罗地亚": [15.58, 45.50],
            "古巴": [-82.22, 23.08],
            "塞浦路斯": [33.25, 35.10],
            "捷克共和国": [14.22, 50.05],
            "朝鲜": [125.30, 39.09],
            "刚果(扎伊尔)": [15.15, -4.20],
            "丹麦": [12.34, 55.41],
            "吉布提": [42.20, 11.08],
            "多米尼加": [-61.24, 15.20],
            "多米尼加共和国": [-69.59, 18.30],
            "东帝汶": [125.34, -8.29],
            "厄瓜多尔": [-78.35, -0.15],
            "埃及": [31.14, 30.01],
            "萨尔瓦多": [-89.10, 13.40],
            "赤道几内亚": [8.50, 3.45],
            "厄立特里亚": [38.55, 15.19],
            "爱沙尼亚": [24.48, 59.22],
            "埃塞俄比亚": [38.42, 9.02],
            "福克兰群岛(马尔维纳斯群岛)": [-59.51, -51.40],
            "法罗群岛": [-6.56, 62.05],
            "斐济": [178.30, -18.06],
            "芬兰": [25.03, 60.15],
            "法国": [2.20, 48.50],
            "法属圭亚那": [-52.18, 5.05],
            "法属波利尼西亚": [-149.34, -17.32],
            "加蓬": [9.26, 0.25],
            "冈比亚": [-16.40, 13.28],
            "格鲁吉亚": [44.50, 41.43],
            "德国": [13.25, 52.30],
            "加纳": [-0.06, 5.35],
            "希腊": [23.46, 37.58],
            "格陵兰": [-51.35, 64.10],
            "瓜德罗普岛": [-61.44, 16.00],
            "危地马拉": [-90.22, 14.40],
            "根西岛": [-2.33, 49.26],
            "几内亚": [-13.49, 9.29],
            "几内亚比绍": [-15.45, 11.45],
            "圭亚那": [-58.12, 6.50],
            "海地": [-72.20, 18.40],
            "赫德岛和麦当劳群岛": [74.00, -53.00],
            "洪都拉斯": [-87.14, 14.05],
            "匈牙利": [19.05, 47.29],
            "冰岛": [-21.57, 64.10],
            "印度": [77.13, 28.37],
            "印度尼西亚": [106.49, -6.09],
            "伊朗": [51.30, 35.44],
            "伊拉克": [44.30, 33.20],
            "爱尔兰": [-6.15, 53.21],
            "以色列": [35.12, 31.47],
            "意大利": [12.29, 41.54],
            "牙买加": [-76.50, 18.00],
            "约旦": [35.52, 31.57],
            "哈萨克斯坦": [71.30, 51.10],
            "肯尼亚": [36.48, -1.17],
            "基里巴斯": [173.00, 1.30],
            "科威特": [48.00, 29.30],
            "吉尔吉斯斯坦": [74.46, 42.54],
            "老挝": [102.36, 17.58],
            "拉脱维亚": [24.08, 56.53],
            "黎巴嫩": [35.31, 33.53],
            "莱索托": [27.30, -29.18],
            "利比里亚": [-10.47, 6.18],
            "阿拉伯利比亚民众国": [13.07, 32.49],
            "列支敦士登": [9.31, 47.08],
            "立陶宛": [25.19, 54.38],
            "卢森堡": [6.09, 49.37],
            "马达加斯加": [47.31, -18.55],
            "马拉维": [33.48, -14.00],
            "马来西亚": [101.41, 3.09],
            "马尔代夫": [73.28, 4.00],
            "马里": [-7.55, 12.34],
            "马耳他": [14.31, 35.54],
            "马提尼克岛": [-61.02, 14.36],
            "毛里塔尼亚": [57.30, -20.10],
            "马约特岛": [45.14, -12.48],
            "墨西哥": [-99.10, 19.20],
            "密克罗尼西亚(联邦) ": [158.09, 6.55],
            "摩尔多瓦共和国": [28.50, 47.02],
            "莫桑比克": [32.32, -25.58],
            "缅甸": [96.20, 16.45],
            "纳米比亚": [17.04, -22.35],
            "尼泊尔": [85.20, 27.45],
            "荷兰": [4.54, 52.23],
            "荷属安的列斯": [-69.00, 12.05],
            "新喀里多尼亚": [166.30, -22.17],
            "新西兰": [174.46, -41.19],
            "尼加拉瓜": [-86.20, 12.06],
            "尼日尔": [2.06, 13.27],
            "尼日利亚": [7.32, 9.05],
            "诺福克岛": [168.43, -45.20],
            "北马里亚纳群岛": [145.45, 15.12],
            "挪威": [10.45, 59.55],
            "阿曼": [58.36, 23.37],
            "巴基斯坦": [73.10, 33.40],
            "帕劳": [134.28, 7.20],
            "巴拿马": [-79.25, 9.00],
            "巴布亚新几内亚": [147.08, -9.24],
            "巴拉圭": [-57.30, -25.10],
            "秘鲁": [-77.00, -12.00],
            "菲律宾": [121.03, 14.40],
            "波兰": [21.00, 52.13],
            "葡萄牙": [-9.10, 38.42],
            "波多黎各": [-66.07, 18.28],
            "卡塔尔": [51.35, 25.15],
            "韩国": [126.58, 37.31],
            "罗马尼亚": [26.10, 44.27],
            "俄罗斯": [37.35, 55.45],
            "卢旺达": [30.04, -1.59],
            "圣基茨和尼维斯": [-62.43, 17.17],
            "圣卢西亚": [-60.58, 14.02],
            "圣皮埃尔和密克隆": [-56.12, 46.46],
            "圣文森特和格林纳丁斯": [-61.10, 13.10],
            "萨摩亚": [-171.50, -13.50],
            "圣马力诺": [12.30, 43.55],
            "圣多美和普林西比": [6.39, 0.10],
            "沙特阿拉伯": [46.42, 24.41],
            "塞内加尔": [-17.29, 14.34],
            "塞拉利昂": [-13.17, 8.30],
            "斯洛伐克": [17.07, 48.10],
            "斯洛文尼亚": [14.33, 46.04],
            "所罗门群岛": [159.57, -9.27],
            "索马里": [45.25, 2.02],
            "比勒陀利亚": [28.12, -25.44],
            "西班牙": [-3.45, 40.25],
            "苏丹": [32.35, 15.31],
            "苏里南": [-55.10, 5.50],
            "斯威士兰": [31.06, -26.18],
            "瑞典": [18.03, 59.20],
            "瑞士": [7.28, 46.57],
            "阿拉伯叙利亚共和国": [36.18, 33.30],
            "塔吉克斯坦": [68.48, 38.33],
            "泰国": [100.35, 13.45],
            "马其顿": [21.26, 42.01],
            "多哥": [1.20, 6.09],
            "汤加": [-174.00, -21.10],
            "突尼斯": [10.11, 36.50],
            "土耳其": [32.54, 39.57],
            "土库曼斯坦": [57.50, 38.00],
            "图瓦卢": [179.13, -8.31],
            "乌干达": [32.30, 0.20],
            "乌克兰": [30.28, 50.30],
            "阿联酋": [54.22, 24.28],
            "英国": [-0.05, 51.36],
            "坦桑尼亚": [35.45, -6.08],
            "美国": [-77.02, 39.91],
            "美属维尔京群岛": [-64.56, 18.21],
            "乌拉圭": [-56.11, -34.50],
            "乌兹别克斯坦": [69.10, 41.20],
            "瓦努阿图": [168.18, -17.45],
            "委内瑞拉": [-66.55, 10.30],
            "越南": [105.55, 21.05],
            "南斯拉夫": [20.37, 44.50],
            "赞比亚": [28.16, -15.28],
            "津巴布韦": [31.02, -17.43]
        };
        var BJData = [
            [{
                name: "尼日利亚",
                value: 9100
            }, {
                name: "北京"
            }],
            [{
                name: "美国洛杉矶",
                value: 2370
            }, {
                name: "北京"
            }],
            [{
                name: "香港邦泰",
                value: 3130
            }, {
                name: "北京"
            }],
            [{
                name: "美国芝加哥",
                value: 2350
            }, {
                name: "北京"
            }],
            [{
                name: "加纳库马西",
                value: 5120
            }, {
                name: "北京"
            }],
            [{
                name: "英国曼彻斯特",
                value: 3110
            }, {
                name: "北京"
            }],
            [{
                name: "德国汉堡",
                value: 6280
            }, {
                name: "北京"
            }],
            [{
                name: "哈萨克斯坦阿拉木图",
                value: 7255
            }, {
                name: "北京"
            }],
            [{
                name: "墨西哥",
                value: 3590
            }, {
                name: "北京"
            }],
            [{
                name: "加拿大温哥华",
                value: 3590
            }, {
                name: "北京"
            }]
        ];
        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({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord],
                        value: dataItem[0].value
                    });
                }
            }
            return res;
        };

    var series = [];
    [
        ["北京", BJData]
    ].forEach(function (item, i) {
        series.push({
            type: 'map',
            roam: false,
            label: {
                show: !1,
                // normal: {
                //     show: true,
                //     textStyle: {
                //         color: '#1DE9B6'
                //     }
                // },
                // emphasis: {
                //     textStyle: {
                //         color: 'rgb(183,185,14)'
                //     }
                // }
            },
            tooltip: {
                show: !1
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgb(147, 235, 248)',
                    borderWidth: 0.1,
                    areaColor: {
                  x: 150,
                  y: 150,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#031d5f" // 0% 处的颜色
                    },
                    {
                      offset: 0.45,
                      color: "#00a1f6"
                    },
                    {
                      offset: 1,
                      color: "#00a2f7" // 50% 处的颜色
                    }
                  ],
                  global: true // 缺省为 false
                }
                    // areaColor: {
                    //     type: 'radial',
                    //     x: 0.5,
                    //     y: 0.5,
                    //     r: 0.8,
                    //     colorStops: [{
                    //         offset: 0,
                    //         // color: 'rgb(210,246,253)' // 0% 处的颜色
                    //         color: 'rgb(5,41,122)' // 0% 处的颜色
                    //     }, {
                    //         offset: 1,
                    //         color: 'rgb(5,41,122)'  // 100% 处的颜色
                    //     }],
                    //     globalCoord: true // 缺省为 false
                    // },
                },
                emphasis: {
                    label: {
                        // show: !1,
                        color: '#fff',
                    },
                    areaColor: 'rgb(46,229,206)',
                    //    shadowColor: 'rgb(12,25,50)',
                    borderWidth: 0.1
                }
            },
            zoom: 1.05,
            //     roam: false,
            map: 'world' //使用
            // data: this.difficultData //热力图数据   不同区域 不同的底色
        }, {
            name: item[2],
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 2 //图标大小
            },
            lineStyle: {
              normal: {
                color: "#fff",
                width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            label: {
                normal: {
                    show: false,
                    position: 'middle',
                    formatter: '{b}'
                }
            },
            data: convertData(item[1])
        }, {
            type: "effectScatter",
            coordinateSystem: "geo",
             showEffectOn: "render",
            zlevel: 1,
            rippleEffect: {
              period: 6,
              scale: 2.4,
              brushType: "stroke"
            },
            label: {
                normal: {
                    show: false,
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: "{b}", //圆环显示文字
                    textStyle: {
                        color: "rgb(214,206,143)"
                    }
                },

            },
            emphasis: {
                show: true,
                scale: !0,
                label: {
                    show: true,
                    backgroundColor: '#000',
                    padding: 2,
                    borderRadius: 2,
                    color: "#fff"
                }
            },
            symbol: "circle",
            // symbolSize: function (val) {
            //     return 4 + val[2] / 1000; //圆环大小
            // },
            itemStyle: {
                normal: {
                    show: false,
                    color: function (item, index) {
                        let color = colorList[item.dataIndex] || "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
                        return color
                    }
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[0].name,
                    value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            })
        },
            //被攻击点
            // {
            //      show: false,
            //     type: "scatter",
            //     coordinateSystem: "geo",
            //     zlevel: 2,
            //     rippleEffect: {
            //         period: 4,
            //         brushType: "stroke",
            //         scale: 1
            //     },
            //     label: {
            //         normal: {
            //             show: true,
            //             position: "right",
            //             color: "#9966cc",
            //             formatter: "{b}",
            //             textStyle: {
            //                 color: "#fff"
            //             }
            //         },
            //         emphasis: {
            //             show: true
            //         }
            //     },
            //     symbol: "pin",
            //     symbolSize: 30,
            //     itemStyle: {
            //         normal: {
            //             show: true,
            //             color: "#9966cc"
            //         }
            //     },
            //     data: [{
            //         name: item[0],
            //         value: geoCoordMap[item[0]].concat([10])
            //     }]
            // }
        );
    });
     option = {
        grid: {
            right: '8%',
            // top:'5%'
        },
        geo: {
            map: 'world',
            aspectScale: 0.75, //长宽比
            zoom: 1.05,
            tooltip: {
                show: !1
            },
            scaleLimit: {
                min: 1,
                max: 5,
            },
            label: {
                show: !1
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: '#09132c' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#274d68' // 100% 处的颜色
                        }],
                        globalCoord: true // 缺省为 false
                    },
                    shadowColor: 'rgb(106,203,243)',   // #022764
                    shadowOffsetX: -3, //阴影偏移量
                    shadowOffsetY: 6
                },
                emphasis: {
                    areaColor: '#2AB8FF',
                    borderWidth: 0,
                    color: '#fff',
                    label: {
                        show: false
                    }
                }
            },
        },
        // tooltip: {
        //     trigger: "item",
        // },
        zlevel: 999,
        series: [...series],
    }
    
    return option
}

        option = mapOptions()
        this.myChart.setOption(option,true);
       
      },
  }
};

世界地图json文件下载地址：

 

//files.cnblogs.com/files/h5it/world.json