在Angular的Apache ECharts地图Tooltip中显示geo.json多属性

数据老陈

2026-7-10

问题：Angular中ECharts地图Tooltip同时显示名称与编码

问题背景

在Angular应用中用Apache ECharts实现地图，所用的.geo.json文件的features数组里，每个元素的properties都包含name（名称）和code（编码）属性。当前基于name属性映射数据，Tooltip能正常显示「名称 - 数值」，但需要改成「名称（编码） - 数值」的格式，编码需从geo.json的属性中获取。

相关代码片段

mymap.geo.json 片段

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [3.172704445659,50.011996744997], [3.1821975358417,50.012335988197], [3.2174797791605,50.023182479597], [3.230541907493,50.031311385584]...
        ]
      },
      "properties": {
        "code": "02",
        "name": "Aisne"
      }
    },

component.ts 文件

mapFunction(chartData: ObjectType[]): void {

    // @ts-ignore
    echarts.registerMap('franceByDepartment', franceMap);
    
    this.chartOptionsMap = {
      series: [
        {
          type: 'map',
          name: 'May By Departments',
          colorBy: 'series',
          map: 'franceByDepartment',
          roam: true,
          nameProperty: 'name',
          label: {
            show: false,
          },
          selectedMode: false,
          data: chartData.map(res => ({
            name: res.department,
            value: res.countOfData,
          }))
        },
      ],
      tooltip: {
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2,
        formatter: 'Department name : {b} <br/> Code:  <br/> Count : {c}'
      },
      visualMap: {
        left: 'right',
        min: 0,
        max: 5,
        inRange: {
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#f46d43',
            '#d73027',
          ]
        },
        text: ['High', 'Low'],
        calculable: true
      },
      toolbox: {
        show: true,
        //orient: 'vertical',
        left: 'left',
        top: 'top',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
    };
  }

遇到的问题

将nameProperty改为code后，Tooltip仅显示编码，无法同时展示名称和编码。
尝试通过let p = mymap.features[0].properties.code;获取属性时，报错：

Should not import the named export 'features'.'0'.'properties'.'code' (imported as 'mymap') from default-exporting module (only default export is available soon)

修改Tooltip的formatter函数后，出现两个错误：

tooltip: {
        formatter: function (params) {
          const district = france.features.find(
            (district) => district.properties.nom === params.name
          );
          console.log(district);
          return district.properties.code + ' ' + district.properties.nom;
        },
      },

错误信息：

ERROR in ./src/app/statistics/statistics.component.ts 43:29-49
export 'features'.'find' (imported as 'france') was not found in '/src/assets/france-geo.json' (possible exports: 0, 1, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 2, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 3, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 4, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 5, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 6, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 7, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 8, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 9, 90, 91, 92, 93, 94, 95)

ERROR
src/app/statistics/statistics.component.ts:48:18 - error TS7006: Parameter 'district' implicitly has an 'any' type.

48                 (district) => district.properties.nom === params.name

解决方案

1. 正确导入geo.json文件

确保以默认导入方式获取整个geo对象，避免解构导出的错误：

import franceMap from '/src/assets/france-geo.json';

2. 修复Tooltip formatter函数

匹配geo数据中的name字段（之前错误使用了nom，需与geo文件中的属性名一致）
给参数添加类型定义，解决TS类型报错
拼接需要显示的格式内容

修改后的tooltip配置：

tooltip: {
  trigger: 'item',
  showDelay: 0,
  transitionDuration: 0.2,
  formatter: (params: any) => {
    // 从geo数据中匹配对应名称的区域
    const district = (franceMap as any).features.find(
      (item: any) => item.properties.name === params.name
    );
    // 拼接显示内容，处理编码不存在的情况
    return `Department name : ${params.name} (${district?.properties.code || 'N/A'}) <br/> Count : ${params.value}`;
  }
},

3. 类型优化（可选）

定义geo数据的类型接口，避免使用any类型：

// 定义geo数据的类型接口
interface GeoFeatureProperties {
  code: string;
  name: string;
}

interface GeoFeature {
  type: string;
  properties: GeoFeatureProperties;
  geometry: any;
}

interface GeoCollection {
  type: string;
  features: GeoFeature[];
}

// 导入时指定类型
import franceMap from '/src/assets/france-geo.json' as unknown as GeoCollection;

修改完成后，Tooltip即可正常显示「名称（编码） - 数值」的格式。

内容的提问来源于stack exchange，提问作者MiMoy