echarts绘制中国地图，添加标记，点击省份展示市区地图_echart 点击省份 放大

 功能描述：页面初始化展示中国地图，并设置了三个省份的标记点，点击省份进入下一级市区地图，再次点击地图回到中国地图

一、安装echarts依赖

npm install echarts@4.9.0

注意：我使用的是4.9.0版本，因为绘制地图需要用到地图的数据，高版本的依赖包有的不包含地图所需的数据

 安装好依赖后查看 node_modules —> echarts —> map 文件夹下是否有 js 和 json 文件夹，绘制地图的数据就来源这里，准备好就可以正式开发啦

二、代码实现

<template>
  <div>
    <div ref="china_map" style="height: 450px;width: 100%"></div>
  </div>
</template>
 
<script setup name="" lang="ts">
import * as echarts from "echarts";
import 'echarts/map/js/china.js'; // 核心文件
// 省份数据
import 'echarts/map/js/province/taiwan.js';
import 'echarts/map/js/province/hebei.js';
import 'echarts/map/js/province/shanxi.js';
import 'echarts/map/js/province/liaoning.js';
import 'echarts/map/js/province/jilin.js';
import 'echarts/map/js/province/heilongjiang.js';
import 'echarts/map/js/province/jiangsu.js';
import 'echarts/map/js/province/zhejiang.js';
import 'echarts/map/js/province/anhui.js';
import 'echarts/map/js/province/fujian.js';
import 'echarts/map/js/province/jiangxi.js';
import 'echarts/map/js/province/shandong.js';
import 'echarts/map/js/province/henan.js';
import 'echarts/map/js/province/hubei.js';
import 'echarts/map/js/province/hunan.js';
import 'echarts/map/js/province/guangdong.js';
import 'echarts/map/js/province/hainan.js';
import 'echarts/map/js/province/sichuan.js';
import 'echarts/map/js/province/guizhou.js';
import 'echarts/map/js/province/yunnan.js';
import 'echarts/map/js/province/shanxi1.js';
import 'echarts/map/js/province/gansu.js';
import 'echarts/map/js/province/qinghai.js';
import 'echarts/map/js/province/xinjiang.js';
import 'echarts/map/js/province/guangxi.js';
import 'echarts/map/js/province/neimenggu.js';
import 'echarts/map/js/province/ningxia.js';
import 'echarts/map/js/province/xizang.js';
import 'echarts/map/js/province/beijing.js';
import 'echarts/map/js/province/tianjin.js';
import 'echarts/map/js/province/shanghai.js';
import 'echarts/map/js/province/chongqing.js';
import 'echarts/map/js/province/xianggang.js';
import 'echarts/map/js/province/aomen.js';
 
const china_map = ref();
 
const defalutPoint = ref([{
  "name": "北京",
  "value": 213
}, {
  "name": "福建",
  "value": 100
}, {
  "name": "贵州",
  "value": 50
}]);
const point = ref([{
  "name": "北京",
  "value": 213
}, {
  "name": "福建",
  "value": 100
}, {
  "name": "贵州",
  "value": 50
}]);
 
const data = reactive({
  geoCoordMap: {
    '北京': [116.405285,
      39.904985
    ],
    '福建': [119.306239,
      26.075230
    ],
    '贵州': [106.713478,
      26.578343
    ]
  },
  geoCoordMapDefault: {
    '北京': [116.405285,
      39.904985
    ],
    '福建': [119.306239,
      26.075230
    ],
    '贵州': [106.713478,
      26.578343
    ]
  },
  provinces: { //数据
    台湾: 'taiwan',
    河北: 'hebei',
    山西: 'shanxi',
    辽宁: 'liaoning',
    吉林: 'jilin',
    黑龙江: 'heilongjiang',
    江苏: 'jiangsu',
    浙江: 'zhejiang',
    安徽: 'anhui',
    福建: 'fujian',
    江西: 'jiangxi',
    山东: 'shandong',
    河南: 'henan',
    湖北: 'hubei',
    湖南: 'hunan',
    广东: 'guangdong',
    海南: 'hainan',
    四川: 'sichuan',
    贵州: 'guizhou',
    云南: 'yunnan',
    陕西: 'shanxi1',
    甘肃: 'gansu',
    青海: 'qinghai',
    新疆: 'xinjiang',
    广西: 'guangxi',
    内蒙古: 'neimenggu',
    宁夏: 'ningxia',
    西藏: 'xizang',
    北京: 'beijing',
    天津: 'tianjin',
    上海: 'shanghai',
    重庆: 'chongqing',
    香港: 'xianggang',
    澳门: 'aomen'
  }
});
 
const {
  geoCoordMap,
  geoCoordMapDefault,
  provinces
} = toRefs(data);
 
const isChina = ref(true); // 默认显示中国地图
const emit = defineEmits(['showChange']);
 
