# TimeScale

**Repository Path**: monad_c/time-scale

## Basic Information

- **Project Name**: TimeScale
- **Description**: 时间轴进度条开源鸿蒙组件，支持缩放、滑动惯性动画、自定义进度条大小颜色等功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-27
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TimeScale

## 简介

- 时间轴进度条开源鸿蒙组件，支持缩放、滑动惯性动画、自定义进度条大小颜色等功能。
- 使用有任何疑问或建议,欢迎加群讨论,QQ交流群：1041332978

## 引入依赖

```yaml
ohpm install @lyzone/timescale
```

## API

| 参数            | 说明                                 | 类型                     | 默认值        |
| --------------- | ------------------------------------ | ------------------------ | ------------- |
| bgColor         | 进度条背景色                         | ResourceColor            | Color.White   |
| timeScaleHeight | 时间轴高度(单位:vp)                  | number                   | 70            |
| showPointer     | 是否显示指针                         | boolean                  | true          |
| currentTime     | 当前选中时间(13位时间戳，单位：毫秒) | number                   | 无默认值,必传 |
| dataList        | 进度条数据渲染源                     | TimeItem[]               | []            |
| colorMap        | 渲染颜色数组                         | Record<string, Resource> | {}            |
| pointerMoveEnd  | 指针停止事件                         | () => void               | void          |

## 示例代码

```ts
import { TimeItem, TimeScale } from '@lyzone/timescale'
import { promptAction } from '@kit.ArkUI';
import dayjs from '@mui/dayjs'

@Entry
@Component
struct Index {
  @State time: number = new Date().getTime()
  // 渲染数据
  @State dataList: TimeItem[] = [];
  @State colorMap: Record<string, Resource> = {} as Record<string, Resource>

  aboutToAppear() {
    let testTime = this.time - 60 * 60 * 1000;
    let duration = 40 * 60 * 1000;
    for (let i = 0; i < 100; i++) {
      let item = new TimeItem();
      item.timestamp = testTime + i * duration;
      item.duration = duration;
      if ((i % 2) == 0) {
        item.type = 1;
      }
      if (item.type == 1) {
        // 设置进度条位置、高度
        item.blockOrigin = 0.2
        item.blockHeight = 0.6
      } else {
        item.blockOrigin = 0.3
        item.blockHeight = 0.4
      }
      this.dataList.push(item);
    }
    // 设置进度条颜色
    this.colorMap[0] = $r('app.color.record_color')
    this.colorMap[1] = $r('app.color.car_alarm')

  }

  build() {
    Column({ space: 10 }) {
      Text(dayjs(this.time).format("YYYY-MM-DD HH:mm:ss"))
        .fontColor(Color.Black)
        .padding(10)
        .borderRadius(10)
        .backgroundBlurStyle(BlurStyle.Thin,
          { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT })
      TimeScale({
        bgColor: Color.White,
        timeScaleHeight: 70,
        showPointer: true,
        currentTime: this.time,
        dataList: this.dataList,
        colorMap: this.colorMap,
        pointerMoveEnd: () => {
          promptAction.showToast({ message: "指针停止：" + this.time })
        }
      })
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor("#eee")
  }
}
```

## 贡献代码

- 使用过程中发现任何问题都可以提 `Issue`，也欢迎您发 `PR`
- 仓库地址: https://gitee.com/monad_c/time-scale.git
- QQ交流群：1041332978