配置项

本节内容为时间轴范式组件的配置项文档。

初始化时间轴实例时需要传递配置项对象。示例：

const timeline = new Timeline(dom, option);

实时调试预览

主题

`theme`

类型 typeof THEME[keyof typeof THEME]（见主题配置）

/** 主题 */
export const THEME = {
  /** 移动端 */
  MOBILE: 'mobile',
  /** v0.0.6+ 移动端-夜间版 */
  MOBILE_DARK: 'mobile-dark',
  /** v0.0.5+ 移动端-外部显示刻度值（刻度值上下布局） */
  MOBILE_WITH_VALUE_OUTER: 'mobile-withValueOuter',
  /** v0.0.6+ 移动端-外部显示刻度值（刻度值上下布局）-夜间版 */
  MOBILE_WITH_VALUE_OUTER_DARK: 'mobile-withValueOuter-dark',
  /** v0.2.0+ 移动端-窄版 */
  MOBILE_COMPACT: 'mobile-compact',
  /** v0.2.0+ 移动端-窄版-夜间版 */
  MOBILE_COMPACT_DARK: 'mobile-compact-dark',
  /** v0.2.0+ 移动端-窄版-外部显示刻度值（刻度值上下布局） */
  MOBILE_COMPACT_WITH_VALUE_OUTER: 'mobile-compact-withValueOuter',
  /** v0.2.0+ 移动端-窄版-外部显示刻度值（刻度值上下布局）-夜间版 */
  MOBILE_COMPACT_WITH_VALUE_OUTER_DARK: 'mobile-compact-withValueOuter-dark',
  /** v0.2.0+ 移动端-简单版（无操作按钮） */
  MOBILE_SIMPLE: 'mobile-simple',
  /** v0.2.0+ 移动端-简单版（无操作按钮）-夜间版 */
  MOBILE_SIMPLE_DARK: 'mobile-simple-dark',
  /** PC 端 */
  PC: 'pc',
  /** PC 端-夜间版 */
  PC_DARK: 'pc-dark',
} as const;

默认值 mobile

主题名称。

数据

`data`

类型
- (string | number)[] (常规模式)
- { type: 'main' | 'sub', value: string | number }[] (主次刻度模式)

时间轴数据。

示例数据（常规模式）：

timeline-regular

示例数据（主次刻度模式）：

{
  data: [
    {
      // 刻度类型，"main" - 主要刻度 | "sub" - 次要刻度
      type: 'main',
      value: 2013,
    },
    {
      type: 'sub',
      value: 2014,
    },
    {
      type: 'sub',
      value: 2015,
    },
    {
      type: 'main',
      value: 2016,
    },
    {
      type: 'sub',
      value: 2017,
    },
    {
      type: 'sub',
      value: 2018,
    },
    {
      type: 'main',
      value: 2019,
    },
    {
      type: 'sub',
      value: 2020,
    },
    {
      type: 'sub',
      value: 2021,
    },
    {
      type: 'main',
      value: 2022,
    },
  ],
}

timeline

时间轴配置

`config`

时间轴配置。

轴

`config.axis`

轴配置。

`config.axis.background`

类型 { style?: CSSStyleDeclaration }

轴线。

其中，style 配置可用来设置自定义样式：

type Style = CSSStyleDeclaration &
  Record<
    ':hover' | ':active' | '::before' | '::after' | ':disabled',
    CSSStyleDeclaration
  >;

示例：

{
  style: {
    // 这是默认样式
    backgroundColor: 'transparent',
    // 这是 hover 状态的样式（active、disabled、before、after 同理）
    ':hover': {
      backgroundColor: 'red',
    }
  }
}

`config.axis.progressRange`

类型 { style?: CSSStyleDeclaration }

v0.0.2+

区间进度条（配置了 dataIndexRange 后自动显示）。

`config.axis.progress`

类型 { show: boolean; style?: CSSStyleDeclaration; }

累积进度条。

`config.axis.tickLine`

注意

次要（sub）刻度线默认会进行重叠检测，如果当前次要刻度线与前一个显示的次要刻度线之间**间距小于 4 像素（配置 minSpace）**时则认为发生重叠，会隐藏当前次要刻度线。

类型

{
  /** 主刻度 */
  main?: {
    style?: CSSStyleDeclaration;
  };
  /** 次要刻度 */
  sub?: {
    style?: CSSStyleDeclaration;
    /** v0.3.0+ 两个刻度之间最小间距(像素宽度)，小于时隐藏次要刻度线，默认为 4 像素 */
    minSpace?: number;
  };
}

刻度线。

`config.axis.tickValue`

注意

刻度值标签文本会默认（配置 hideOverlap）进行重叠检测，如果当前标签文本与前一个显示的标签文本之间**间距小于 8 像素（配置 minSpace）**时则认为发生重叠，会隐藏当前标签文本。

类型

{
  style?: CSSStyleDeclaration;
  /** 刻度值（自定义） */
  formatter?: (timeData: TimeDataItem, index: number) => string;
  /** v0.3.0+ 两个标签文本之间最小间距(像素宽度)，小于时认为发生重叠则隐藏，默认为 8 像素 */
  minSpace?: number;
  /** v0.3.0+ 是否隐藏重叠的标签，默认为 true */
  hideOverlap?: boolean;
}

