Angular中使用Echarts的方式

1、安装相关依赖：

npm install echarts -s
npm install ngx-echarts -s

2、引入echarts：

angular.json

"architect": {
  "build": {
    "options": {
      "scripts": [
        "node_modules/echarts/dist/echarts.min.js"
      ]
    }
  }
}

module文件

import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';

@NgModule({
  imports:[
    NgxEchartsModule.forRoot({echarts})
  ]
})

3、创建图表：

html：

<div echarts [options]="option" style="width: 800px; height: 400px;"></div>

ts：

// 需要面积图的渐变色等特殊设置的时候会方便些
// 不使用特殊的设置的话就不需要加这个import
import * as echarts from 'echarts';

// 基础面积图示例
option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};

然后运行就能够看到效果了。