Vue3使用Echarts实现自定义地图

1.获取地图JSON文件

推荐使用 阿里云数据可视化平台

选择你想要使用地图区域并下载JSON文件

2.把地图JSON文件引入Vue3项目中

放在src/assets中

引入你想要使用地图的组件中

3.使用Echarts创建地图

准备地图容器

<template>
<div id="user_region">
</div>
</template>

Echarts代码如下

//创建用户地域分布
const createRegion = () => {
  let mapChartInstance = null;
  // 获取地图容器  
  let mapChart = document.getElementById("user_region");
  mapChartInstance = markRaw(
    echarts.init(mapChart, undefined, { devicePixelRatio: 2, renderer: "svg" })
  );
  // 注册地图
  echarts.registerMap("China", China); 
  mapChartInstance.setOption({
    title: {
      text: "用户地域分布",
      left: 10,
      top: 10,
      textStyle: {
        color: "#000",
        fontSize: 16,
      },
    },
    visualMap: {
      show: true,
      min: 0,
      max: 10000,
      type: "piecewise",
      right: 50,
      bottom: 20,
      inRange: {
        //控制颜色深浅
        opacity: 0.35, 
      },
      pieces: [
        // 自定义每一段的范围，以及每一段的文字
        { gte: 50, color: "#17459e" }, 
        { gte: 20, lte: 50, color: "#3886e1" },
        { gte: 10, lte: 20, color: "#73b3f3" },
        { gte: 1, lte: 10, color: "#c0ddf9" },
        { lte: 1, color: "#ebedf0" },
      ],
    },
    series: [
      {
        name: "中华人民共和国",
        type: "map",
        map: 'China',
        geoIndex: 0,
        //假数据
        data: [
          {
            name: "江苏省",
            value: 100,
          },
          {
            name: "北京市",
            value: 86,
          },
          {
            name: "上海市",
            value: 68,
          },
          {
            name: "重庆市",
            value: 123,
          },
          {
            name: "河北省",
            value: 34,
          },
          {
            name: "河南省",
            value: 32,
          },
          {
            name: "云南省",
            value: 160,
          },
          {
            name: "辽宁省",
            value: 43,
          },
          {
            name: "黑龙江省",
            value: 181,
          },
          {
            name: "湖南省",
            value: 24,
          },
          {
            name: "安徽省",
            value: 33,
          },
          {
            name: "山东省",
            value: 54,
          },
          {
            name: "新疆省",
            value: 118,
          },
          {
            name: "浙江省",
            value: 44,
          },
          {
            name: "江西省",
            value: 220,
          },
          {
            name: "湖北省",
            value: 21,
          },
          {
            name: "广西省",
            value: 30,
          },
          {
            name: "甘肃省",
            value: 12,
          },
          {
            name: "山西省",
            value: 32,
          },
          {
            name: "内蒙古省",
            value: 35,
          },
          {
            name: "陕西省",
            value: 25,
          },
          {
            name: "吉林省",
            value: 45,
          },
          {
            name: "福建省",
            value: 28,
          },
          {
            name: "贵州省",
            value: 18,
          },
          {
            name: "广东省",
            value: 37,
          },
          {
            name: "青海省",
            value: 62,
          },
          {
            name: "西藏省",
            value: 43,
          },
          {
            name: "四川省",
            value: 33,
          },
          {
            name: "宁夏省",
            value: 8,
          },
          {
            name: "海南省",
            value: 19,
          },
          {
            name: "台湾省",
            value: 190,
          },
          {
            name: "香港省",
            value: 11,
          },
          {
            name: "澳门省",
            value: 10,
          }, {
            name: "内蒙古自治区",
            value: 200
          }, {
            name: "天津市",
            value: 230,
          }, {
            name: "广西壮族自治区",
            value: 30,
          }, {
            name: "新疆维吾尔自治区",
            value: 100,
          }, {
            name: "宁夏回族自治区",
            value: 500,
          }, {
            name: "西藏自治区",
            value: 70
          }
        ],
        label: {
          show: true
        }
      },
    ],
    tooltip: {
      // 自定义弹窗
      // 鼠标引入省份,不断触发.params 对象.当前省份的信息.
      formatter: function (params) {
        //console.log(params);
        return params.seriesName + "<br>" + params.name + ":" + params.value + "人";
      },
    },
    geo: {
      // 使用地图
      map: "China", 
      label: {
        //显示地域标签  
        show: false, 
        //标签字体颜色  
        color: "#ffffff", 
      },
      layoutCenter: ["50%", "50%"],
      //地图尺寸
      layoutSize: "120%",
      // 缩放  
      aspectScale: 1,
      itemStyle: {
        //区域边框宽度  
        borderWidth: 0.5,
        //区域边框颜色  
        borderColor: "#d1d1d1", 
        //区域颜色  
        areaColor: "#eeeeee",
      },
      emphasis: {
        // 鼠标悬浮效果
        itemStyle: {
          borderWidth: 0.5,
          borderColor: "#33ddff",
          areaColor: "#26627f",
        },
        label: {
          //对应的鼠标悬浮效果
          show: true,
          color: "#ffffff",
        },
      },
    },
  });
};

然后把这个初始化地图的Echarts函数放onMounted周期中

效果图如下

注意事项：

1. 初始化代码需要在onMounted中执行
2. 地图容器必须有具体高度
3. series内的属性值必须和定义的地图名称相对应，包括data中的数据，否是不会显现出来你想要的数据的（举个栗子：假如模拟数据：data
   […{ name: “江苏” value : 100 }…] 而地图json文件中 城市名称 则是 江苏省
   这样数据value是不会显示出来的）
4. 如果想把地图变成响应式的话，需要在watch中监听修改后的数据，获取到最新的数据后，通过echarts中的setOption()方法，把最初的option数据添加进去，再把变了的数据也放进去，这样就可以实现响应式了，地图会随着数据的变化而进行变化。