[Bug] registerTheme don't working

[ZeeLyn]

Version

5.4.1

Link to Minimal Reproduction

No response

Steps to Reproduce

import * as echarts from "echarts";
 fetch("chalk.project.json")
            .then((r) => r.json())
            .then((chalkCheme) => {
                echarts.registerTheme("chalk", chalkCheme);
                 echarts.init(document.getElementById("id"), "chalk").setOption({.....});
            });

Current Behavior

From this link[https://echarts.apache.org/zh/theme-builder.html] download the theme file.The theme was registered for the installation of the official tutorial, but it did not take effect

Expected Behavior

Hope RegisterTheme can take effect

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

download JS version from Theme Builder, not the JSON version. The Help says: The exported JSON file can be used only in this tool, but not in ECharts directly.

[plainheart]

@helgasoft Thanks for your reply. I'd like to make it more clear, instead of the Export button, we should click the Download button to get the JS / JSON version of the edited theme file. The file downloaded by Export is only used in the theme editor.

[ZeeLyn]

Thanks, it is really easy to confuse

[lmarquinez]

I am importing the theme this way, import 'echarts/theme/macarons.js'; , in the module and it works correctly, but when I create the package to install it in an application it does not catch the theme.

I was using v5.4.3 with ngx-echarts 15.0.3 and angular 15, but when I updated echarts to v5.5.0 I notice that the theme is not working.

[plainheart]

Hi @lmarquinez, is it possible to provide us a minimal repo for reproduction? It can help find the reason out faster.

[lmarquinez]

Actually I can't, as I said before I have an application as a library where I am using the echarts package to create some graphics and there it is working correctly, I have problems in the application when I install this package. Echarts is a peerDependency of this package. Should I add something in the angular.json? For example in the scripts section 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>