第24章：ECharts 地图组件（基础行政区地图，若依 Vue3）

第24章：ECharts 地图组件（基础行政区地图，若依 Vue3）

业务场景：后台看板展示各省 / 地区数据分布，比如区域销售额、用户分布。

⚠️注意：echarts 5.x 之后地图需要单独引入 echarts/map/js/china.js 或者使用 geojson，我们用引入 china 地图的方式。

第一步：先安装 / 确认地图资源

在你的项目中，我们直接引入中国地图。

打开页面 script，顶部引入 china 地图：

import 'echarts/map/js/china'

页面完整 Vue 代码

<template>
  <div class="chart-container">
    <el-alert title="中国地图：区域数据可视化，hover显示省份数值" type="info" style="margin-bottom:10px"/>
    <div
      ref="chartRef"
      style="width:100%;height:480px;border:1px solid #eee"
    ></div>
  </div>
</template>

<script setup>
import { useEcharts } from '@/composables/echartHelper'
// 引入中国地图js文件
import 'echarts/map/js/china'

const { chartRef, setChartOption, onChartEvent } = useEcharts()

// 模拟各省销售数据
const mapData = [
  { name: '北京', value: 132 },
  { name: '上海', value: 215 },
  { name: '广东', value: 280 },
  { name: '山东', value: 178 },
  { name: '江苏', value: 196 },
  { name: '浙江', value: 162 },
  { name: '四川', value: 95 },
  { name: '河南', value: 88 }
]

const option = {
  title: {
    text: '全国区域销售额分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>销售额：{c}万'
  },
  visualMap: {
    min: 0,
    max: 300,
    left: 'left',
    bottom: '5%',
    text: ['高','低'],
    calculable: true,
    inRange: {
      color: ['#e0f7fa','#b2ebf2','#80deea','#4dd0e1','#26c6da','#00bcd4','#00acc1']
    }
  },
  series: [
    {
      name: '销售额',
      type: 'map',
      map: 'china',
      roam: true, // 开启缩放、拖拽平移
      zoom: 1.2,
      label: {
        show: true, // 省份名称文字
        fontSize: 10
      },
      data: mapData
    }
  ]
}

setChartOption(option)

// 地图点击事件
onChartEvent('click', (params) => {
  console.log('点击省份：', params.name, params.value)
  alert(`选中省份：${params.name}，销售额：${params.value ?? 0}万`)
})
</script>

核心知识点

1. map: 'china' 指定地图为中国行政区，前提是引入 china 地图 js
2. roam:true 支持鼠标滚轮缩放、拖拽平移地图，大屏看板常用
3. visualMap 颜色渐变条，数值越大颜色越深，可以自定义色阶
4. label.show 控制省份名称是否显示
5. 点击事件可以拿到省份名称，可继续做下钻（点击省份进入省内城市地图，下一节讲）

🧪 测试清单

1. 保存页面，刷新
2. 中国地图正常渲染，省份有渐变颜色
3. 鼠标 hover 省份，弹出 tooltip 展示数据
4. 鼠标滚轮缩放，拖拽地图移动
5. 点击省份，弹出 alert，控制台打印信息
6. 窗口缩放，地图自适应

注意：部分 echarts 版本如果import 'echarts/map/js/china'报错，改用 geojson 方式加载地图，遇到报错直接发给我。

错误原因

Failed to resolve import "echarts/map/js/china"

echarts 5.x 之后已经移除了内置地图文件 ，echarts/map/js/china 这个路径不存在了，必须改用 geojson + registerMap 的方式加载地图。

修复方案（分两步）

第一步：获取中国地图 geojson 文件

你需要在项目里放一个 china.json 文件，推荐路径：

src/assets/map/china.json

下载方式：

1. 打开这个网址：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
2. 右键 → 另存为 → 保存为 china.json
3. 放到 src/assets/map/china.json

第二步：修改页面代码，用 registerMap 注册地图

<template>
  <div class="chart-container">
    <el-alert title="中国地图：区域数据可视化，hover显示省份数值" type="info" style="margin-bottom:10px"/>
    <div
      ref="chartRef"
      style="width:100%;height:480px;border:1px solid #eee"
    ></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { useEcharts } from '@/composables/echartHelper'
// 引入本地china.json文件
import chinaJson from '@/assets/map/china.json'

const { chartRef, setChartOption, onChartEvent } = useEcharts()

// 模拟各省销售数据
const mapData = [
  { name: '北京', value: 132 },
  { name: '上海', value: 215 },
  { name: '广东', value: 280 },
  { name: '山东', value: 178 },
  { name: '江苏', value: 196 },
  { name: '浙江', value: 162 },
  { name: '四川', value: 95 },
  { name: '河南', value: 88 }
]

onMounted(async () => {
  // 注册中国地图
  echarts.registerMap('china', chinaJson)

  const option = {
    title: {
      text: '全国区域销售额分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>销售额：{c}万'
    },
    visualMap: {
      min: 0,
      max: 300,
      left: 'left',
      bottom: '5%',
      text: ['高','低'],
      calculable: true,
      inRange: {
        color: ['#e0f7fa','#b2ebf2','#80deea','#4dd0e1','#26c6da','#00bcd4','#00acc1']
      }
    },
    series: [
      {
        name: '销售额',
        type: 'map',
        map: 'china',
        roam: true,
        zoom: 1.2,
        label: {
          show: true,
          fontSize: 10
        },
        data: mapData
      }
    ]
  }

  setChartOption(option)

  // 地图点击事件
  onChartEvent('click', (params) => {
    console.log('点击省份：', params.name, params.value)
    alert(`选中省份：${params.name}，销售额：${params.value ?? 0}万`)
  })
})
</script>

核心修改点

1. 删除 import 'echarts/map/js/china'
2. 新增 import chinaJson from '@/assets/map/china.json'
3. onMounted 里先注册地图 ：echarts.registerMap('china', chinaJson)
4. 再渲染图表，顺序不能反

✅ 测试步骤

1. 先创建目录 src/assets/map/
2. 把下载的 china.json 放进去
3. 替换页面代码
4. 刷新页面，地图正常渲染
5. hover 省份、滚轮缩放、点击省份正常