前言
前端数据可视化越来越重要，而 Echarts 作为国内较为流行的数据可视化工具库，在各类可视化场景中都有广泛的使用。而 ngx-echarts 这个 npm 包则是集成了 Echarts 和 Angular 的开箱即用解决方案，它能够在 Angular 应用程序中简便地使用 Echarts 进行可视化编程。
本文将详细介绍如何使用 ngx-echarts ，学习其核心的几个组件，并附上示例代码和详细说明。
安装
使用 npm 包管理器来安装 ngx-echarts ：
npm install ngx-echarts echarts
其中 echarts 是 ngx-echarts 的依赖项，我们必须同时安装它。同时，确保 Angular 的版本不低于 7.0，ngx-echarts 不支持 Angular 6。
核心组件
ngx-echarts 在 Angular 应用程序中提供了一些核心组件来支持数据可视化的编程。核心组件主要是为了让使用者更方便地进行 Echarts 图表的绘制和操作。
ngx-echarts
ngx-echarts 组件是 ngx-echarts 包的核心组件，它是一个 Angular 元素，可以在模板中添加。例如：
<ngx-echarts [options]="options" [loading]="loading"></ngx-echarts>
EChartsOption
EChartsOption 是 ngx-echarts 方便了 Echarts 配置的核心配置数据类型。例如：
import { EChartsOption } from 'ngx-echarts/lib/ngx-echarts.directive';
options: EChartsOption;这里直接先将它的使用方式说明，在后面配合 ngx-echarts 使用的时候，对这一数据类型进行详细说明。
EChartsService
EChartsService 是 ngx-echarts 提供的一个可注入的服务，它提供了不同的方法，可以处理 Echarts 图表的初始化、更新和销毁等操作。
例如，我们可以在定义组件的构造函数时注入 EChartsService 服务，并使用它来管理 Echarts 图表的生命周期：
constructor(private echartsService: EChartsService) { }
ngAfterViewInit() {
const echartsInstance = this.echartsService.init(this.elementRef.nativeElement.querySelector('div'));
echartsInstance.setOption(this.options);
}示例代码
下面是一个简单示例，它演示了如何使用 ngx-echarts 组件来绘制一个简单的柱形图。
HTML 代码
在模板中添加 ngx-echarts 组件，使用 EChartsOption 来配置图表：
<ngx-echarts [options]="options" style="height: 300px;"></ngx-echarts>
TypeScript 代码
在 TypeScript 代码中使用 EChartsOption 配置图表：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- ----------------------------------------
------------
--------- ----------------
--------- -
------------ ------------------- -------------- ----------------------
--
--
------ ----- ----------------- ---------- ------ -
-------- --------------
------------- - -
----------- ---- -
------------ - -
------ -
----- -----------
----- ------- ------ ------ ------ ------ ------ ------
--
------ -
----- -------
--
------- --
----- ----- ---- ---- ---- ----- ----- ------
----- -----
--
--
-
-小结
本文介绍了 ngx-echarts 的安装方式和常见的核心组件，对于初次接触 ngx-echarts 的开发者来说，如果在实际开发中遇到问题，可以通过 ngx-echarts 的文档或社区提供的支持解决问题。同时，为了更好地学习和使用 ngx-echarts ，建议在实际项目开发之前，先进行练手和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194525