1、安装插件，必须安装echarts.js基础js文件和ngx-echarts插件文件

npm install echarts --savenpm install ngx-echarts --save

2、配置 echarts.js

首先要引入echarts.js文件A: 使用angular-cli创建项目，打开angular-cli.json,作如下配置{  "scripts": [    "../node_modules/echarts/dist/echarts.min.js"   ],}B: 使用webpack创建项目，打开webpack.common.js 作如下配置new webpack.ProvidePlugin({  echarts: "echarts"})C: 如果不知道使用什么创建项目，呵呵，可以直接在index.html文件中通过cdn链接引入echarts.js文件

3、配置ngx-echarts

import { AngularEchartsModule } from 'ngx-echarts';// 最新升级后，修改引入名称import {NgxEchartsModule} from 'ngx-echarts';...@NgModule({  imports: [    AngularEchartsModule  ],  ...})

4、html文件，其中包括配置和样式

5、在组件中书写配置，可以在echarts官网查询配置细节

import { Component, OnInit } from "@angular/core";@Component({  selector: "echarts",  templateUrl: "./echarts.component.html"})export class EchartsComponent implements OnInit {  public echartOption: any;  constructor() {  }  ngOnInit() {    this.echartOption = {      backgroundColor: '#2c343c',      title: {        text: 'Customized Pie',        left: 'center',        top: 20,        textStyle: {          color: '#ccc'        }      },      tooltip: {        trigger: 'item',        formatter: "{a} 
{b} : {c} ({d}%)"      },      visualMap: {        show: false,        min: 80,        max: 600,        inRange: {          colorLightness: [0, 1]        }      },      series: [        {          name: '访问来源',          type: 'pie',          radius: '55%',          center: ['50%', '50%'],          data: [            { value: 335, name: '直接访问' },            { value: 310, name: '邮件营销' },            { value: 274, name: '联盟广告' },            { value: 235, name: '视频广告' },            { value: 400, name: '搜索引擎' }          ].sort(function(a, b) { return a.value - b.value; }),          roseType: 'radius',          label: {            normal: {              textStyle: {                color: 'rgba(255, 255, 255, 0.3)'              }            }          },          labelLine: {            normal: {              lineStyle: {                color: 'rgba(255, 255, 255, 0.3)'              },              smooth: 0.2,              length: 10,              length2: 20            }          },          itemStyle: {            normal: {              color: '#c23531',              shadowBlur: 200,              shadowColor: 'rgba(0, 0, 0, 0.5)'            }          },          animationType: 'scale',          animationEasing: 'elasticOut',          animationDelay: function(idx) {            return Math.random() * 200;          }        }      ]    }  }}

6、通过标签<echarts></echarts>将这个组件引用到其他界面就可以使用了

注意：    1. 必须设置高度    2. 不要忘记引入echarts.js文件

7、如果想使用地图，那么先要在echarts网站下载地图的js文件，然后和配置echarts.js文件一样，做相应的配置，然后修改组件中的配置就可以了。