npm 包 epoch-voyager 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

epoch-voyager 是一个开源的前端时间轴组件库，可以轻松创建时间轴、时间线和事件列表等组件。它基于 React 实现，提供了众多自定义选项，可以极大地提升开发效率和用户体验。

本文将介绍如何使用 epoch-voyager 创建时间轴、时间线和事件列表等组件，并提供详细的使用示例和指导意义，帮助读者更好地理解和掌握该库的使用方法。

安装

epoch-voyager 可以通过 npm 包管理器进行安装，命令如下：

npm install epoch-voyager --save

使用

Epoch-Voyager 提供了众多自定义选项，在创建组件实例时可以传递参数，以满足不同的需求。下面将介绍如何使用 epoch-voyager 创建时间轴、时间线和事件列表等组件。

创建时间轴

创建时间轴时，需要传递一个数据源数组（data），用于显示时间轴上的时间节点。数据源数组中每个元素都应包含一个时间戳（timestamp）和一个标题（title）。

-- -------------------- ---- -------
------ - -------- - ---- ----------------

----- ---- - -
  - ---------- ------------- ------ ---- ------- ---- --
  - ---------- ------------- ------ ------------- ---- --
  - ---------- ------------- ------ -------------- -------- ---- -
-

-------- ----- -
  ------ -
    --------- ----------- --
  --
-

上述代码将创建一个默认样式的时间轴，并在时间轴上显示“2021-01-01”、“2021-02-14”和“2021-03-08”三个时间节点。

创建时间线

创建时间线时，需要传递一个数据源数组（data），用于显示时间线上的时间节点。数据源数组中每个元素都应包含一个时间戳（timestamp）和一个标题（title）。

-- -------------------- ---- -------
------ - -------- - ---- ----------------

----- ---- - -
  - ---------- ------------- ------ ---- ------- ---- --
  - ---------- ------------- ------ ------------- ---- --
  - ---------- ------------- ------ -------------- -------- ---- -
-

-------- ----- -
  ------ -
    --------- ----------- --
  --
-

上述代码将创建一个默认样式的时间线，并在时间线上显示“2021-01-01”、“2021-02-14”和“2021-03-08”三个时间节点。

创建事件列表

创建事件列表时，需要传递一个数据源数组（data），用于显示事件列表中的事件。数据源数组中每个元素都应包含一个时间戳（timestamp）和一个标题（title）。

-- -------------------- ---- -------
------ - --------- - ---- ----------------

----- ---- - -
  - ---------- ------------- ------ ---- ------- ---- --
  - ---------- ------------- ------ ------------- ---- --
  - ---------- ------------- ------ -------------- -------- ---- -
-

-------- ----- -
  ------ -
    ---------- ----------- --
  --
-

上述代码将创建一个默认样式的事件列表，并在事件列表中显示“2021-01-01”、“2021-02-14”和“2021-03-08”三个事件。

自定义选项

epoch-voyager 提供了众多自定义选项，可以通过传递参数来自定义组件的行为和显示效果。下面是一些常用的自定义选项：

TimeAxis

参数	描述	类型	默认值
data	时间轴数据源	Array	[]
showLabel	是否显示时间轴节点的标题	Boolean	true
lineHeight	时间轴节点高度	Number	60
lineWidth	时间轴节点线条宽度	Number	2
dotSize	时间轴节点圆点大小	Number	8
lineColor	时间轴节点线条颜色	String	"#333"
dotColor	时间轴节点圆点颜色	String	"#333"
labelColor	时间轴节点标题颜色	String	"#333"
labelFontSize	时间轴节点标题字体大小	Number	14
startTime	时间轴开始时间	String/Number	null
endTime	时间轴结束时间	String/Number	null
timeFormat	时间戳格式化函数	Function	null
onNodeClick	时间轴节点点击事件处理函数	Function	null

TimeLine

参数	描述	类型	默认值
data	时间线数据源	Array	[]
showLabel	是否显示时间线节点的标题	Boolean	true
lineHeight	时间线节点高度	Number	60
lineWidth	时间线节点线条宽度	Number	2
dotSize	时间线节点圆点大小	Number	8
lineColor	时间线节点线条颜色	String	"#333"
dotColor	时间线节点圆点颜色	String	"#333"
labelColor	时间线节点标题颜色	String	"#333"
labelFontSize	时间线节点标题字体大小	Number	14
startTime	时间线开始时间	String/Number	null
endTime	时间线结束时间	String/Number	null
timeFormat	时间戳格式化函数	Function	null
onNodeClick	时间线节点点击事件处理函数	Function	null

EventList

参数	描述	类型	默认值
data	事件列表数据源	Array	[]
lineHeight	事件列表节点高度	Number	60
dotSize	事件列表节点圆点大小	Number	8
dotColor	事件列表节点圆点颜色	String	"#333"
labelColor	事件列表节点标题颜色	String	"#333"
labelFontSize	事件列表节点标题字体大小	Number	14
timeFormat	时间戳格式化函数	Function	null
onNodeClick	事件列表节点点击事件处理函数	Function	null

示例代码

-- -------------------- ---- -------
------ - -------- - ---- ----------------

----- ---- - -
  - ---------- ------------- ------ ---- ------- ---- --
  - ---------- ------------- ------ ------------- ---- --
  - ---------- ------------- ------ -------------- -------- ---- -
-

-------- ----- -
  ----- --------------- - ------- ----- -- -
    -------------------- ------- ------
  --

  ----- ---------- - ----------- -- -
    ----- ---- - --- ----------------
    ------ ---------------------------------------- - ----------------------
  --

  ------ -
    --------- 
      -----------
      ----------------
      ---------------
      -------------
      ------------
      -------------------
      ------------------
      -----------------
      ------------------
      -------------- -----------------------------
      ------------ -----------------
      -----------------------
      -----------------------------
    --
  --
-

上述代码将创建一个自定义样式的时间轴，并在时间轴上显示“2021-01-01”、“2021-02-14”和“2021-03-08”三个时间节点。时间轴节点高度为 80，线条宽度为 4，圆点大小为 12，线条颜色为红色，圆点颜色为红色，标题颜色为黑色，标题字体大小为 16。开始时间为 2020 年 12 月 1 日，结束时间为当前时间，时间戳格式化函数为 formatTime，节点点击事件处理函数为 handleNodeClick。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecfc9