echarts import didn't work unless I did something different

[jpike88]

see problem and resolution in here

apache/echarts#14138 (comment)

Your code has import * as echarts from 'echarts/core'; as the import statement, when I did this I ran into a problem similar to the linked issue (yes I know it's about Vue but this happens in angular too).

Just an FYI

[alanpurple]

you should import renderer and configure too

[gurelsoycaner]

What's the solution for this problem in angular environment?

[gurelsoycaner]

you should import renderer and configure too

can you please explain how?

[alanpurple]

you need to add something like this

import * as echarts from 'echarts/core';
import { SVGRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import { TooltipComponent, AxisPointerComponent } from 'echarts/components'
echarts.use([SVGRenderer, LineChart, TooltipComponent, AxisPointerComponent]);

[gsoulie]

Hello, i'am struggled with the following issue :

`X [ERROR] TS1203: Export assignment cannot be used when targeting ECMAScript modules. Consider using 'export default' or another module format instead. [plugin angular-compiler]

node_modules/echarts/index.d.ts:23:0:
  23 │ export = echarts;`

And this is my import :

`import * as echarts from 'echarts/core';

import { SVGRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent
} from 'echarts/components';

// Features like Universal Transition and Label Layout
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { LineChart } from 'echarts/charts';
import { PieChart } from 'echarts/charts';
import { TranslateModule } from '@ngx-translate/core';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

echarts.use([
BarChart,
PieChart,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
SVGRenderer,
LineChart,
TooltipComponent,
LegendComponent
]);`

Environment :

"dependencies": { "@angular/animations": "^19.2.7", "@angular/cdk": "^19.0.2", "@angular/common": "^19.2.7", "@angular/compiler": "^19.2.7", "@angular/core": "^19.2.7", "@angular/forms": "^19.2.7", "@angular/material": "^19.0.2", "@angular/platform-browser": "^19.2.7", "@angular/platform-browser-dynamic": "^19.2.7", "@angular/router": "^19.2.7", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "dayjs": "^1.11.13", "echarts": "^5.6.0", "jspdf": "^3.0.1", "ngx-echarts": "^19.0.0", "object-to-formdata": "^4.5.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zod": "^3.23.8", "zone.js": "~0.15.0" },