apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.41k stars 19.61k forks source link

[Bug] After migratingo to Angular v18, the import of the theme does not work #20418

Closed lmarquinez closed 2 days ago

lmarquinez commented 2 days ago

Version

5.5.1

Link to Minimal Reproduction

-

Steps to Reproduce

  1. Create angular 18 project, no standalone.
  2. Install echarts@5.5.1
  3. Add to angular.json:
    "scripts": [
      "node_modules/echarts/dist/echarts.js",
      "node_modules/echarts/theme/macarons.js",
    ],
  4. Add to module.ts:
    
    import 'echarts/theme/macarons.js';
    import * as echarts from 'echarts';
    import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({ imports: [ NgxEchartsModule.forRoot({ echarts }) ],

5. Create a component:
`<div echarts [options]="echartsOption" theme="macarons"></div>`

### Current Behavior

I was using` echarts v5.4.3` with `ngx-echarts 17.0.0` and `angular 17`, but when I updated `angular to v18` and  `ngx-echarts 18.0.0`  I notice that the theme is not working. I have also updated echarts to v5.5.1 just in case, but it still no working.

I have an application as a library where I am using the echarts package to create some graphics and there it is not working, but it is strange that in the application when I install this package, it works. Echarts is a peerDependency of this package. Should I add something in the angular.json or in some other file? Has anything changed in the way you import or anything you need to change or add? For example in the scripts section of angular.json like:

"scripts": [ "node_modules/echarts/dist/echarts.js", "node_modules/echarts/theme/macarons.js", ],


In the aplication as library I am only importing the theme in the module this way:

import 'echarts/theme/macarons.js'; import * as echarts from 'echarts'; import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({ imports: [ NgxEchartsModule.forRoot({ echarts }) ],


And I am using this way to create the graphics:

`<div echarts [options]="echartsOption" theme="macarons"></div>`

### Expected Behavior

I do not see the colors of macarons in the bar chart, nor the curvature in the line chart, etc. That is to say the features of the macarons theme. And they should have the appearance of this theme that worked correctly before the migration.

### Environment

```markdown
- OS: Windows
- Browser:Chrome
- Framework: Angular@18

Any additional comments?

No response

lmarquinez commented 2 days ago

Adding provideEcharts(), in the module of the providers section, solves this problem.