vue实现svg心电图

Vue 中实现 SVG 心电图

使用 SVG 路径绘制动态心电图

在 Vue 中可以通过 <svg> 和 <path> 元素实现动态心电图效果。关键点在于动态更新路径的 d 属性，模拟心电图波形。

<template>
  <div class="ecg-container">
    <svg width="100%" height="100" viewBox="0 0 500 100">
      <path 
        :d="pathData" 
        fill="none" 
        stroke="#FF0000" 
        stroke-width="2"
      />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      points: [],
      maxPoints: 50,
      amplitude: 20,
      frequency: 0.1
    }
  },
  computed: {
    pathData() {
      if (this.points.length === 0) return ''

      let d = `M ${this.points[0].x} ${this.points[0].y}`
      for (let i = 1; i < this.points.length; i++) {
        d += ` L ${this.points[i].x} ${this.points[i].y}`
      }
      return d
    }
  },
  mounted() {
    this.generatePoints()
    setInterval(this.updatePoints, 100)
  },
  methods: {
    generatePoints() {
      for (let i = 0; i < this.maxPoints; i++) {
        this.points.push({
          x: i * (500 / this.maxPoints),
          y: 50 + Math.sin(i * this.frequency) * this.amplitude
        })
      }
    },
    updatePoints() {
      // 移除第一个点
      this.points.shift()

      // 添加新点
      const lastX = this.points[this.points.length - 1].x
      this.points.push({
        x: lastX + (500 / this.maxPoints),
        y: 50 + Math.sin(lastX * this.frequency) * this.amplitude
      })
    }
  }
}
</script>

<style>
.ecg-container {
  width: 100%;
  background: #f0f0f0;
  padding: 20px;
}
</style>

使用 SVG 动画增强效果

可以通过 SVG 的动画特性使心电图看起来更真实：

<template>
  <svg width="100%" height="100" viewBox="0 0 500 100">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#FF0000" />
        <stop offset="100%" stop-color="#FF0000" stop-opacity="0" />
      </linearGradient>
    </defs>

    <path 
      :d="pathData" 
      fill="none" 
      stroke="url(#gradient)" 
      stroke-width="2"
    >
      <animate 
        attributeName="stroke-dashoffset"
        values="500;0" 
        dur="5s" 
        repeatCount="indefinite"
      />
    </path>
  </svg>
</template>

使用第三方库优化性能

对于更复杂的心电图效果，可以考虑使用专门的图表库：

1. 安装 Chart.js 和 vue-chartjs：

   

   npm install chart.js vue-chartjs

2. 创建心电图组件：

   
   import { Line } from 'vue-chartjs'

export default { extends: Line, data() { return { chartData: { labels: Array(100).fill(''), datasets: [{ label: 'ECG', borderColor: '#FF0000', pointRadius: 0, borderWidth: 2, data: Array(100).fill(0) }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 0 }, scales: { xAxes: [{ display: false }], yAxes: [{ display: false, ticks: { min: -100, max: 100 } }] } } } }, mounted() { this.renderChart(this.chartData, this.options) setInterval(this.updateChart, 100) }, methods: { updateChart() { const newData = this.chartData.datasets[0].data.slice(1) newData.push(Math.random() * 100 - 50) this.chartData.datasets[0].data = newData this.$data._chart.update() } } }

#### 真实心电图数据模拟

要模拟更真实的心电图波形，可以使用数学函数组合：

```javascript
function generateECGPoint(x) {
  // 基础心率
  const base = Math.sin(x * 0.1) * 10

  // P波
  const pWave = x % 50 < 5 ? Math.sin((x % 50) * 0.6) * 8 : 0

  // QRS复合波
  let qrs = 0
  if (x % 50 >= 5 && x % 50 < 15) {
    const pos = (x % 50) - 5
    if (pos < 2) qrs = -pos * 15
    else if (pos < 4) qrs = -30 + (pos-2) * 25
    else if (pos < 6) qrs = 20 - (pos-4) * 10
    else qrs = 0
  }

  // T波
  const tWave = x % 50 >= 15 && x % 50 < 25 ? 
    Math.sin((x % 50 - 15) * 0.3) * 5 : 0

  return base + pWave + qrs + tWave
}

这些方法可以根据实际需求进行调整和组合，实现不同复杂度的心电图效果。