简介：
aimia-newpro-highcharts 是一个基于 Highcharts 的 npm 包，提供了一些扩展的配置项和组件，使得开发者使用 Highcharts 更加方便。在本篇文章中，我们将会教你如何使用 aimia-newpro-highcharts 去制作一些常见的图表。
安装
在使用 aimia-newpro-highcharts 之前，我们需要将其安装到我们的项目中，操作如下：
npm install aimia-newpro-highcharts --save
基础配置
安装好 aimia-newpro-highcharts 后，我们需要先进行一些基础配置。首先，在我们的 js 文件中引入 Highcharts 和 aimia-newpro-highcharts：
import Highcharts from 'highcharts'; import AimiaNewproHighcharts from 'aimia-newpro-highcharts'; AimiaNewproHighcharts(Highcharts);
然后我们需要设置全局的样式，可以在 css 文件中进行设置：
-- -------------------- ---- ------- ------------------ -------------------- - ------------ ---------- ------- - ----------------- ------------------- - ---------- ----- ------ -------- -
注意：本教程中的样式仅仅是一个范例，实际使用时，样式应该根据具体需求进行相应的调整。
返回中文配置
由于 Highcharts 本身是一个国外的库，因此需要进行相应的本地化处理，才可以使用中文。我们可以通过如下方式进行配置：
-- -------------------- ---- -------
----- ------- - -
----- -
---------- -------
--------------- ----------
------------- ----
------------- ----
-------- ---------
------------------- ---------
----------- -------
------------ --- --- ----
------------- --- ---- ----
------------ --- --- -----
------------ --- --- ----
------------ --- --- ----
------------ --- --- ----
--------------- -------
--------- --------
------------ -- ---------- ----- ----
-
--
在初始化 Highcharts 的时候，通过 options 参数传入这个配置对象即可。
-- -------------------- ---- -------
----- ----- - ----------------------------- ----------------- -------- -
------ -
----- ------
--
------ --
----------- --- --- -- --- -- --- -- --- -- ----
---
------ --
------ -
----- ---------
-
---
------- --
----- ------
----- ----- ---- ---- ---- ----
--
----
常见图表
基础配置完成后，我们可以制作一些常见的图表。
饼图
-- -------------------- ---- -------
----- ----- - ----------------------------- ----------------- -------- -
------ -
----- -----
--
------ -
----- --------
--
-------- -
-------- -----
--
-------- -
------------ --------------- -------------------------------
--
------------ -
---- -
----------------- -----
------- ----------
----------- -
-------- -----
------- --------------------- ---------------------- ---
------ -
------ ----------------- -- ----------------------------------- -- -------
-
--
------------- ----
-
--
------- --
----- ---------
------------- -----
----- --
----- -----
-- ----
-- -
----- -----
-- ----
-- -
----- -----
-- ----
-- -
----- -----
-- ----
--
--
----
柱状图
-- -------------------- ---- -------
----- ----- - ----------------------------- ----------------- -------- -
------ -
----- --------
--
------ -
----- ------
--
------ -
----------- ------ ----- ----- ----- ----- -----
--
------ -
------ -
----- --------
-
--
-------- -
------------- ------ --------------------------------------------------
------------ -------- ----------------------------------------------------- ------ -
---- ---------------------------------- -----------------
------------- -----------
------- -----
-------- ----
--
------------ -
------- -
------------ -
-
--
------- --
----- -------
----- ------ ----- ----- ----- ----- -----
-- -
----- -------
----- ------ ----- ----- ----- ----- -----
-- -
----- ------
----- ------ ----- ----- ----- ----- -----
--
----
以上就是我们关于 aimia-newpro-highcharts 的使用教程。希望可以对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564b281e8991b448e1805