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} 
{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

"chartOption" class="chart">div> 

app.component.css

// app.component.css

.chart {
    height: 400px; }