# ecg

**Repository Path**: sen-project/ecg

## Basic Information

- **Project Name**: ecg
- **Description**: Uniapp ECG心电图组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-10-30
- **Last Updated**: 2025-11-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Uniapp ECG心电图组件

基于uniapp Vue2心电图绘制组件，支持自动滑动展示和实时绘制刷新两种模式。
![输入图片说明](image.png)

## 功能特性

- ✅ **自动滑动展示模式** - 模拟心电图数据自动滚动
- ✅ **实时绘制刷新模式** - 模拟实时数据添加和刷新
- ✅ **网格背景** - 专业的医疗级网格显示
- ✅ **响应式设计** - 适配不同屏幕尺寸
- ✅ **触摸控制** - 支持移动端触摸操作

## 使用方法

### 1. 组件引入

将 `ecg-chart.vue` 文件复制到你的 uniapp 项目 `components` 目录下。

### 2. 页面中使用

```vue
<template>
  <view>
    <ecg-chart></ecg-chart>
  </view>
</template>

<script>
import EcgChart from '@/components/ecg-chart.vue'

export default {
  components: {
    EcgChart
  }
}
</script>
```

### 3. 自定义配置

可以通过 props 自定义配置（可选）：

```vue
<ecg-chart 
  :canvas-width="375" 
  :canvas-height="200"
  :max-data-points="100"
  :display-points="50"
/>
```


### 核心算法

**数据生成算法：**
```

// Uniapp版本
const value = Math.sin(i * 0.1) * 50 + Math.sin(i * 0.3) * 20 + (Math.random() - 0.5) * 10;
```

**绘图坐标转换：**
```
// Uniapp: ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke()
```

## 平台兼容性

- ✅ **H5** - 完全支持
- ✅ **微信小程序** - 完全支持
- ✅ **支付宝小程序** - 完全支持
- ✅ **百度小程序** - 完全支持
- ✅ **QQ小程序** - 完全支持
- ✅ **字节跳动小程序** - 完全支持
- ✅ **App (iOS/Android)** - 完全支持

## 样式定制

组件使用 scoped CSS，可以通过以下方式自定义样式：

```css
/* 自定义画布大小 */
.ecg-canvas {
  width: 100%;
  height: 500rpx;
}

/* 自定义按钮样式 */
.control-btn {
  background-color: #007AFF;
  border-radius: 20rpx;
}
```

## 注意事项

1. **canvas-id** 必须唯一，如果页面有多个心电图组件，需要传入不同的canvas-id
2. 在小程序中，canvas的宽高需要通过style属性设置
3. 组件已适配不同屏幕密度，无需额外处理