vue项目使用echart实现动态折线的实时数据效果

目前有三种方式可以实现：1、定时器不停的刷新，2、是使用scoket实现，3、是使用requestAnimationFrame实现，原理都一样，都是不断循环调用echart对象的setOption方法，每次改变一下series里面的data数据（即每次在data数组最后push一个数据，如果数组总数达到设置的一屏最大数，则先shift开头的一个数据，再结尾push一个数据），达到动态更新曲线图，实现心电图动画效果。

下面来说下里面的实现两种方式，

方式一：

  // 设备健康

    deviceRes(data = { health: ['0', '0', '0'] }) {

      if (data) {

        for (let m = 0; m < 3; m++) {

          this.optionDevice.series[m].data.shift();

          this.optionDevice.series[m].data.push(data['health'][m]);

        }

      }

      const now_date = new Date();

      this.optionDevice.xAxis.data.shift();

      this.optionDevice.xAxis.data.push(now_date.getHours() + ':' + now_date.getMinutes() + ':' + now_date.getSeconds());

      this.device_chart.setOption({

        xAxis: this.optionDevice.xAxis,

        series: this.optionDevice.series

      });

    },

方式二：

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]
    }
}