背景/框架: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已經被運用在項目中…