因为angular2+ 使用 ==typescript==开发，所以想要使用echarts，必须安装echarts针对angular的插件ngx-echarts。本文案列实际效果如上图。

安装ngx-echarts

npm install echarts --save

npm install ngx-echarts@3.2.0 --save

注意

• echarts >= 3.x
• angular >= 6 使用 v 3.0.0 以上版本
• angular <= 6 使用 v 2.3.1 以下版本

在项目中引入echarts

在angular.json文件中引入echarts.js

// angular.json 文件

{

    ...

    "build":{

        ...

        "options":{

            ...

            "scripts":[

                "node_modules/echarts/dist/echarts.min.js"

            ]

        }

    }

}

引入ngx-echarts模块

在 app.modules.ts根模块中引入 NgxEchartsModule

// app.modules.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {NgxEchartsModule} from 'ngx-echarts'

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    NgxEchartsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

使用

app.component.ts

// app.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor() {}

  public chartOption={

      backgroundColor: '#2c343c',

      title: {

        text: 'Customized Pie',

        left: 'center',

        top: 20,

        textStyle: {

          color: '#ccc'

        }

      },

      tooltip: {

        trigger: 'item',

        formatter: "{a} <br/>{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.6)'

              }

            }

          },

          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;

          }

        }

      ]

  }

}

app.component.html

// app.component.html

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

app.component.css

// app.component.css

.chart {

    height: 400px;

}