【Angular13】进阶教程-ECharts详细使用

1、安装

npm i echarts
npm i ngx-echarts@8
1
2

ngx-echarts最新版本是14，要求angular的版本为14，所以一定要安装8

2、配置

在app.module.ts文件填写下面配置

import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
  imports: [
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
    }),
  ]
})
1
2
3
4
5
6
7
8

3、使用

创建一个组件STHome ng g c STHome
在sthome.component.html文件中添加

<div echarts [options]="chartOption" class="demo">div>
1

在sthome.component.ts文件中添加

import { EChartsOption } from 'echarts';

export class STHomeComponent implements OnInit {
  chartOption: EChartsOption = {
    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',
      },
    ],
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20