刻度值。

`config.axis.marker`

类型 { style?: CSSStyleDeclaration }

滑块按钮。

`config.axis.tooltip`

类型

{
  style?: CSSStyleDeclaration;
  /** v0.1.1+ 箭头样式 */
  arrowStyle?: CSSStyleDeclaration;
  /** v0.1.1+ 文本样式 */
  textStyle?: CSSStyleDeclaration;
  /** 提示（自定义） */
  formatter?: (timeData: TimeDataItem, index: number) => string;
}

提示框。

`config.axis.action`

类型

{
  /** 禁止轴上的点击交互 */
  clickDisabled?: boolean;
  /** v0.1.0+ 开启拖动滑块实时触发 change 事件 */
  enableDragChange?: boolean;
  /** v0.2.7+ 索引区间交互（配置了 dataIndexRange 后有效） */
  dataIndexRange?: {
    /** 禁止区间起始位置的拖动按钮 */
    disableStartBtn?: boolean;
    /** 禁止结束位置的拖动按钮改变索引区间 */
    disableEndBtnChangeRange?: boolean;
  };
}

交互配置。

`config.axis.unsupportedText`

v0.5.0+

类型

{
  style?: CSSStyleDeclaration;
  /** 自定义文本内容 */
  content?: string;
}

单条数据场景下的不支持播放提示，参考示例。

操作栏

`config.operation`

操作栏配置。

`config.operation.playButton`

类型

{
  style?: CSSStyleDeclaration;
  /** v0.3.0+ 用来作为按钮的 title 属性，鼠标悬浮显示 */
  text?: string;
}

播放按钮。

`config.operation.replayButton`

类型

{
  style?: CSSStyleDeclaration;
  text?: string;
}

v0.3.0+

重新播放按钮。

`config.operation.pauseButton`

类型

{
  style?: CSSStyleDeclaration;
  /** v0.3.0+ 用来作为按钮的 title 属性，鼠标悬浮显示 */
  text?: string;
}

暂停按钮。

`config.operation.previousButton`

类型

{
  style?: CSSStyleDeclaration;
  /** 按钮文本，同时也会作为按钮的 title 属性 */
  text?: string;
}

上一期按钮。

`config.operation.nextButton`

类型

{
  style?: CSSStyleDeclaration;
  /** 按钮文本，同时也会作为按钮的 title 属性 */
  text?: string;
}

下一期按钮。

`config.operation.speed`

类型

{
  /** 是否开启 */
  enable: boolean;
  /** 按钮样式 */
  style?: CSSStyleDeclaration;
  /** 按钮文本样式 */
  textStyle?: CSSStyleDeclaration;
  /** 按钮右上角标签样式 */
  labelStyle?: CSSStyleDeclaration;
  /** 弹窗菜单背景遮罩样式 */
  menuListBackgroundMaskStyle?: CSSStyleDeclaration;
  /** 弹窗菜单列表样式 */
  menuListStyle?: CSSStyleDeclaration;
  /** 弹窗菜单列表项样式 */
  menuListItemStyle?: CSSStyleDeclaration;
  /** 弹窗菜单列表项文本样式 */
  menuListItemTextStyle?: CSSStyleDeclaration;
}

v0.2.0+

倍速设置。

动画

`config.animation`

动画配置。

`config.animation.intervalTime`

类型 number

动画播放单个周期持续时长（毫秒）。

`config.animation.speed`

类型 '0.5' | '0.75' | '1' | '1.25'| '1.5'| '2'
默认值 '1.0'

v0.2.0+

播放速度。

`config.animation.causeBy`

信息

默认所有交互情况都触发动画，连续两次交互会等待前一周期（时间配置 intervalTime）动画播放完毕再触发 change 事件。

类型 ('apiUpdate' | 'apiSetIndexRange' | 'play' | 'previous' | 'next' | 'axisClick' | 'axisMarkerDrag')[]

v0.2.1+

配置在什么交互情况下要触发动画，不触发动画的交互可以立即触发 change 事件，不用等待前一周期动画播放完毕。

其它

`config.dataIndex`

类型 number

起始位置的数据索引。

`config.dataIndexRange`

类型 [number, number]

v0.0.2+

数据索引区间限制开闭 [,)。

实时调试预览​

主题​

theme​

数据​

data​

时间轴配置​

config​

轴​

config.axis​

config.axis.background​

config.axis.progressRange​

config.axis.progress​

config.axis.tickLine​

config.axis.tickValue​

config.axis.marker​

config.axis.tooltip​

config.axis.action​

config.axis.unsupportedText​

操作栏​

config.operation​

config.operation.playButton​

config.operation.replayButton​

config.operation.pauseButton​

config.operation.previousButton​

config.operation.nextButton​

config.operation.speed​

动画​

config.animation​

config.animation.intervalTime​

config.animation.speed​

config.animation.causeBy​

其它​

config.dataIndex​

config.dataIndexRange​