基于Vue+ECharts实现地图展示与交互

<template>
  <div class="map_style">
    <!-- 返回按钮，只有在有历史记录时显示 -->
    <Button
      type="primary"
      @click="goBack"
      class="go_back_index"
      v-if="mapStack.length > 1"
    >返回</Button>

    <!-- 地图容器 -->
    <div
      ref="chart"
      style="height: 100%; width: 100%"
      class="chart-container"
    ></div>
  </div>
</template>

mounted () {
  this.$nextTick(() => {
    this.initChart();
  })
  window.addEventListener('resize', this.handleResize); // 窗口变化时调整图表大小
}

initChart () {
  // 注册山东省地图
  this.$echarts.registerMap('shandong', this.mapData['山东省']);
  // 初始化 ECharts 实例
  this.chart = this.$echarts.init(this.$refs.chart);

  // 监听地图点击事件，点击后进入下一级地图
  this.chart.on('click', ({ name }) => {
    if (this.mapData[name] && name !== this.currentCity) {
      // 进入下一级地图
      this.mapStack.push(name);
      this.setMapData(name);
    }
  });

  // 设置地图选项
  this.setMapData(this.currentCity);
}

mapData: {
  '山东省': require('./shangdong.json'),
  '青岛市': require('../json/青岛市.json'),
  '济南市': require('../json/济南市.json'),
  ...
}

goBack () {
  if (this.mapStack.length > 1) {
    this.mapStack.pop(); // 弹出当前城市
    this.setMapData(this.mapStack[this.mapStack.length - 1]); // 设置上一城市的数据
  }
}

tooltipFormatter (params) {
  const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#284979;"></span>`;
  const cityName = `<h3>${(params.data && params.data.name) || params.name || '暂无单位'}</h3>`;
  const totalUser = marker + '人数：' + (params.data && params.data.totalUser || 0) + '<br />';
  const score = marker + '平均积分：' + (params.data && params.data.score || 0) + '<br />';
  const duration = marker + '平均时长：' + (params.data && params.data.duration || 0);
  return cityName + totalUser + score + duration ;
}

.map_style {
  position: relative;
  height: 100%;
  width: 100%;
}

.go_back_index {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index:999;
}

.chart-container {
  border-radius: 10px;
  overflow: hidden;
}