echarts实现单个省地图 例:内蒙古

由于项目下载的echarts版本是5.4.0, 所以下载的是内蒙古的json包
json下载地址

选中你要下载的区域，如：

需要注意的点：

// mounted内使用
 echarts.registerMap('nei', neiJson)
 ”nei“是自定义的，和option内的地图设置的map对应上

废话不多说，直接上代码

<template>
  <div class="map" id="map"></div>
</template>
<script setup>
import { onMounted, reactive, ref, defineExpose, watch } from 'vue'
import * as echarts from 'echarts'
import neiJson from '@/assets/json/nei.json'

// import 'echarts/map/js/china.js'
let myChart = ''
const option = ref({
  backgroundColor: '#020933',
  title: {
    top: 20,
    text: '内蒙古自治区',
    subtext: '',
    x: 'center',
    textStyle: {
      color: '#ccc',
    },
  },
  visualMap: {
    min: 0,
    max: 1000000,
    right: 100,
    seriesIndex: 1,
    type: 'piecewise',
    bottom: 100,
    textStyle: {
      color: '#FFFF',
    },
    // splitList: [
    //   {
    //     gt: 50000,
    //     color: '#F5222D',
    //     label: '困难人数大于5万人',
    //   }, //大于5万人
    //   {
    //     gte: 30000,
    //     lte: 50000,
    //     color: '#FA541C ',
    //     label: '困难人数3-5万人',
    //   }, //3-5万人
    //   {
    //     gte: 10000,
    //     lte: 30000,
    //     color: '#FA8C16',
    //     label: '困难人数1-3万人',
    //   }, //1-3万人
    //   {
    //     lte: 10000,
    //     color: '#fbe1d6',
    //     label: '困难人数小于1万人',
    //   },
    // ],
  },
  geo: {
    map: 'nei', //地图为刚刚设置的China
    aspectScale: 0.75, //长宽比
    zoom: 1.1,
    roam: false,
    itemStyle: {
      normal: {
        areaColor: '#013C62',
        shadowColor: '#182f68',
        shadowOffsetX: 0,
        shadowOffsetY: 25,
      },
      emphasis: {
        areaColor: '#2AB8FF',
        borderWidth: 0,
        color: 'green',
        label: {
          show: false,
        },
      },
    },
  },
  series: [
    {
      type: 'map',
      roam: true,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#fff',
          },
        },
        emphasis: {
          textStyle: {
            color: '#fff',
          },
        },
      },
      itemStyle: {
        normal: {
          borderColor: '#2ab8ff',
          borderWidth: 1.5,
          areaColor: '#12235c',
        },
        emphasis: {
          areaColor: '#2AB8FF',
          borderWidth: 0,
          color: 'green',
        },
      },
      zoom: 1.1,
      roam: false,
      map: 'nei', //使用中国地图
      // data: this.difficultData //热力图数据   不同区域 不同的底色
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      showEffectOn: 'render',
      rippleEffect: {
        period: 15,
        scale: 4,
        brushType: 'fill',
      },
      hoverAnimation: true,
      itemStyle: {
        normal: {
          color: '#ffff',
          shadowBlur: 10,
          shadowColor: '#333',
        },
      },
      data: [
        {
          name: '呼和浩特市',
          value: [111.670801, 40.818311],
        },
        {
          name: '包头市',
          value: [109.840405, 40.658168],
        },
        {
          name: '乌海市',
          value: [106.825563, 39.673734],
        },
        {
          name: '赤峰市',
          value: [118.956806, 42.275317],
        },
        {
          name: '通辽市',
          value: [122.263119, 43.617429],
        },
        {
          name: '鄂尔多斯市',
          value: [109.99029, 39.817179],
        },
        {
          name: '呼伦贝尔市',
          value: [119.758168, 49.215333],
        },
        {
          name: '锡林郭勒盟',
          value: [116.090996, 43.944018],
        },
        {
          name: '阿拉善盟',
          value: [105.706422, 38.844814],
        },
      ],
    },
  ],
})
onMounted(() => {
  echarts.registerMap('nei', neiJson)
  mapInit()
})
const mapInit = () => {
  myChart = echarts.init(document.getElementById('map'))
  myChart.clear()
  myChart.setOption(option.value)
}
</script>
<style scoped>
.map {
  /* 父级盒子已经设置宽高 */
  width: 100%;
  height: 100%;
}
</style>