<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); // 窗口變化時調(diào)整圖表大小
}

initChart () {
  // 注冊山東省地圖
  this.$echarts.registerMap('shandong', this.mapData['山東省']);
  // 初始化 ECharts 實例
  this.chart = this.$echarts.init(this.$refs.chart);

  // 監(jiān)聽地圖點擊事件，點擊后進入下一級地圖
  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]); // 設置上一城市的數(shù)據(jù)
  }
}

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 + '人數(shù)：' + (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;
}