基于 Vue3 + Vite 实现 ECharts 多国地图可视化方案

技术背景

项目采用 Vue3 + Vite 构建，前端需要实现一个地图可视化模块，目标是支持全球多个国家的地图展示，并能精确到洲省（地区）层级。

ECharts 本身提供了强大的地图可视化能力，但默认只内置了一些常见地理区域。为了满足多国家、多地区的地图展示需求，我们选择通过引入第三方资源和自定义配置的方式扩展地图数据。

地图数据获取与注册流程

1. 第三方地图资源引入

最初尝试使用 echarts-countries-js 库来快速集成各国地图数据。该库基于 pissang/starbucks 提供了多个 GeoJSON 文件，覆盖全球多个国家和地区。

但在实际使用中发现以下问题：

• 该库依赖全局 echarts 模块进行地图注册。
• 在按需引入 ECharts 的模块化项目中（如使用 Vite + Vue3），无法直接访问全局 echarts 对象，导致注册失败。

因此决定放弃该库，转为手动加载 GeoJSON 数据。

2. 手动注册地图数据

从 echarts-countries-js 中提取所需的 GeoJSON 文件后，我们在项目中自行注册地图（注意：china名字是固定的，因为echarts会有南海诸岛的小地图）：

深色版本
import * as echarts from 'echarts/core';
import chinaGeoJson from '@/assets/maps/china.geojson';

echarts.registerMap('china', chinaGeoJson);

这里只是测试地图展示直接导入，实际是根据需要展示的地图动态导入json文件进行注册。

地区名称映射处理

问题描述

• GeoJSON 文件中的地区名称为英文（或其他语言）。
• 后端存储的数据中使用的地区名称为中文。
• 因此在地图渲染时，无法直接匹配数据项与地理区域。

解决方案：nameMap 映射机制

ECharts 提供了 nameMap 配置项，允许将 GeoJSON 中的原始名称映射为指定的中文名称（我这么配置没有效果，需要放到series-map.nameMap里才有效，可能是其他原因，没有深入研究）：

深色版本
option = {
  geo: {
    map: 'countryName',
    type: 'map',
    nameMap: {
      'Beijing': '北京市',
      'Shanghai': '上海市'
    }
  }
};

为了批量生成 nameMap，我用AI编写了一个 Python 脚本，可以从 GeoJSON 文件中提取所有地区名称，并构建初始的 nameMap JSON 结构。

3. 自动翻译与人工校验结合

由于手动翻译时间不允许（维基百科应该可以搜到每个国家对应的中文名），我使用 AI 辅助工具对提取出的地区名进行批量翻译：

• 使用 googletrans 进行初步自动翻译。
• 发现部分翻译结果不够准确，于是采用 VS Code 插件（如同义灵码）分批次提交给 AI 翻译。
• 最终生成完整的 nameMap JSON 文件。

虽然未能逐一校对，但通过 AI 加快了整体映射构建速度，同时保留了后续人工修正的空间。

当前方案存在的限制与改进方向

尽管实现了基本的地图可视化功能，但仍存在以下几个主要问题：

1. 地图数据准确性不足

• GeoJSON 数据来源较为陈旧（来自 9 年前的开源项目）。

2. 地区名称映射不准确

• AI 翻译存在误差。

3. 数据输入自由度过高

• 用户可通过输入框自由输入地区名称，缺乏统一规范。

总结

本文介绍了一个基于 Vue3 + Vite 的 ECharts 多国地图可视化实现方案，重点包括：

• 如何绕过第三方库限制，手动注册地图数据；
• 利用 ECharts 的 nameMap 功能实现地区名称映射；
• 借助 AI 工具提升地区名称翻译与映射效率；
• 当前实现的局限性及未来可优化方向。

当前内容是自己写了一遍，让ai整理了一遍，然后改了改，所以会有股子AI味，我个人表达能力不是很好，所以采用这个方案。