前言
近年来，可视化图表的应用越来越广泛。而 echarts 作为一款开源的可视化图表库，被广泛地应用于各个领域。为了更好地将其应用于 Angular 项目中，有人开发了一个 npm 包——yofc-ng-echarts。本文将介绍如何使用该包。
安装
yofc-ng-echarts 可以直接通过 npm 安装，命令如下：
npm install yofc-ng-echarts --save
准备工作
在开始使用 yofc-ng-echarts 之前，我们需要引入 echarts 的依赖。可以通过以下命令安装 echarts：
npm install echarts --save
然后在项目中引入 echarts：
<script src="/assets/echarts.min.js"></script>
使用
接下来，我们就可以愉快地使用 yofc-ng-echarts 了。
模块引入
在 Angular 中，我们需要将 yofc-ng-echarts 作为一个模块引入。在 app.module.ts 中，引入 yofc-ng-echarts：
-- -------------------- ---- -------
------ - --------------- - ---- ------------------
-----------
-------- -
-- ---
----------------
--
-- ---
--
------ ----- --------- - -在组件中使用
要在组件中使用 yofc-ng-echarts，需要在组件的 HTML 模板中引入组件：
<yofc-echarts [option]="chartOption"></yofc-echarts>
其中，[option] 属性是一个 echarts 的配置项，类似于以下示例：
-- -------------------- ---- -------
----------- - -
------ -
----- -----------
----- ------- ------ ------ ------ ------ ------ ------
--
------ -
----- -------
--
------- --
----- ----- ---- ---- ---- ----- ----- ------
----- ------
--
--配置
yofc-ng-echarts 支持以下配置：
属性
option（配置项）：该属性接收 echarts 的配置项。theme（主题）：可设置 echarts 主题，具体主题可以在 echarts 官方文档 中查看。例如：
<yofc-echarts [option]="chartOption" theme="vintage"></yofc-echarts>
方法
yofc-ng-echarts 还提供了一些方法，方便我们使用：
getECharts(): 获取 echarts 实例；getInstance(): 获取拓展的 yofc-ng-echarts 实例，具有以下方法：resize(): 重置图表大小；showLoading(): 显示加载状态；hideLoading(): 隐藏加载状态。
示例代码
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- ------------
--------- -
------------- ---------------------- -------------------------------
--
--
------ ----- -------------- ---------- ------ -
----------- - -
------ -
----- -----------
----- ------- ------ ------ ------ ------ ------ ------
--
------ -
----- -------
--
------- --
----- ----- ---- ---- ---- ----- ----- ------
----- ------
--
--
------------- - -
---------- -
-
-总结
yofc-ng-echarts 是一个非常方便的 echarts 包，使用它可以很方便地将 echarts 使用到 Angular 项目中。希望本文的介绍对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572db81e8991b448e9112