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

1、安装

npm i echarts
npm i ngx-echarts@8

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')
    }),
  ]
})

3、使用

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

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

在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',
      },
    ],
  };
}