每个人都可以，
拥有SSL证书

要在Vue2项目里放一张可交互的世界地图，ECharts还是很方便的，geo组件直接支持，但要跑通整个流程，有几个地方第一次弄容易卡住。我把当时封装的组件贴一下，顺带提几个配置上需要注意的点。

先把依赖装上：

npm install echarts --save

地图数据ECharts不会自带，得自己去GitHub仓库把world.js拉下来，放到src/assets/maps/下面，路径后面引入的时候别写错，不然注册地图那一步就直接报错了。

组件代码大概是这样，直接给了：

<template>
  <div ref="worldMap" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import world from '@/assets/maps/world.js'; // 路径根据实际放的位置改

export default {
  name: 'WorldMap',
  mounted() {
    this.initWorldMap();
  },
  methods: {
    initWorldMap() {
      // 必须先注册地图，不然geo里指定map: 'world'会无效
      echarts.registerMap('world', world);

      const worldMap = echarts.init(this.$refs.worldMap);

      const option = {
        geo: {
          map: 'world',
          roam: true, // 开了之后可以鼠标缩放和平移
          label: {
            emphasis: {
              show: true // 鼠标移上去才显示国家名
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo', // 散点图的坐标系用geo
          data: [
            { name: 'China', value: [104.195397, 35.86166] },
            { name: 'USA', value: [-95.712891, 37.09024] }
            // 按需要加其他坐标
          ],
          symbolSize: 10,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#ddb926'
            }
          }
        }]
      };

      worldMap.setOption(option);
    }
  }
};
</script>

注册地图这一步echarts.registerMap('world', world)一定要放在setOption之前，这没什么好说的，但是如果在多个地方用到同一个地图，只注册一次就行，重复注册倒也不会报错。

geo.roam开起来之后，地图就能拖拽和缩放，网页上展示的时候会灵活很多，否则就是一张静态图。散点图配coordinateSystem: 'geo'，然后data里每个点给经纬度数组，ECharts就会自己对应到位置上，标记的颜色、大小都可以按需求调。

在别的地方用这个组件，直接引入注册就行：

<template>
  <div>
    <WorldMap />
  </div>
</template>

<script>
import WorldMap from '@/components/WorldMap.vue';

export default {
  components: {
    WorldMap
  }
};
</script>

几个容易漏掉的点：

• world.js文件路径一定要对，可以自己检查下那个文件是不是导出了一个地图数据对象，有时候下载下来的格式可能不对，引入就会是空对象，注册的时候ECharts不会明显报错，但地图一片空白。
• 如果不用散点图，只想展示纯地图，把series那一整块删掉就行。
• 地图颜色、边框色都在itemStyle里改，hover上去的颜色在emphasis里，不要搞混。
• 想要更多交互或者加tooltip之类的，直接翻ECharts官方文档，geo和scatter的配置项都挺全的。