简介
@beisen/highcharts 是使用 Highcharts 图表库封装的一款 React 组件库。Highcharts 是一款非常流行的 JavaScript 数据可视化库，它的特点是兼容性好、图表类型丰富、可定制化程度高等。
使用 @beisen/highcharts 这个组件库，可以快速地在 React 项目中添加 Highcharts 图表，并兼容 React 中的组件化方式，方便进行二次开发和定制化。
安装
在项目中使用 npm 进行安装：
npm install @beisen/highcharts
安装完成后，通过 import 或 require 对组件进行引入：
import Highcharts from "@beisen/highcharts";
使用
@beisen/highcharts 的使用方式非常简单，只需要在 React 组件中引入 Highcharts 组件，然后通过 props 传入数据即可。下面是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------------
------ ------- -------- ------------ -
----- ------- - -
------ -
----- ------
--
------ -
----- ------ -------------
--
------ -
----------- ---------- ---------- -----------
--
------ -
------ -
----- ------ -------
--
--
------- -
-
----- -------
----- --- -- ---
--
-
----- -------
----- --- -- ---
--
--
--
------ -
----------- ----------------- --
--
-上面的示例展示了一个简单的柱状图，其中 options 对象中定义了图表的类型、标题、横轴、纵轴、数据等信息。
API
@beisen/highcharts 组件的 props 定义如下：
options
- 类型：object
- 描述：Highcharts 配置项对象。具体用法可参考 Highcharts 官方文档。
highcharts
- 类型：object
- 描述：Highcharts 对象。如果你有自己的 Highcharts 库，可以通过这个 props 传入。如果不传入，则默认使用 @beisen/highcharts 内置的 Highcharts 库。
highstock
- 类型：bool
- 描述：是否使用 Highstock 库。默认为 false。如果设置为 true，则使用 Highstock 库渲染图表。
highmaps
- 类型：bool
- 描述：是否使用 Highmaps 库。默认为 false。如果设置为 true，则使用 Highmaps 库渲染地图。
callback
- 类型：function
- 描述：Highcharts 加载完成后的回调函数。可以在这个回调函数中进行一些自定义操作，例如设置 chart 对象等。函数参数为 Highcharts 对象。
lazyLoad
- 类型：bool
- 描述：是否启用懒加载模式。默认为 false。如果设置为 true，则在组件挂载后才会动态加载 Highcharts 库，以减少初始加载时间。
示例
以下是一些常用的 Highcharts 图表类型以及它们的配置项代码示例。
柱状图
-- -------------------- ---- -------
----- ------- - -
------ -
----- ------
--
------ -
----- ------ -------------
--
------ -
----------- ---------- ---------- -----------
--
------ -
------ -
----- ------ -------
--
--
------- -
-
----- -------
----- --- -- ---
--
-
----- -------
----- --- -- ---
--
--
--
------ -
----------- ----------------- --
--折线图
-- -------------------- ---- -------
----- ------- - -
------ -
----- -------
--
------ -
----- -------- ------- -------------
--
--------- -
----- -------- ------------------
--
------ -
----------- -
------
------
------
------
------
------
------
------
------
------
------
------
--
--
------ -
------ -
----- ------------ ------
--
--
------------ -
----- -
----------- -
-------- -----
--
-------------------- ------
--
--
------- -
-
----- --------
----- -
----
----
----
-----
-----
-----
-----
-----
-----
-----
-----
----
--
--
-
----- ---- ------
----- -
-----
----
----
-----
-----
-----
-----
-----
-----
-----
----
----
--
--
-
----- ---------
----- -
-----
----
----
----
-----
-----
-----
-----
-----
----
----
----
--
--
-
----- ---------
----- -
----
----
----
----
-----
-----
-----
-----
-----
-----
----
----
--
--
--
--
------ -
----------- ----------------- --
--饼图
-- -------------------- ---- -------
----- ------- - -
------ -
----- ------
--
------ -
----- -------- ------ ------ -- -------- ------
--
------- -
-
----- ---------
------------- -----
----- -
-
----- ---------
-- ------
------- -----
--------- -----
--
-
----- --------- ----------
-- ------
--
-
----- ----------
-- ------
--
-
----- -------
-- -----
--
-
----- ---------
-- -----
--
-
----- ------ ----------
-- -----
--
-
----- --------
-- ----
--
-
----- -----
-- ----
--
-
----- --------
-- -----
--
--
--
--
--
------ -
----------- ----------------- --
--结语
本文介绍了 @beisen/highcharts 组件的安装和使用方式，并提供了一些常用的 Highcharts 图表类型的示例。
@beisen/highcharts 这个组件库能够帮助我们快速地在 React 项目中添加 Highcharts 图表，并提供了丰富的 props 属性来方便我们进行二次开发和定制化。
更多 Highcharts 相关的内容和使用方法，可以参考 Highcharts 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac09b5cbfe1ea0610916