vue2 使用echarts实现地图点击进入下一层级+点击空白处回退

约 1320 字大约 4 分钟

2025-08-01

基础知识

npm 安装 echarts4.9（全局引入不支持 5.0）

鼠标事件： echartsInstance.on
echarts.getMap()：getMap
监听“空白处”的事件：监听“空白处”的事件

运行效果

只做了河南的点击和后退

实现思路

引入地图并显示

// 1. 基于准备好的dom，初始化echarts实例
this.myChart = this.$echarts.init(this.$refs.myChart);
// 2. 引入要显示的地图 json 文件（json文件可以是echart自带的，也可以是自己下载的）
this.mapJson = require("echarts/map/json/china.json");
// 3. 注册可用的地图 registerMap("自定义的名字，要和option中map:''对应",注册的地图指向的json文件)
this.$echarts.registerMap("mapJson", this.mapJson);
// 4. 指定图表的配置项和数据
this.option = {
  geo: {
    type: "map",
    map: "mapJson", //这里的数据会变，"这里是引入的存储json文件的变量名"
    label: {
      normal: {
        color: "#000000",
        show: true, //显示省份名称
      },
    },
  },
  series: [
    {
      name: "在地图中显示散点图",
      type: "scatter",
      coordinateSystem: "geo", //设置坐标系为 geo
      data: [
        //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}]
      ],
    },
  ],
};
// 5. 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。
this.myChart.setOption(this.option);

设置显示区域

地图显示的是“中国”还是“省”还是“市区”，主要就是靠引入的 json 文件区分。

也就是 this.mapJson = require("echarts/map/json/china.json"); 的 mapJson
然后 this.$echarts.registerMap("mapJson", this.mapJson); 注册一下修改后的文件
this.myChart.setOption(this.option); 地图即可重新显示新的地区。

怎么确定 this.mapJson 引入的哪个文件

添加地图的监听事件后，可以获取一个 code 值，用这个 code 值判断应该引入哪个省市的文件。

点击空白处回退同理，只需要确定应该回退层级的 code 值，就可以由此判断应该回退到哪个层级页面了。

全部代码

<template>
  <div id="app">
    <div id="myChart" ref="myChart"></div>
    <el-button type="success" @click="cancelEchartsEvent"
      >点击取消on事件</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
      mapJson: null,
      option: {},
      curArea: {
        code: -1,
        name: "",
      },
    };
  },
  mounted() {
    this.initEchartParams();
    this.addMouseClick(); //开启 echarts 事件监听
  },
  beforeDestroy() {
    this.cancelEchartsEvent();
  },
  methods: {
    cancelEchartsEvent() {
      console.log("页面卸载前，取消 echarts 的事件监听");
      this.myChart.off("click");
    },
    initEchartParams() {
      // 1. 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs.myChart);
      // 2. 引入要显示的地图 json 文件（json文件可以是echart自带的，也可以是自己下载的）
      this.mapJson = require("echarts/map/json/china.json");
      // 3. 注册可用的地图 registerMap("自定义的名字，要和option中map:''对应",注册的地图指向的json文件)
      this.$echarts.registerMap("mapJson", this.mapJson);
      // 4. 指定图表的配置项和数据
      this.option = {
        geo: {
          type: "map",
          map: "mapJson", //这里的数据会变，"这里是引入的存储json文件的变量名"
          label: {
            normal: {
              color: "#000000",
              show: true, //显示省份名称
            },
          },
        },
        series: [
          {
            name: "在地图中显示散点图",
            type: "scatter",
            coordinateSystem: "geo", //设置坐标系为 geo
            data: [
              //这里放标注点的坐标[{name: "北京",value: [116.46, 39.92]}]
              { name: "郑州", value: [113.665412, 34.757975] },
              { name: "北京", value: [116.41995, 40.18994] },
              { name: "天津", value: [117.205126, 39.034933] },
              { name: "昆明", value: [102.81844, 24.906231] },
              { name: "广州", value: [113.26453, 23.155008] },
            ],
          },
        ],
      };
      // 5. 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。
      this.myChart.setOption(this.option);
    },
    addMouseClick() {
      this.addClickInMap();
      this.addClickInBlank();
    },
    // 点击了地图非空白处
    addClickInMap() {
      // echarts.getMap 获取已注册的地图
      const maps = this.$echarts.getMap("mapJson").geoJson.features;
      console.log({ maps });

      this.myChart.on("click", (res) => {
        let clickArea = maps.find((map) => map.properties.name == res.name);
        // console.log({ clickArea });

        if (!clickArea) {
          // 如果点的不是地图，而是地图上的散点，什么也不做
          return;
        }
        this.curArea.code = clickArea.id;
        this.curArea.name = res.name;
        console.log(
          "当前点击的是: " +
            this.curArea.name +
            " this.curArea.code：" +
            this.curArea.code
        );

        // 修改 mapJson 的数值
        this.configGeoMap(this.curArea.code);
      });
    },
    // 点击了地图空白处
    addClickInBlank() {
      this.myChart.getZr().on("click", (event) => {
        // !event.target 不存在 证明点击的地方是地图空白处
        if (!event.target) {
          let preCode = -1;
          const curAreaCode = this.curArea.code;
          console.log("回退前地区code ", curAreaCode);

          if (curAreaCode == "100000") {
            //当前在中国，不回退
            console.log("当前地图已经是 china， 不可回退！");
            return;
          } else if (curAreaCode % 10000 == 0) {
            //说明当前在省，回退到 china
            preCode = 100000;
          } else if (curAreaCode % 100 == 0) {
            ////说明当前在 郑州市，回退到 河南省
            preCode = curAreaCode - (curAreaCode % 10000);
          } else {
            preCode = curAreaCode - (curAreaCode % 100); //回退到city
          }
          // 回退后，当前显示地图的code就是preCode
          this.curArea.code = preCode;
          console.log("点击了空白处，回退后地区 code:" + preCode);

          this.configGeoMap(preCode);
        }
      });
    },
    // 修改 mapJson 的数值
    configGeoMap(code) {
      // 这里要根据code值找到对应的json文件，如果是从服务器获取，也是找到对应的json文件即可
      // 这里我用的是 用npm安装echarts@4.9.0 时自动下载的文件
      if (code == "100000") {
        this.mapJson = require("echarts/map/json/china.json");
      } else if (code == "410000") {
        this.mapJson = require("echarts/map/json/province/henan.json");
      } else {
        console.log("除了河南外，其它地区暂时不能跳转");
      }

      this.$echarts.registerMap("mapJson", this.mapJson);
      this.myChart.setOption(this.option);
    },
  },
};
</script>
<style scoped>
#myChart {
  width: 100%;
  height: 500px;
  background-color: #f1f3f4;
}

button {
  margin: 20px;
}
</style>