如何在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已經被運用在項目中…