AngularX 配置 Echarts 并使用Echarts 自定义主题

1、安装ngx - Echarts

npm install echarts -S
npm install ngx-echarts -S

2、配置Angular 项目
在需要使用Echarts 图表的模块导入NgxEchartsModule

import { NgxEchartsModule } from 'ngx-echarts';
 
/**
 * This will import all modules from echarts.
 * If you only need custom modules,
 * please refer to [Custom Build] section.
 */
import * as echarts from 'echarts';
 
@NgModule({
  imports: [
    NgxEchartsModule.forRoot({
      echarts,
    }),
  ],
})
export class AppModule {}

3、使用Echarts
.html 页面

<div echarts [options]="weekCapacity"></div>

.ts 文件

import { EChartOption } from 'echarts';
 
// ...
 
weekCapacity: EChartOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
    },
  ],
};

5、注册自定义Echarts样式
在 app.component.ts 页面 public ngOnInit() {}内添加

import './../assets/darkReport';

darkReport.js从Echarts 官网设置样式下载
6、使用自定义样式

<div id="details" echarts [options] = "weekCapacity" theme="darkReport" ></div>