vue项目使用echart实现动态心电图效果

基本思路：

通过requestAnimationFrame的方法，不断循环调用echart对象的setOption方法，每次改变一下series里面的data数据（即每次在data数组最后push一个数据，如果数组总数达到设置的一屏最大数，则先shift开头的一个数据，再结尾push一个数据），达到动态更新曲线图，实现心电图动画效果。

1、安装echart

npm install echarts --save

2、在main.js里全局引入

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

 3、在页面里使用

<div id="wave-canvas" class="wave-canvas"></div>

<script>
import pulseData from '@/api/pulse-data.js'


let waveChart = null; // 心电图对象
const frameNum = 250; // 显示最大数
let normalizeData = []
let index = 0;
let _arrIndex = 250;
let _arr = []
let runnerTimeout = null

export default {

  data () {
    return  {
      maiType: '脉位',
      pulseType: ''
    }
  },

  created() {

    this.pulseType = 'chi'
  },

  mounted () {

    // 防止标签元素渲染慢，echart就开始初始化，导致canvas大小异常，所以加个60ms延迟
    setTimeout(() => {
      this.selectPulse(this.pulseType)
    }, 60)

  },

  beforeDestroy() {
  
    this.initPluseData()
  },

  methods: {

    /**
     * 初始化数据
     */
    initPluseData () {
      runnerTimeout && cancelAnimationFrame(runnerTimeout);
  
      waveChart = null; // 心电图对象
      normalizeData = []
      index = 0;
      _arrIndex = 250;
      _arr = []
      runnerTimeout = null
    },

    /**
     * 选择脉象
     */
    selectPulse(type) {

      this.pulseType = type || 'chi';

      this.initPluseData()
   

      _arr = pulseData[type || 'chi'].PulseShow

      normalizeData = []

      for(let i = 0; i < _arrIndex; i++) {
        normalizeData.push(_arr[i])
      }

      // runnerTimeout = setInterval(() => {
      //   this.drawWaveChart()
      // }, 60)
      
      if(!runnerTimeout) {
        runnerTimeout = requestAnimationFrame(this.drawWaveChart)
      }

    },

    /**
     * 绘制波形图
     */
    drawWaveChart() {
      
      if (normalizeData.length === frameNum) {
        normalizeData.shift()
      }

      normalizeData.push(_arr[_arrIndex])
      
      _arrIndex++
      
      if(_arrIndex >= _arr.length) {
        _arrIndex = 0
      }

      const data = normalizeData;

      const _xarr = Array.from({ length: 250 }, (_, i) => i);
      let option = {
        animation: false,
        xAxis: {
          type: 'category',
          data: _xarr,
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: data,
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#C7ABE4' // 0% 处的颜色
                }, {
                  offset: 0.3, color: '#ABE6E2' // 100% 处的颜色
                }, {
                  offset: 0.6, color: '#ABBAE5' // 100% 处的颜色
                }, {
                  offset: 1, color: '#C7ABE4' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              width: 10
            }
          }
        ],
        grid: {
          top: 10,
          left: 10,
          right: 10,
          bottom: 10
        }
      };
      
      let waveDom = document.getElementById("wave-canvas")
      if(waveDom){
        if (!waveChart) {
          waveChart = this.$echarts.init(waveDom);
          waveChart.setOption(option, {
            notMerge: true
          });
        } else {
          waveChart.setOption(option, {
            notMerge: true
          });
        }
      }

      runnerTimeout = requestAnimationFrame(this.drawWaveChart)
    }

  }

}
</script>

心电图数据：

export default {

  'chi': {
    name: '迟脉',
    'PulseShow': [99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12, 12, 12, 11, 11, 10, 10, 10, 9, 9, 8, 8, 8, 7, 7, 6, 6, 5, 5, 4, 4, 3, 3, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 21, 23, 26, 28, 31, 34, 37, 41, 44, 48, 52, 57, 61, 66, 71, 75, 80, 84, 88, 92, 95, 97, 99, 100, 100, 100, 99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12, 12, 12, 11, 11, 10, 10, 10, 9, 9, 8, 8, 8, 7, 7, 6, 6, 5, 5, 4, 4, 3, 3, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 21, 23, 26, 28, 31, 34, 37, 41, 44, 48, 52, 57, 61, 66, 71, 75, 80, 84, 88, 92, 95, 97, 99, 100, 100, 100, 99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12, 12, 12, 11, 11, 10, 10, 10, 9, 9, 8, 8, 8, 7, 7, 6, 6, 5, 5, 4, 4, 3, 3, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 21, 23, 26, 28, 31, 34, 37, 41, 44, 48, 52, 57, 61, 66, 71, 75, 80, 84, 88, 92, 95, 97, 99, 100, 100, 100, 99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12]
    }
}