效果如下

1.下载:npm install echarts --save

2，引入世界地图 在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 )

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

import '../node_modules/echarts/map/js/world.js' // 引入世界地图

3.使用

<template>
  <div class='wrapper'>
    <div class='chart' id='chart'></div>
  </div>
</template>

<script>
import { mapoption, pieMore } from "@/assets/js/tools.js";
export default {
  data () {
    return {}
  },
  mounted () {
    let chart = this.$echarts.init(document.getElementById('chart'))
    let map = mapoption();
    map.setOption(chart);
  },
}
</script>

tool.js 可以把要显示的国家通过参数传递，这里我写的固定值

import echarts from "echarts";
function mapoption() {
  var geoCoordMap = [
    { name: "芬兰", value: [24.909912, 60.169095], symbolSize: 8 },
    { name: "德国", value: [13.402393, 52.518569], symbolSize: 8 },
    { name: "英国", value: [-0.126608, 51.208425], symbolSize: 8 },
    { name: "韩国", value: [126.979208, 37.53875], symbolSize: 8 },
    { name: "日本", value: [139.710164, 35.706962], symbolSize: 8 },
  ]
  var data = [
    { name: "澳大利亚", value: [135.193845, -25.304039], symbolSize: 8 },
    { name: "美国", value: [-100.696295, 33.679979], symbolSize: 8 },
  ]
  let option = {
    legend: {
      top: 0,
      left: 130,
      data: ['已注册国家', {
        name: '可注册国家', textStyle: {
          normal: {
            color: '#fff',
            borderColor: '#18849C',
            borderWidth: 1,
          }

        }
      }],
      // orient: 'vertical',
      // itemWidth: 40,
      // itemHeight: 18,
      icon: "circle",
    },
    geo: {
      map: 'world',       // 与引用进来的地图js名字一致
      roam: false,        // 禁止缩放平移
      label: {
        normal: {         // 默认的文本标签显示样式
          show: false,
        },
        emphasis: {
          show: false
        }
      },
      itemStyle: {        // 每个区域的样式 
        opacity: 0.6,
        normal: {
          borderColor: '#bbb',//区域边框颜色
          areaColor: '#F6F6F6'
        },
        emphasis: {
          show: false,
          areaColor: '#F6F6F6'
        },
      },
    },
    series: [
      {
        name: '已注册国家',
        type: 'scatter',
        coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系
        zlevel: 3,
        rippleEffect: {
          brushType: 'fill'        // 波纹绘制效果
        },
        label: {
          normal: {                  // 默认的文本标签显示样式
            color: '#000',
            show: true,
            position: 'top',      // 标签显示的位置
            formatter: '{b}'       // 标签内容格式器
          },

        },
        itemStyle: {
          normal: {
            color: '#18849C'
          }
        },
        data: geoCoordMap

      },
      {
        name: '可注册国家',
        type: 'scatter',
        coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系
        zlevel: 3,
        rippleEffect: {
          brushType: 'fill'        // 波纹绘制效果
        },
        label: {
          normal: {                  // 默认的文本标签显示样式
            show: true,
            color: '#000',
            position: 'top',      // 标签显示的位置
            formatter: '{b}'       // 标签内容格式器
          },

        },
        itemStyle: {
          normal: {
            color: '#fff',
            borderColor: '#18849C',
            borderWidth: 1,
          }
        },
        data: data

      }
    ],
    textStyle: {
      fontSize: 12
    }
  }
  return option
}
export {
  mapoption
}