持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

数据准备

大家好，我是小躺啦，很多时候还是躺平点好！最近工作中需要开发一个中国地图，本来想着也挺简单的，不过还是碰到了几个小坑，接下来文章中也会指出来，避免大家再次入坑。项目中利用的是[echarts](Apache ECharts)+[vue](Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org))去生成的中国地图，echarts相信大家都不陌生，对于一些简单的图表，如：折线图，饼状图等。我们根据官方实例去创建就行，先获取容器，再写配置，最后init生成就好。但对于地图，除了以上步骤外，我们还需要引入地图json数据文件。如果我们想要得到中国地图，那么首先就要找到中国的json文件，可以在阿里云的[地理小工具](DataV.GeoAtlas地理小工具系列 (aliyun.com))获取。这里需要注意的是获取的json文件最好是最新的，旧数据甲方爸爸可能会不满意。

生成地图

准备好之后接下来我们就可以生成地图了，正如上节所说，首先写个容器：

 <div class="china-map">
    <div id="china" style="width:200px;height:300px"></div>
 </div>

接下来写我们的配置项，这里我们就用最简单的实例，具体的样式可以根据官方案例去配。

computed: {
    option() {
      // const series = this.getSeries()
      return {
        tooltip: {
          trigger: 'item'
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true // 是否开启鼠标缩放和平移漫游
        }
      }
    }
  }

注意：案例是放到了computed里面，也可以直接赋值。 最后，获取dom元素，引入echarts,利用echarts.init()获取实例，通过实例的setOption()去显示地图

 this.chart = echarts.init(document.getElementById("china"))
 this.chart.setOption(this.option)

到了这一步地图还是没有显示出来，为什么呢？还有一样东西还没用，对！获取到的json数据怎么用呢。这里也是一个重要的点，地图图表需要注册一下地图的名称。这也是地图与普通图表的一大区别。所以在创建实例前，我们要通过registerMap方法注册地图名称。

echarts.registerMap('china', require('@/assets/geo.china.min.json'))

打开浏览器，我们就能得到中国地图

总结

到此，渲染出来了中国地图，感兴趣可以根据官方的配置手册将这个地图变得高大上。在创建地图时，我们需要注意一下几点：

json数据要获取最新的数据
创建前要先注册地图名称

利用echarts生成一个中国地图

数据准备

生成地图

总结