如何在angular使用echarts

背景/框架：Angular 7 + echarts

在做项目的过程中，经常能遇到有些信息需要用图表来展示；这时候，我们就会想起百度的echarts，方便快捷好用…

那如何在angular中使用echarts呢？

首先，我们得install相关模块：

npm install echarts -S

npm install ngx-echarts -S

npm install @types/echarts -D

按以上顺序安装完之后，我们要在app.module.ts文件按中引入该模块：

import { NgxEchartsModule } from 'ngx-echarts';
 
@NgModule({
  imports: [
    ...,
    NgxEchartsModule
  ],
  ...
})
export class AppModule { }

然后，在需要用到echarts的Home页面：

home.component.html

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

home.component.ts

import { EChartOption } from 'echarts';
 
// ...
 
chartOption: 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'
  }]
}

到此，echarts已经被运用在项目中…