我们可以在Echarts地图的工具提示中显示geo.json文件中的多个属性吗？

Question

我正在我的角度应用程序中实现 Apache echarts 地图。我用来导入地图的“.geo.json”文件在 geo.json 文件的属性数组中有两个属性。一个是“名称”，另一个是“代码”。

我正在根据“名称”属性映射每个数据。数据按预期显示：工具提示中的“名称 - 值”。有没有办法在工具提示上添加其他信息，例如“名称（代码）-值”，其中代码来自 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"
      }
    },

// 组件.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: 'name',

至

nameProperty: 'code',

显示的值将是代码，但有没有办法在工具提示中包含 geo.json 文件中的两个值？

我尝试获取这样的属性

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: function (params) {
          const district = france.features.find(
            (district) => district.properties.nom === params.name
          );
          console.log(district);
          return district.properties.code + ' ' + district.properties.nom;
        },
      },

但是这会返回以下错误，

./src/app/statistics/statistics.component.ts 中的错误 43:29-49 在“/src/assets/france-geo.json”中找不到导出“features”.“find”（导入为“france”）（可能导出：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)

错误 src/app/statistics/statistics.component.ts:48:18 - 错误 TS7006：参数“district”隐式具有“any”类型。

48（区）=> District.properties.nom === params.name

Answer 1

您可以使用 formatter 函数 将给定的参数记录到控制台并查看它们的结构并返回您想要的任何内容：

option = {
    tooltip: {},
    ...
    series: [
        {
            ...
            tooltip: {formatter: someFunction},
        },
    ...
    ]
}

function someFunction(params) {
    console.log(params);
    return params.data;

}

这是一个小示例。

这是另一个小示例，可能会有所帮助。