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、在页面里使用

心电图数据：

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