升级echarts至v5.5.0后，Angular+ngx-echarts项目主题失效问题求助

核心结论 #

不用在angular.json的scripts节点手动引入ECharts脚本和主题文件，问题出在ECharts v5.5.0的模块导入机制变化，导致类库中注册的主题未同步到主应用的ECharts实例。

解决步骤 #

• 修改类库的主题导入方式
  原来直接导入echarts/theme/macarons.js的方式，仅会将主题注册到类库自身的ECharts实例中，但由于ECharts是类库的peerDependency，主应用会使用独立的ECharts实例，因此无法访问类库中注册的主题。改成手动注册主题的方式：

  import * as echarts from 'echarts';
  // 可直接导入主题JSON，若找不到对应JSON文件，可从node_modules/echarts/theme/macarons.js中提取主题配置对象使用
  import macaronsTheme from 'echarts/theme/macarons.json';
  import { NgxEchartsModule } from 'ngx-echarts';
  
  // 手动将主题注册到ECharts实例
  echarts.registerTheme('macarons', macaronsTheme);
  
  @NgModule({
    imports: [
      NgxEchartsModule.forRoot({
        echarts
      })
    ],
    // 其他模块配置...
  })
  export class YourLibraryModule { }
  

• 对齐主应用依赖版本
  确保主应用安装的ECharts版本为v5.5.0、ngx-echarts版本为v15.0.3，与类库的peerDependency要求完全匹配，避免版本不一致导致的实例隔离问题。

• 主应用组件用法保持不变
  主应用中使用类库的图表组件时，仍采用原有写法即可：

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

原因说明 #

ECharts v5.5.0调整了模块导入的处理逻辑，此前直接导入主题JS文件会自动注册到当前模块的ECharts实例，但当类库将ECharts设为peerDependency时，类库与主应用的ECharts实例相互独立。类库中注册的主题仅存在于自身实例中，主应用的实例无法访问，因此导致主题失效。通过手动调用registerTheme并借助ngx-echarts的forRoot传入统一实例，可实现主题在主应用中的共享生效。

内容的提问来源于stack exchange，提问作者Ihescode