当前位置：首页 > VUE

vue实现心电图

2026-03-07 08:55:09VUE

Vue 实现心电图效果

在 Vue 中实现心电图效果通常涉及动态绘制折线图或使用动画模拟心电图波形。以下是两种常见实现方式：

使用 Canvas 动态绘制

通过 Vue 的 ref 绑定 Canvas 元素，利用 JavaScript 动态绘制心电图波形：

<template>
  <canvas ref="ecgCanvas" width="800" height="200"></canvas>
</template>

<script>
export default {
  mounted() {
    this.drawECG();
  },
  methods: {
    drawECG() {
      const canvas = this.$refs.ecgCanvas;
      const ctx = canvas.getContext('2d');
      let x = 0;
      const amplitude = 30;
      const speed = 2;

      function generateWave() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(0, canvas.height / 2);

        for (let i = 0; i < canvas.width; i++) {
          const y = canvas.height / 2 + 
            Math.sin((i + x) * 0.05) * amplitude * 
            Math.exp(-0.001 * ((i + x) % 200));
          ctx.lineTo(i, y);
        }

        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
        ctx.stroke();
        x += speed;
        requestAnimationFrame(generateWave);
      }
      generateWave();
    }
  }
};
</script>

使用 SVG 和动画

通过 SVG 路径和 Vue 的过渡效果实现：

<template>
  <svg width="800" height="200">
    <path 
      :d="wavePath" 
      stroke="red" 
      fill="none" 
      stroke-width="2"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      points: []
    };
  },
  computed: {
    wavePath() {
      let path = 'M0 100';
      for (let i = 0; i < 800; i += 5) {
        const y = 100 + 
          Math.sin((i + this.offset) * 0.05) * 30 * 
          Math.exp(-0.001 * ((i + this.offset) % 200));
        path += ` L${i} ${y}`;
      }
      return path;
    }
  },
  mounted() {
    setInterval(() => {
      this.offset += 2;
    }, 50);
  }
};
</script>

使用第三方图表库（如 ECharts）

对于更专业的医疗级心电图，建议使用 ECharts 等专业库：

vue实现心电图

<template>
  <div ref="ecgChart" style="width: 800px; height: 200px;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    const chart = echarts.init(this.$refs.ecgChart);
    const data = [];
    for (let i = 0; i < 800; i++) {
      data.push([
        i,
        50 + Math.sin(i * 0.1) * 30 * Math.exp(-0.001 * (i % 200))
      ]);
    }

    chart.setOption({
      xAxis: { show: false },
      yAxis: { show: false },
      series: [{
        type: 'line',
        data,
        showSymbol: false,
        lineStyle: { color: 'red' }
      }]
    });
  }
};
</script>