Angular中使用Echarts

2020年11月13日16:44:06

翻译自官网：https://www.npmjs.com/package/ngx-echarts#ngx-echarts

1. 安装

npm install echarts -S

npm install ngx-echarts -S

npm install resize-observer-polyfill -D

2. 在app.module.ts 中引入

import { NgxEchartsModule } from 'ngx-echarts';

import * as echarts from 'echarts';

 

@NgModule({

  imports: [

    NgxEchartsModule.forRoot({

      echarts,

    }),

  ],

})

export class AppModule {}

3. 网页

html：

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

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',

    },

  ],

};

4. 运行