ECharts 使用 GeoJSON 数据制作地图的详细教程

以下是基于 ECharts 使用 GeoJSON 数据制作地图的详细教程，结合了最新的实践方法和资源获取途径：

1. 准备工作

• ​安装 ECharts​：在项目中安装 ECharts。

  npm install echarts --save
  

• ​安装 Axios​：用于获取 GeoJSON 数据。

  npm install axios
  

2. 获取 GeoJSON 数据

GeoJSON 数据是制作地图的基础，可以从以下途径获取：

• ​阿里云 DataV​：提供丰富的 GeoJSON 数据，支持多种行政区划。
  • 地址：阿里云 DataV
• ​GeoJSON.cn​：提供中国地图及各级行政区划的 GeoJSON 数据。
  • 地址：GeoJSON.cn
• ​高德地图 API​：通过高德地图 API 获取 GeoJSON 数据。
• ​自定义数据​：使用工具（如 QGIS、MapShaper）将地图数据转换为 GeoJSON 格式。

3. 加载 GeoJSON 数据

将获取到的 GeoJSON 数据保存为 .json 文件，并通过 Axios 加载到项目中。

示例代码

import axios from 'axios';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.loadGeoJson();
  },
  methods: {
    loadGeoJson() {
      const chartDom = document.getElementById('main');
      this.chartInstance = echarts.init(chartDom);

      axios.get('/path/to/your/geojson.json').then((response) => {
        const geoJsonData = response.data;
        echarts.registerMap('customMap', geoJsonData); // 注册地图
        this.initChart();
      }).catch((error) => {
        console.error('加载 GeoJSON 数据失败:', error);
      });
    },
    initChart() {
      const option = {
        series: [
          {
            type: 'map',
            map: 'customMap', // 地图名称，对应注册时的名称
            // 其他配置...
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  },
};

4. 配置 ECharts 地图

在 ECharts 中，通过 series 的 type: 'map' 配置地图，并指定 map 字段为自定义地图名称。

基本配置

const option = {
  series: [
    {
      type: 'map',
      map: 'customMap', // 自定义地图名称
      roam: true, // 是否允许缩放和平移
      label: {
        show: true, // 显示区域名称
        color: '#fff',
      },
      itemStyle: {
        areaColor: '#409eff', // 区域颜色
        borderColor: '#fff', // 边界颜色
      },
      emphasis: {
        itemStyle: {
          areaColor: '#ffde93', // 高亮区域颜色
        },
      },
      data: [
        { name: '区域1', value: 100 },
        { name: '区域2', value: 200 },
        // 其他数据...
      ],
    },
  ],
};

5. 地图钻取功能（可选）

如果需要实现地图钻取（从省级地图钻取到市级地图等），可以通过监听点击事件并动态加载对应级别的 GeoJSON 数据。

示例代码

chartInstance.on('click', (params) => {
  if (params.componentType === 'series') {
    // 获取点击的区域名称
    const regionName = params.name;
    // 加载对应区域的 GeoJSON 数据
    axios.get(`/path/to/${regionName}.json`).then((response) => {
      const regionGeoJson = response.data;
      echarts.registerMap(regionName, regionGeoJson);
      this.chartInstance.setOption({
        series: [
          {
            map: regionName, // 更新地图名称
            // 其他配置...
          },
        ],
      });
    });
  }
});

6. 注意事项

• ​文件编码​：保存 GeoJSON 文件时，建议使用 UTF-8 编码，避免中文乱码。
• ​性能优化​：对于较大的 GeoJSON 数据，可以通过简化几何数据或分块加载来优化性能。
• ​数据格式​：确保 GeoJSON 数据中的 name 字段与 ECharts 数据中的 name 一致。

通过以上步骤，你可以轻松地使用 ECharts 和 GeoJSON 数据制作地图，并实现丰富的可视化效果。