# 页面组件：时间轴

来源快照：`result_data_new_260518.json`

- 来源 ID：`1967652688155970997`
- 模块：低代码平台e-builder
- 目录：专题学习 - 功能点专题 - 页面图表
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.场景说明**

**  
**

以时间为坐标展示事件的发展历程或任务进度，比如：以时间为坐标来展示党建新闻的发布历程

效果展示：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709826221375495&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**  
**

**2.   功能简介**

**  
**

上述场景可以使用页面设计中的时间轴组件来实现，时间轴组件具有以下四个特点：

1、内容来源支持：数据源、手动添加两种方式

2、内容来源为数据源时支持调整显示条数、启用分页、设置条件等操作

3、支持纵向、横向显示

4、坐标显示方式：分组、排列两种方式

5、支持开启未读、反馈标识

  


**3.操作说明**

**  
**

****

内容来源为数据源

1、选中数据展示类组件时间轴，拖拽到页面编辑器中，选择内容来源为数据源，选择坐标、设置内容

  


**![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709830533120007&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)**

  


2、分页条数默认为10，可以自定义调整条数，如果设置为空默认显示100条数据  


  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709835036917764&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3、启用分页：打比方分页条数为5，默认显示是5条数据，每次点击加载更多就多显示5条数据

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709835036917793&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


 4、设置条件：设置条件之后会根据设置的条件显示数据

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709839295651873&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


5、坐标显示方式支持分组或排列

        ![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709843616522248&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


6、点击事件，添加时间，选择点击每一条数据，配置链接地址

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709847829544964&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


7、可开启未读、反馈标识，录入数据用户默认是已读，其他用户显示未读标识，点击查看后未读标识不显示

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709847829544974&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


内容来源为手动添加

1、选中数据展示类组件时间轴，拖拽到页面编辑器中，选择内容来源为手动添加，填写坐标以及内容

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709847785660462&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2、默认三个坐标，可点击添加按钮进行添加

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709852209283096&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


时间轴拥有多种组件样式，默认为纵向-翠绿，可点击组件，更换组件样式

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157709856419479554&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
