在 Vue 中使用 Echart 加载自定义地图

开发需求中经常需要加载指定地市县区的地图轮廓，并在其上进行标注

• 先在 vue 中导入 Echart 组件，然后引用组件（4.x 和 5.x 引用不同，需要注意）

• 获取地图数据：http://datav.aliyun.com/portal/school/atlas/area_selector

  • 可以下载指定地市对应的 json 格式文件，保存到本地，然后加载
  • 也可以调用指定地市对应的 API（就是 URL），然后调用该 API 获取地图数据

• 在 vue 中调用 Echart 的 registerMap 方法注册自定义地图，然后进行渲染即可

效果：

代码：

• 文件 getBaojiMap.js

  import axios from 'axios'
  
  export function getBaojiMap () {
      // 返回从阿里dataV获取的地图数据（geoJson格式）
      return axios.get('https://geo.datav.aliyun.com/areas_v3/bound/610300_full.json')
  }
  
  export default { getBaojiMap }
  

• 文件 Baoji.vue

  <template>
      <div>
          <div>宝鸡地图</div>
          <!-- 设置地图容器大小及引用（vue中使用） -->
          <div class="map" ref="baojiRef"></div>
      </div>
  </template>
  <script>
  
  // 5.x要求的导入方式
  import * as echarts from 'echarts'
  // 导入地图文件(该地图陈仓区标记和金台区标记重合)
  // import { getBaojiMap } from '../api/getBaojiMap'
  // 导入本地json地图文件(陈仓区标记已经通过cp属性进行调整)
  import baojiGeoJson from '../assets/geoJson/baoji.json'
  
  export default {
      mounted () {
          let myChart = echarts.init(this.$refs.baojiRef)
          let options = {
              title: {
                  text: '宝鸡GDP统计图(/万元)'
              },
              tooltip: {},
              series: [
                  {
                      name: '宝鸡地图',
                      type: 'map',
                      map: '宝鸡', // 这里的名字要和注册中一致
                      label: {
                          show: true
                      },
                      data: [
                          { name: '渭滨区', value: 1309 },
                          { name: '金台区', value: 1105 },
                          { name: '陈仓区', value: 1004 },
                          { name: '凤翔区', value: 1351 },
                          { name: '扶风县', value: 1250 },
                          { name: '眉县', value: 1185 },
                          { name: '岐山县', value: 1142 },
                          { name: '太白县', value: 799 },
                          { name: '凤县', value: 968 },
                          { name: '陇县', value: 1035 },
                          { name: '麟游县', value: 942 },
                          { name: '千阳县', value: 893 },
                      ]
                  }
              ],
              visualMap: {
                  min: 7000,
                  max: 1500,
                  realtime: false,
                  calculable: true,
                  inRange: {
                      color: ['lightskyblue', 'yellow', 'orangered']
                  }
              },
          }
          // 初始化地图
          // this.initMapDataFromApi(myChart, options)
          this.initMapDataFromJsonFile(myChart, options)
      },
      methods: {
          // 加载本地json数据来初始化地图
          initMapDataFromJsonFile (myChart, options) {
              // 加载本地数据注册地图，并命名（options中的series.map的名字要与之一致）
              echarts.registerMap('宝鸡', baojiGeoJson)
              myChart.setOption(options)
          },
          // 调用远程API获取地图数据来初始化地图
          initMapDataFromApi (myChart, options) {
              // 显示加载动画
              myChart.showLoading()
              getBaojiMap().then(res => {
                  // 关闭加载动画
                  myChart.hideLoading()
                  // 注册地图，并命名（options中的series.map的名字要与之一致）
                  echarts.registerMap('宝鸡', res.data)
                  myChart.setOption(options)
              })
          },
      }
  }
  
  </script>
  
  <style>
  .map {
      width: 800px;
      height: 600px;
  }
  </style>