快捷導(dǎo)航

基于Vue+ECharts實現(xiàn)地圖展示與交互

更新時間：2025年02月07日 09:55:11 作者：Z小明

這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實現(xiàn)一個互動式的地圖展示組件,其中支持返回上一層地圖、點擊查看不同城市的詳細信息,以及根據(jù)數(shù)據(jù)動態(tài)展示不同的統(tǒng)計信息,感興趣的小伙伴跟著小編一起來看看吧

1. 項目結(jié)構(gòu)與組件基本框架

首先，定義了一個 Vue 組件 MapComponent，它將負責(zé)渲染地圖、處理用戶交互，并展示傳遞給它的數(shù)據(jù)。

<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>

在模板中，主要有兩個部分：

返回按鈕： 當(dāng) mapStack 中有多個歷史記錄時，返回按鈕會顯示，用于返回上一層地圖。
地圖容器： 這是 ECharts 渲染地圖的地方，通過 ref="chart" 獲取容器 DOM。

2. ECharts 的基本配置與地圖初始化

在 mounted 生命周期鉤子中，初始化了 ECharts 圖表并注冊了地圖數(shù)據(jù)：

mounted () {
  this.$nextTick(() => {
    this.initChart();
  })
  window.addEventListener('resize', this.handleResize); // 窗口變化時調(diào)整圖表大小
}

initChart 方法中，注冊了山東省的地圖數(shù)據(jù)并初始化了 ECharts 實例：

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);
    }
  });

  // 設(shè)置地圖選項
  this.setMapData(this.currentCity);
}

3. 動態(tài)加載不同地區(qū)地圖數(shù)據(jù)

地圖數(shù)據(jù)在 mapData 中以城市名稱為鍵，地圖 JSON 文件為值。每個城市的數(shù)據(jù)可以通過 require 動態(tài)加載。例如：

mapData: {
  '山東省': require('./shangdong.json'),
  '青島市': require('../json/青島市.json'),
  '濟南市': require('../json/濟南市.json'),
  ...
}

4. 地圖交互：點擊事件與返回上一層功能

當(dāng)點擊地圖中的某個城市時，會更新地圖為該城市的地圖數(shù)據(jù)，并將當(dāng)前城市名稱加入到 mapStack 中以實現(xiàn)返回功能。goBack 方法會彈出當(dāng)前城市并加載上一層城市的地圖數(shù)據(jù)。

goBack () {
  if (this.mapStack.length > 1) {
    this.mapStack.pop(); // 彈出當(dāng)前城市
    this.setMapData(this.mapStack[this.mapStack.length - 1]); // 設(shè)置上一城市的數(shù)據(jù)
  }
}

5. 自定義 Tooltip 和圖標

地圖上的每個城市展示的數(shù)據(jù)通過 tooltipFormatter 方法進行自定義格式化，顯示每個城市的相關(guān)信息，如總用戶數(shù)、平均積分、平均時長等。

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 ;
}

這段代碼通過判斷 params.data 是否存在，動態(tài)生成顯示城市信息的 HTML 格式。

6. 樣式與布局調(diào)整

對于地圖組件的樣式，使用了 scoped 樣式進行隔離，確保組件的樣式不會污染到其他部分：

.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;
}