angular6.x 引入echarts

由於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; }