前言

echarts有地图，但是echarts的地图只支持到三级（省市区），所以有的时候，我们就需要自己定制化地图

准备

我们绘制地图前，我们需要地图的点位置，这些有几种方式
1、我们进入http://geojson.io自己绘制，手残党不建议自己绘制

2、直接购买
网上有很多可以购买的
2.1、水经注软件购买下载，如果需要的地图绘制很多的话，建议此方法
2.2、腾绘空间，他们家可以选择性购买，已长岭县举例子，才花费30不到

转换成geo.json

我们拿到的是其实是不是json格式，echatrs也支持shp等格式，但是对于前端来说来说，并不合适，并且不太方便操作。比如有某些地方我们需要合并，或者切割，我们就可以选择使用mapshaper来操作我们的地图

合并地图

因为我们购买的地图太详细，而我们不需要那么详细，因此需要合并地图,我们把需要合并的区间，在neme后面加上area字段，并定义即可，相同的区间的area字段相同

此时只需要运行以下代码，就发现我们的地图已经合并了

dissolve "area" -o changling.json

我们重新导出json，并把json里面的area改成name即可。

开始绘制地图

<template>
  <div>
  <div id="myMap" ref="myMap" class="border"></div>

  </div>
</template>

<script>
import echarts from 'echarts'
import changling from './changling.json'
export default {
  data () {
    return {
    }
  },
  mounted () {
    let myChart = echarts.init(document.getElementById('myMap'))
    echarts.registerMap('长岭县', changling, {}) //这个是关键，之前拿到的长岭县的各乡镇数据 
    let option = {
      title: {
        text: '',
        x: 'center'
      },
      //提示框
      tooltip: {
        trigger: 'item',
        formatter: function(data) {
          return data.data.name
        }
      },
      visualMap: {
        show: false,
        left: 'right',
        min: 10,
        max: 220,
        inRange: {
          color: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
        },
        text: ['High', 'Low'],
        calculable: false
      },
      series: [
        {
          name: '长岭县行政区划图',
          type: 'map',
          mapType: '长岭县', // 自定义扩展图表类型，此处需要和registerMap定义的参数一直
          label: {
            show: true
          },
          zoom:1.2,
          itemStyle: {
            normal: {
              borderColor: '#0AAEB0', // 图形的描边颜色 #0AAEB0
              borderWidth: 1, // 描边线宽。
              borderType: 'solid', // 柱条的描边类型。
              areaColor: '#233F53', // 图形的颜色 #233F53
              shadowBlur: 5, // 图形阴影的模糊大小。
              shadowColor: '#233F53', // 阴影色 #233F53
              shadowOffsetX: 5, // X轴阴影
              shadowOffsetY: 5, // Y轴阴影
              label: {
                show: true, // 显示区域名称
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
              }
            },
            // 鼠标移入时
            emphasis: {
              borderColor: '#2378f7',  // 图形的描边颜色 #2378f7
              borderWidth: '1',
              label: {
                show: false,
                textStyle: {
                  color: '#1a5cd7',
                  fontSize: 14,
                }
              }
            },
            effect: {
              show: true,
              shadowBlur: 10,
              loop: true,
            }
          },
          data: [
			// 长岭镇，太平川镇，巨宝山镇，太平山镇，前七号镇，新安镇，三青山镇，大兴镇，北正镇，流水镇，永久镇，利发盛镇，集体乡，光明乡，三县堡乡， 海青乡， 前进乡，东岭乡 ，腰坨子乡， 八十八乡，三团乡，三十号乡
            { name: '三十号乡' ,value:10 },
            { name: '北正镇' ,value:20 },
            { name: '三团乡' ,value:30 },
            { name: '八十八乡' ,value:40 },
            { name: '大兴镇' ,value:50 },
            { name: '前七号镇' ,value:60 },
            { name: '长岭镇' ,value:70 },
            { name: '新安镇' ,value:80 },
            { name: '腰坨子乡' ,value:90 },
            { name: '东岭乡' ,value:100 },
            { name: '海青乡' ,value:110 },
            { name: '利发盛镇' ,value:120 },
            { name: '太平山镇' ,value:130 },
            { name: '流水镇' ,value:140 },
            { name: '集体乡' ,value:150 },
            { name: '光明乡' ,value:160 },
            { name: '巨宝山镇' ,value:170 },
            { name: '永久镇' ,value:180 },
            { name: '太平川镇' ,value:190 },
            { name: '三县堡乡' ,value:200 },
            { name: '前进乡' ,value:210 },
            { name: '三青山镇' ,value:220}
          ],
          nameMap: {
            长岭镇:'长岭镇',
            太平川镇:'太平川镇',
            巨宝山镇:'巨宝山镇',
            太平山镇:'太平山镇',
            前七号镇:'前七号镇',
            新安镇:'新安镇',
            三青山镇:'三青山镇',
            大兴镇:'大兴镇',
            北正镇:'北正镇',
            流水镇:'流水镇',
            永久镇:'永久镇',
            利发盛镇:'利发盛镇',
            集体乡:'集体乡',  
            光明乡:'光明乡',
            三县堡乡:'三县堡乡',
            海青乡:'海青乡',
            前进乡:'前进乡',
            东岭乡 :'东岭乡',
            腰坨子乡:'腰坨子乡',
            八十八乡:'八十八乡',
            三团乡:'三团乡',
            三十号乡:'三十号乡'
          }
        }
      ]
    }
    myChart.setOption(option)//绘制地图
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.border{
  width: 1000px;
  height: 330px;
}
</style>

效果