快捷導(dǎo)航

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

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

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

1. 項(xiàng)目結(jié)構(gòu)與組件基本框架
2. ECharts 的基本配置與地圖初始化
3. 動(dòng)態(tài)加載不同地區(qū)地圖數(shù)據(jù)
4. 地圖交互：點(diǎn)擊事件與返回上一層功能
5. 自定義 Tooltip 和圖標(biāo)
6. 樣式與布局調(diào)整
總結(jié)：

效果圖：

我將分為以下幾部分進(jìn)行詳細(xì)講解：

項(xiàng)目結(jié)構(gòu)與組件基本框架
ECharts 的基本配置與地圖初始化
動(dòng)態(tài)加載不同地區(qū)地圖數(shù)據(jù)
地圖交互：點(diǎn)擊事件與返回上一層功能
自定義 Tooltip 和圖標(biāo)
樣式與布局調(diào)整

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

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

<template>
  <div class="map_style">
    <!-- 返回按鈕，只有在有歷史記錄時(shí)顯示 -->
    <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>

在模板中，主要有兩個(gè)部分：

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

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

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

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

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

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

  // 監(jiān)聽地圖點(diǎn)擊事件，點(diǎn)擊后進(jìn)入下一級(jí)地圖
  this.chart.on('click', ({ name }) => {
    if (this.mapData[name] && name !== this.currentCity) {
      // 進(jìn)入下一級(jí)地圖
      this.mapStack.push(name);
      this.setMapData(name);
    }
  });

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

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

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

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

4. 地圖交互：點(diǎn)擊事件與返回上一層功能

當(dāng)點(diǎn)擊地圖中的某個(gè)城市時(shí)，會(huì)更新地圖為該城市的地圖數(shù)據(jù)，并將當(dāng)前城市名稱加入到 mapStack 中以實(shí)現(xiàn)返回功能。goBack 方法會(huì)彈出當(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 和圖標(biāo)

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

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 || '暫無(wú)單位'}</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 + '平均時(shí)長(zhǎng)：' + (params.data && params.data.duration || 0);
  return cityName + totalUser + score + duration ;
}

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

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

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

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