1.下载 echarts 和echarts-gl echarts-gl是3d插件
2.去阿里云上下载吉林省的地图信息（看实际需求下载各省地图数据）
· https://datav.aliyun.com/portal/school/atlas/area_selector
3.组件代码如下

<template>
  <div class="map-info">
    <!-- :style="styleProp"  -->
    <div id="mapTu" class="map-tu" />
  </div>
</template>

<script>
import jilinProvince from '@/assets/get/jilinProvince.json'
import 'echarts-gl'

export default {
  name: 'MapInfo',
  components: {},
  props: {
    overViewPage: { // 总览页面
      type: String,
      default: 'potentialUserMining' // 默认是潜力用户挖掘页面
    },
    mapUrl: { // 地图中点击跳转的路径，默认跳转综合能源页面
      type: String,
      default: '/comprehensiveEnergyEfficiency'
    },
    type: { // 能源类型,地图上方tab栏对应的标识
      type: String,
      default: '01'
    },
    mapData: {
      type: Array,
      default() {
        return []
      }
    },
    // 地图的高度
    styleProp: {
      type: Object,
      default() {
        return {
          height: '100%'
        }
      }
    },
    // 地图盒子宽度
    boxWidth: {
      type: Number,
      default: 150
    }

  },

  data() {
    return {
      bg: require('@/assets/img/map2.png'),
      minHeight: 3,
      transData: {} // 点击事件传值
    }
  },

  computed: {},
  watch: {
    mapData: {
      deep: true,
      handler(val) {
        this.$nextTick(() => {
          // console.log('..mapData....mapData0...', val)
          this.mapData = val
          this.minHeight = Math.min.apply(Math, this.mapData.map(function(o) { return o.value })) * 2
          if (val) {
            this.drawChinaMap(val)
          }
        })
      }
    }

  },
  mounted() {
    this.drawChinaMap(this.mapData)
  },

  methods: {
    commonRouter(dataTrans) {
      if (this.type === '01') {
        this.$router.push({ path: '/comprehensiveEnergyEfficiency', query: { dataTrans }})
      } else if (this.type === '02') {
        this.$router.push({ path: '/energyTrading', query: { dataTrans }})
      } else if (this.type === '03') {
        this.$router.push({ path: '/cleanEnergy', query: { dataTrans }})
      } else if (this.type === '04') {
        this.$router.push({ path: '/emergingEnergyConsumption', query: { dataTrans }})
      } else if (this.type === '05') {
        this.$router.push({ path: '/smartBuilding', query: { dataTrans }})
      } else if (this.type === '06') {
        this.$router.push({ path: '/multiEnergySupply', query: { dataTrans }})
      }
      window.sessionStorage.setItem('type', this.type)
    },
    drawChinaMap(mapData) {
      const nameGeoCoordMap = { // 数据默认中心点，可调整，然后柱子会变动
        长春市: [125.7245, 44.126841],
        吉林市: [126.55302, 43.943577],
        四平市: [123.970785, 43.540344],
        辽源市: [125.485349, 42.702692],
        通化市: [125.836501, 42.221177],
        白山市: [127.327839, 41.942505],
        松原市: [124.823608, 44.818243],
        白城市: [123.241114, 45.219026],
        延边市: [129.513228, 43.104823]
      }
      const convertData = (data) => { // 柱子的数据，是个数组，多个对象都以name,value状态展示
        const res = []
        for (var i = 0; i < data.length; i++) {
          const geoCoord = nameGeoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      const convertData_ = convertData(mapData)
      this.$echarts.registerMap('吉林', jilinProvince)
      const option = {
        tooltip: {
          show: false
        },
        geo3D: {
          name: '吉林',
          // selectedMode: 'single', // 地图高亮单选
          boxDepth: 68, // 地图倾斜度
          regionHeight: 5, // 地图高度
          map: '吉林',
          boxWidth: this.boxWidth,
          boxHeight: 2, // 4:没有bar. 30:有bar,bar最高度30，按比例分配高度
          viewControl: {
            rotateSensitivity: 0, // 禁止旋转
            zoomSensitivity: 0, // 禁止缩放
            pansensitivity: 0
          },
          top: '0%',
          right: '0%', // 整个地图的偏移量
          left: '-10%',
          bottom: '-20%',
          // environment: 'transparent', // 最外层背景
          shading: 'realistic', // 真实渲染引擎 有光照效果
          // 材质贴图 配置
          realisticMaterial: {
            detailTexture: this.bg
            // detailTexture: 'assets/img/map2.png'
            // metalness: 1,
            // roughness: 1
          },
          itemStyle: {
            // backgroundImage: "url('../../../../assets/img/map2.png')",
            color: 'rgb(16,116,149)', // 地图颜色
            // color: '#035086', // 深色
            // color: 'transparent',
            borderWidth: 1.5, // 分界线wdith
            borderColor: '#4F8AC9'

          },
          label: {
            show: true,
            distance: 30,
            position: 'left',
            textStyle: {
              fontSize: 13,
              color: '#fff',
              backgroundColor: 'transparent'
            }
          },

          postEffect: {
            enable: true,
            bloom: {
              enable: false
            },
            SSAO: {
              radius: 1,
              intensity: 1,
              enable: true
            },
            depthOfField: {
              enable: false,
              focalRange: 10,
              blurRadius: 10,
              fstop: 1
            }
          },
          temporalSuperSampling: {
            enable: true
          },
          emphasis: { // 鼠标移入
            label: {
              show: true, // 是否显示高亮
              //     distance: 0,
              textStyle: {
                color: '#fff', // 高亮文字颜色
                distance: 0,
                fontSize: 13
              },
              formatter: (params) => {
                if (mapData.length > 0) {
                  mapData.map(item => {
                    if (item.name === params.name) {
                      this.transData.orgNo = item.orgNo
                      this.transData.name = item.name
                      this.transData.value = item.value
                    }
                  })
                }
                const name = params.name
                return `${name}`
              }
            },
            itemStyle: {
              color: '#2B91B7', // 地图高亮颜色
              padding: 8
            }
          }
          // 单独设置某些处颜色
          // regions: this.regionsData
        },
        series: [
          {
            name: 'bar3D',
            type: 'bar3D',
            coordinateSystem: 'geo3D',
            barSize: 3, // 柱子粗细
            shading: 'lambert',
            opacity: 1,
            bevelSize: 0.7, // 方形柱向圆柱转化
            minHeight: this.minHeight,
            itemStyle: {
              color: 'rgba(202, 227, 72, 0.8)'

            },
            label: {
              show: true,
              formatter: (params) => { // 对应的数值
                return params.data.value[2]
              },
              distance: 0, // 标签距离图形的距离
              textStyle: {
                fontSize: 16,
                backgroundColor: 'transparent',
                color: '#00E4FF'
                // color: 'red'
              }
            },
            data: convertData_
          }
        ]
      }
      const myChart = this.$echarts.init(document.getElementById('mapTu'))
      myChart.setOption(option)
      myChart.on('georoam', (e) => {
        console.log(e)
      })

      myChart.getZr().on('click', (e) => {
        console.log('地图点击事件-能源类型-111---', typeof this.type)
        // this.commonRouter(this.transData)
        if (this.overViewPage !== '') {
          this.$router.push({ path: this.mapUrl, query: { dataTrans: this.transData }})
          this.$store.commit('mapInfo/SET_TYPE', this.type) // 将type数据存至vuex中,模块化开发方法前要写上模块名mapInfo/SET_TYPE
        }
      })
      // 地图有区域值的点击事件
      myChart.on('click', (e) => {
        if (this.overViewPage !== '') {
          this.$router.push({ path: this.mapUrl, query: { dataTrans: this.transData }})
          this.$store.commit('mapInfo/SET_TYPE', this.type) // 将type数据存至vuex中
        }
      })
    }
  }

}
</script>

<style lang='less' scoped>
.map-info{
  width: 100%;
  height: 100%;
  color: #fff !important;
  .map-tu{
    width:100%;
    height: 100%;
  }
}
</style>

4.组件使用如下

<mapInfo :box-width="100" over-view-page="potentialUserMining" :map-url="mapUrl" :map-data="dataMap" :type="energyType" />
//  dataMap: [ // 地图数据模拟数据
        // {
        //   name: '长春市',
        //   value: 0
        // },
        // {
        //   name: '吉林市',
        //   value: 10
        // },
        // { name: '通化市',
        //   value: 0 },
        // { name: '白山市',
        //   value: 0 },
        // { name: '白城市',
        //   value: 0 },
        // {
        //   name: '松原市',
        //   value: 0
        // },
        // { name: '四平市',
        //   value: 0 },
        // { name: '辽源市',
        //   value: 0 },
        // { name: '延边市',
        //   value: 0 }
      ]

5，效果图如下