Angular 項目中如何使用 ECharts

在有些使用 ECharts 庫的 Angular 項目中，一般除了安裝 npm 包以外，還會在 angular.json 中配置 「build.options.scripts」，將 「node_modules/echarts/dist/echarts.min.js」放入其中：

"projects": {
  "<project-name>": {
    "architect": {
      "build": {
        "options": {
          //other config
          "scripts": [
            "node_modules/echarts/dist/echarts.min.js"
          ]
        }
      }
    }
  }
}

而後在須要使用的 TypeScript 單元頂部聲明：

declare var echarts: any;

這樣的作法看起來「不太像」 TypeScript 的操做方式～

 

其實在使用 Angular 和 ECharts 的較新版本（ngx-echarts(ver >= 2.x)，ECharts (ver >= 3.x)）時，有更好的方式在 Angular 項目中引入 ECharts：

一、安裝 npm 包：

1 npm install echarts -S 2 npm install ngx-echarts -S 3 npm install @types/echarts -D

 

二、在 module （好比 app.module.ts）中引入模塊：

1 import { NgxEchartsModule } from 'ngx-echarts'; 2 @NgModule({ 3  imports: [ 4  ..., 5  NgxEchartsModule 6  ], 7 }) 8 export class AppModule { }

 

三、使用 ECharts：

1 import * as echarts from "echarts"; 2  
3 const echartsObject = echarts.init(document.getElementById("myChart"));

或者只導入必須的 API：

1 import { init as echartsInit } from "echarts"; 2  
3 const echartsObject = echartsInit(document.getElementById("myChart"));

 

參考

https://xieziyu.github.io/ngx-echarts/#/home
https://xieziyu.github.io/ngx-echarts/api-doc/

 

原文出處：https://www.cnblogs.com/Jaffray/p/10676127.html