快速上手

本节内容为时间轴范式组件的接入使用文档。

安装

引入组件库依赖可选择以下两种方式。

npm

组件是通过内网 npm 仓库发布的，使用前请确保已设置好内网 npm 源的 host：

10.0.35.249  repositories.myhexin.com
10.0.35.249  repositories-public.myhexin.com

然后在你的项目中添加组件库依赖：

npm install --save thsc-datav-paradigm-timeline

cdn

如果是外网开发，可以直接引入构建的 JS 文件：

// umd
<script src="path/to/bundle.umd.min.js"></script>;
const timeline = new ThsDataVTimeline.Timeline(dom, option);

// esm
import { Timeline } from 'path/to/bundle.esm.min.js';
const timeline = new Timeline(dom, option);

CDN 资源

会同时提供压缩版本 (.min.js) 和未压缩版本 (.js)，前者为生产环境使用，后者可用于开发环境便于调试（还将提供相应的 sourcemap 文件）

---

点击查看历史版本（实时更新）

使用

要使用时间轴范式组件，请先将组件库依赖安装到项目，然后参考以下示例代码即可初始化一个组件实例：

import { Timeline } from 'thsc-datav-paradigm-timeline';

const timeline = new Timeline('#timeline', {
  data: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
  config: {
    animation: {
      intervalTime: 1e3,
    },
  },
});

// 利用事件订阅与图表实例同步状态
timeline.on('play', ({ type, index, timeData }) => {
  // 播放
  // chart.xxx();
});
timeline.on('pause', ({ type, index, timeData }) => {
  // 暂停
  // chart.xxx();
});
timeline.on('change', ({ type, index, timeData }) => {
  // 切换
  // chart.xxx();
});

时间轴组件与范式图表组件库相结合使用的实例：

更多信息请参考配置项文档和 APIs 文档。