当前位置：首页 > VUE

vue实现心电图

2026-01-07 22:44:10VUE

Vue 实现心电图效果

在 Vue 中实现心电图效果通常需要结合 Canvas 或 SVG 进行动态绘图，模拟心电图数据的实时变化。以下是两种实现方式的核心思路和代码示例：

使用 Canvas 绘制动态心电图

准备画布 在 Vue 组件的模板中添加 Canvas 元素，并设置宽度和高度：
```
<template>
  <canvas ref="ecgCanvas" width="800" height="200"></canvas>
</template>
```

初始化绘图环境 在 mounted 生命周期中获取 Canvas 上下文，并设置初始样式：

mounted() {
  const canvas = this.$refs.ecgCanvas;
  this.ctx = canvas.getContext('2d');
  this.ctx.strokeStyle = '#00ff00';
  this.ctx.lineWidth = 2;
}

模拟心电图数据 生成模拟心电图数据（如正弦波叠加噪声）：

generateData() {
  const points = [];
  for (let i = 0; i < 100; i++) {
    const x = i * 8;
    const y = 100 + Math.sin(i * 0.2) * 30 + Math.random() * 10;
    points.push({ x, y });
  }
  return points;
}

动态绘制折线 使用 requestAnimationFrame 实现动画效果：

vue实现心电图

drawWave() {
  this.ctx.clearRect(0, 0, 800, 200);
  const data = this.generateData();

  this.ctx.beginPath();
  this.ctx.moveTo(data[0].x, data[0].y);
  data.slice(1).forEach(point => {
    this.ctx.lineTo(point.x, point.y);
  });
  this.ctx.stroke();

  requestAnimationFrame(this.drawWave);
}

使用 SVG 实现平滑动画

构建 SVG 路径 通过 <path> 元素绘制心电图基线：

<svg width="800" height="200">
  <path ref="ecgPath" stroke="#ff0000" fill="none" stroke-width="2" />
</svg>

动态更新路径数据 使用 d 属性生成贝塞尔曲线路径：

updatePath() {
  const data = this.generateData();
  let pathData = `M ${data[0].x} ${data[0].y}`;

  data.slice(1).forEach(point => {
    pathData += ` L ${point.x} ${point.y}`;
  });

  this.$refs.ecgPath.setAttribute('d', pathData);
  setTimeout(this.updatePath, 100);
}

添加网格背景 通过 SVG 的 <pattern> 创建网格背景增强视觉效果：

vue实现心电图

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ccc" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />

关键优化点

性能优化
对于 Canvas 方案，避免频繁清除整个画布，可以只擦除需要更新的区域。SVG 方案中减少 DOM 操作次数。
真实数据适配
替换 generateData() 方法，接入实际的心电传感器数据（如 WebSocket 实时传输）。
响应式设计
监听窗口大小变化，动态调整 Canvas/SVG 的尺寸：
```
window.addEventListener('resize', this.handleResize);
```

完整实现时可根据需求选择技术方案：Canvas 更适合高频数据更新，SVG 更易于实现复杂的交互效果。