前端开发中常常需要用到各种图表来展示数据，而 AmCharts 是一个强大的 JavaScript 图表库。但是，使用 AmCharts 的过程中会发现，其 API 及配置文件相对较为繁琐。而 tap-amcharts 这个 npm 包，可以让我们更加方便地使用 AmCharts，本文将为大家详细介绍如何使用 tap-amcharts 进行图表制作。
安装 tap-amcharts
使用 npm 安装 tap-amcharts：
npm install --save tap-amcharts
引入 tap-amcharts
在需要使用 tap-amcharts 的地方，可以使用如下的方式引入：
import AmCharts from "tap-amcharts";
使用 tap-amcharts 制作图表
柱状图
<div id="chartdiv"></div>
-- -------------------- ---- -------
----- ----- - ------------------------------ -
------- ---------
-------- --------
--------------- -
- ---------- ------ --------- ---- --
- ---------- -------- --------- ---- --
- ---------- -------- --------- ---- -
--
--------- --
-------------- -------------- ------------------
------------- ----------
------------ ----
------------- ----
------- ---------
------------- --------
---
---------------- ---------
---饼图
<div id="chartdiv"></div>
-- -------------------- ---- -------
----- ----- - ------------------------------ -
------- ------
-------- --------
--------------- -
- ---------- ------ -------- ---- --
- ---------- -------- -------- ---- --
- ---------- -------- -------- ---- -
--
------------- --------
------------- ----------
---------- -
---------------- ----
--
--------- -
---------- ----
-
---tap-amcharts API
tap-amcharts 封装了 AmCharts 的 API，并在其基础上进行了简化和优化。
makeChart
制作图表。
AmCharts.makeChart(div, options)
- 参数：
div-{ string | HTMLElement }- 包含图表的 DOM 元素。options-{ object }- 图表的配置文件。
updateChart
更新图表。
chart.updateChart(options)
- 参数：
options-{ object }- 图表的配置文件。
addListener
添加事件监听器。
chart.addListener(event, handler)
- 参数：
event-{ string }- 事件名称。如：clickGraphItem。handler-{ function }- 事件处理函数。
结语
tap-amcharts 可以让我们更加方便地使用 AmCharts 制作图表，而且在其基础上提供了封装的 API，使得代码更加简洁易读。希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607281e8991b448de99f