# StepLineCharts

**Repository Path**: scenario-samples/step-line-charts

## Basic Information

- **Project Name**: StepLineCharts
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本示例通过导入mpchart库绘制步数折线统计图组件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-11
- **Last Updated**: 2025-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 步数折线图显示组件demo

## 介绍

本示例通过导入mpchart库绘制步数折线统计图组件。

## 效果预览

![image](screenshots/ScreenShot.gif)

## 约束与限制

1.仅支持标准系统上运行，支持设备：华为手机或运行在DevEco Studio上的华为手机设备模拟器。  
2.支持 API Version 12 Release及以上版本。  
3.支持 HarmonyOS 5.0.0 Release SDK及以上版本。  
4.需要使用DevEco Studio 5.0.0 Release及以上版本进行编译运行。

## 使用说明

点击选择显示模式，点击按钮进入折现图。

## 实现思路

1. 在主页选择显示模式
```typescript
TextPickerDialog.show({
  //滑动弹窗选择器，封装函数更好
  range: this.timeStyleList,
  selected: this.select,
  disappearTextStyle: { color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } },
  textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal } },
  selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } },
  onAccept: (value: TextPickerResult) => {
    // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
    this.select = value.index
    hilog.info(0x0000, 'TextPickerDialog:onAccept()' + JSON.stringify(value), '')
    this.timeStyle = value.value.toString(); //刷新状态
  }
})
```
2. 通过导入的LineChart绘制折线图。
```typescript
LineChart({ model: this.model })
          .width('100%')
          .height('100%')
          .margin({ top: '10%', bottom: '10%' })
```
## 工程目录

```
entry/src/main/ets/
|---pages
|   |---Index.ets                            // 主页    
|   |---LineChart.ets              
```

## 模块依赖

"@ohos/mpchart": "^3.0.2"


## ChangeLog

| 修改内容   | 时间         |
|--------|------------|
| 第一次提交  | 2025.03.11 |


## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">