const convertData = () => {
  let res = [];
  for (let i = 0; i < point.value.length; i++) {
    let geoCoord = geoCoordMap.value[point.value[i].name];
    if (geoCoord) {
      res.push({
        name: point.value[i].name,
        value: geoCoord.concat(point.value[i].value)
      });
    }
  }
  return res;
};
 
 
// 中国地图点击省份 显示当前省份的详细的地区。
const chinaMapHidden = (map) => {
  map.off('click'); //这里解决多次触发点击事件
  map.on('click', async (params) => {
    if (params.name in provinces.value) {
      isChina.value = false;
      emit("showChange", isChina.value);
      if (params.name === "湖南") {
        // 示例效果暂时只有湖南可点击
        point.value = [{
          name: "长沙",
          value: 212
        }, {
          name: "永州",
          value: 52
        }];
        geoCoordMap.value = {
          '长沙': [113.08755, 28.25182],
          '永州': [111.61945, 26.42586]
        };
        console.log(params.name, '-----------provinces.value[params.name]')
        chinaMaprsult(params.name);
      }
    } else {
      isChina.value = true;
      emit("showChange", isChina.value);
      point.value = defalutPoint.value;
      geoCoordMap.value = geoCoordMapDefault.value;
      chinaMaprsult('china');
    }
  })
}
 
// 渲染地图
const chinaMaprsult = (name = null) => {
  let chinaMap = echarts.init(china_map?.value)
  const options = {
    title: {
      text: '',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.name + ' : ' + params.value[2] ? params.value[2] : "";
      }
    },
    visualMap: {
      // min: 0,
      // max: 300,
      // left: 20,
      // bottom: 20,
      // calculable: true,
      // text: ['高','低'],
      show: false,
      inRange: {
        color: ['rgb(70, 240, 252)',
          'rgb(250, 220, 46)',
          'rgb(54, 229, 255)'
        ]
      },
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: name ? name : "china", // 核心
      zoom: 1.2,
      // roam: 'scale', //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
      label: { // 页面初始化加载的文字
        normal: {
          show: true,
          textStyle: {
            color: "#ccc", // 页面初始化的地图文字颜色
            fontSize: 10 // // 页面初始化的地图文字大小
          },
        },
      },
      itemStyle: { //设置样式
        normal: {
          areaColor: 'rgba(48, 82, 153, 0.5)', // 区域的颜色
          borderColor: '#59e2f9' //边框颜色
        },
        emphasis: {
          areaColor: 'rgb(44, 165, 198, 0.9)' // 鼠标悬浮区域颜色
        }
      },
      emphasis: {
        label: {
          color: '#fff' // 鼠标悬浮文字颜色
        }
      }
    },
    series: [{
        type: "map",
        geoIndex: 0,
        itemStyle: { //地图区域的多边形 图形样式
          normal: { //是图形在默认状态下的样式
            label: {
              show: true, //是否显示标签
              textStyle: {
                color: "#fff"
              }
            }
          },
          zoom: 1.5, //地图缩放比例,默认为1
          emphasis: { //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
            label: {
              show: true
            }
          }
        },
        label: {
          normal: {
            show: true, //显示省份标签
            textStyle: {
              color: "#fff"
            }, //省份标签字体颜色
          },
          emphasis: {
            show: true,
            textStyle: {}
          }
        },
        data: [], // 地图数据
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        label: {
          lineHeight: 20,
          normal: {
            show: true,
            color: '#081727',
            position: 'inside',
            padding: [5, 0, 0, 0],
            verticalAlign: 'middle',
            formatter: function (para) {
              return '{name|' + para.data.value[2] + '}'
            },
            rich: {
              cnNum: {
                fontSize: 14,
                color: '#081727',
                lineHeight: 20,
              }
            }
          },
        },
        tooltip: {
          formatter: function (para) {
            return para.name + ": " + para.data.value[2]
          }
        },
        symbol: 'circle',
        symbolSize: [15, 15],
        data: convertData(),
      }
    ],
  }
  chinaMap.setOption(options)
  chinaMapHidden(chinaMap)
}
 
onMounted(() => {
  chinaMaprsult('china');
})
</script>
<style rel="stylesheet/scss" lang="scss" scoped></style>

 在引入省份数据时，我原本是想在点击的时候引入，点击哪个省份就引入哪个省份的数据，避免首次加载时全部引入而影响性能，代码如下

map.on('click', async (params) => {
    if (params.name in provinces.value) {
        //引入省份数据
        let provinceData = `echarts/map/js/province/${provinces.value[params.name]}.js`;        
        console.log(provinceData, '----------hh');
        let val = await import(provinceData);
        if(val) {
            
        }
    }
});

import方式引入一直报错，因为这个项目是vue3，所以也不能使用 require 引入。查了些资料有说import中不能使用变量，也有人使用字符串模板也就是上面这种写法成功引入的，但是我就是引入不了，最终放弃了。没办法，最后还是在头部全部引入了，如果有小伙伴知道怎么解决的，欢迎留言~

三、效果展示

 这世界很喧嚣，做你自己就好