typeScript 下 echarts.registerMap，提示错误，怎么解决

[liujiaang]

Version

5.1.2

Steps to reproduce

import * as echarts from 'echarts/core'; import chinaMap from './china.json';

echarts.registerMap('china', chinaMap);

提示报错 类型“{ type: string; features: ({ type: string; properties: { id: string; size: string; name: string; cp: number[]; childNum: number; }; geometry: { type: string; coordinates: number[][][]; }; } | { type: string; properties: { ...; }; geometry: { ...; }; })[]; }”的参数不能赋给类型“MapInput | GeoJSONSourceInput”的参数。 不能将类型“{ type: string; features: ({ type: string; properties: { id: string; size: string; name: string; cp: number[]; childNum: number; }; geometry: { type: string; coordinates: number[][][]; }; } | { type: string; properties: { ...; }; geometry: { ...; }; })[]; }”分配给类型“GeoJSONCompressed”。 属性“type”的类型不兼容。 不能将类型“string”分配给类型“"FeatureCollection"”。

What is expected?

怎么才能不报错

What is actually happening?

希望知道引入什么类型会不报错

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[echarts-bot[bot]]

@liujiaang It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** echarts.registerMap under typeScript shows an error, how to solve it **BODY** ### Version 5.1.2 ### Steps to reproduce import * as echarts from'echarts/core'; import chinaMap from'./china.json'; echarts.registerMap('china', chinaMap); Prompt the error type "{ type: string; features: ({ type: string; properties: {id: string; size: string; name: string; cp: number[]; childNum: number; }; geometry: {type: string ; coordinates: number[][][]; };} | {type: string; properties: {...; }; geometry: {...; }; })[]; }" parameters cannot be assigned Parameters of type "MapInput | GeoJSONSourceInput". Cannot type "{ type: string; features: ({ type: string; properties: {id: string; size: string; name: string; cp: number[]; childNum: number; }; geometry: {type: string ; coordinates: number[][][]; };} | {type: string; properties: {...; }; geometry: {...; }; })[]; }" assigned to type "GeoJSONCompressed ". The type of the attribute "type" is incompatible. The type "string" cannot be assigned to the type ""FeatureCollection"". ### What is expected? How can I not report an error ### What is actually happening? I want to know what type of introduction will not report an error

[Ovilia]

找一下对应的类型定义是哪里错了，然后提个 PR 吧

[echarts-bot[bot]]

This issue is labeled with difficulty: easy. @liujiaang Would you like to debug it by yourself? This is a quicker way to get your problem fixed. Or you may wait for the community to fix.

Please have a look at How to debug ECharts if you'd like to give a try. 🤓

[xinghehaohan]

echarts.registerMap('china', (china) as any);
echarts.registerMap('world', (world) as any);
echarts.registerMap('USA', (usa) as any, {
  Alaska: {
    // 把阿拉斯加移到美国主大陆左下方
    left: -143,
    top: 50,
    width: 15
  },
  Hawaii: {
    left: -135,        // 夏威夷
    top: 24,
    width: 5
  }
});

加 (usa) as any 可以解决这个bug

[SuperRay3]

I think it's not a mistake of echarts.

According to the prompt, we can find the main problem is "The type "string" cannot be assigned to the type ""FeatureCollection""". After that we can jump to the type declaration in which file name called shared.d.ts whose path is echarts/types/dist/shared.d.ts

If you regist map by using GeoJSON, the type were limited by GeoJSONFeatureCollection GeoJSONFeature and GeoJSONGeometry.

Inspect the data in own code was inferred to be string by typescript, but echarts declare it as a literal "FeatureCollection".

Solution:

Add as const assertions to the field which were defined as literal. For example:

{
  type: 'FeatureCollection' as const,
  features: [
    {
      id: '710000',
      type: 'Feature' as const,
      geometry: {
        type: 'MultiPolygon' as const,
        coordinates: [
          ......
        ],
        encodeOffsets: [
          ......
        ],
      },
      properties: { cp: [121.509062, 25.044332], name: '', childNum: 6 },
    },
  ]
}

@Ovilia Is my solution correct?

[LiuJB0128]

请问这个问题解决了吗

[SuperRay3]

请问这个问题解决了吗

https://github.com/apache/echarts/issues/15527#issuecomment-962399027

[code-artisan]

是否可以考虑导出类似 GeoJSONSourceInput SVGMapInput MapInput 这样的 interface / type 呢？

[emeryao]

it's the year of 2023 and the code below saved my day

import { GeoJSONSourceInput } from 'echarts/types/src/coord/geo/geoTypes';

[jingyuhhh]

@emeryao 现在这种方式用不了了，还有其他解决方案吗

[emeryao]

@emeryao 现在这种方式用不了了，还有其他解决方案吗

I just tried in my project with the code above and code below

• geoJson.ts

  
  import { GeoJSON } from 'echarts/types/src/coord/geo/geoTypes';

export const geoJson: GeoJSON = { type: 'FeatureCollection', features: [ // some geoJson ] }

* `app.ts`
```typescript
import { geoJson } from './geojson';

echarts.use([CanvasRenderer, EffectScatterChart, LinesChart, TooltipComponent, GeoComponent]);
echarts.registerMap('map', geoJson);

both the codes works with echarts@5.4.3 and typescript@5.1.6

@volcano621

[jingyuhhh]

@emeryao When I open the webpage, I encounter the error Failed to resolve import "echarts/types/src/coord/geo/geoTypes" from "src\components\Overview\MapView.vue". Does the file exist? despite the absence of any errors in my IDE .My code is here

import * as echarts from "echarts";
import { GeoJSON } from 'echarts/types/src/coord/geo/geoTypes';
import chinaJson  from "../../mock/index.json";

echarts.registerMap('china', (chinaJson) as GeoJSON);

[jingyuhhh]

oh the issue has been resolved now. add "type"

import type { GeoJSON } from 'echarts/types/src/coord/geo/geoTypes';

[TY-LIU]

oh the issue has been resolved now. add "type"

import type { GeoJSON } from 'echarts/types/src/coord/geo/geoTypes';

but in vue3+vite, have another error.

Error: The following dependencies are imported but could not be resolved:

  echarts/types/src/coord/geo/geoTypes (imported by E:/*/*/src/components/map-content/MapContent.vue?id=0)                                    

Are they installed?                                                                                                                                                  
    at file:///E:/*/*/node_modules/.pnpm/vite@4.4.9_@types+node@20.6.5_sass@1.68.0/node_modules/vite/dist/node/chunks/dep-df561101.js:45705:23
    at processTicksAndRejections (node:internal/process/task_queues:96:5)                                                                                            
    at async file:///E:/*/*/node_modules/.pnpm/vite@4.4.9_@types+node@20.6.5_sass@1.68.0/node_modules/vite/dist/node/chunks/dep-df561101.js:45114:38

But it doesn't affect development, just looks annoying 😒😒😒 Who knows how to resolve it?

[gix9303]

import type { GeoJSONSourceInput } from 'echarts/types/src/coord/geo/geoTypes';
echarts.registerMap('china', china as GeoJSONSourceInput);

try this