正文
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：
1、安装 npm 包：
npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D
2、在 module （比如 app.module.ts）中引入模块：
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
imports: [
...,
NgxEchartsModule
],
})
export class AppModule { }
3、使用 ECharts：
import * as echarts from "echarts"; const echartsObject = echarts.init(document.getElementById("myChart"));
或者只导入必须的 API：
import { init as echartsInit } from "echarts"; const echartsObject = echartsInit(document.getElementById("myChart"));
参考
https://xieziyu.github.io/ngx-echarts/#/home
https://xieziyu.github.io/ngx-echarts/api-doc/
