Echarts 实现动态数据时间轴

 <div
      id="totalFlowRate"
      style="height:620px;"
 ></div>

export default {
	data() {
		return {
		  timeSpace: 5, // 默认五分钟
	      timeLong: 100, // 8小时间隔五分钟
	      xData: [], // x轴数据
	      start: 0,
	      end: 0,
	      timer: null,
	      hadleMove: false // 判断是否手动调节滑块
		}
	},
	methods: {
	// 时间间隔变化
    handleTimeSpaceChange() {
        clearInterval(this.timer)
        this.timer = null
        this.timeLong = Math.ceil(
          (8.5 * 60 * 60 * 1000) / (this.timeSpace * 60 * 1000)
        )
        this.handleTime()
        this.vitalData() // 生命体征数据函数
        this.timer = setInterval(this.vitalData, this.timeSpace * 60 * 1000)
    },
    // 切换时间间隔需重新计算
    handleTime() {
      this.xData = []
      const timestr = this.startTime
      const fiveMinutes = this.timeSpace * 60 * 1000
      let startTime = +new Date(timestr) - fiveMinutes
      for (let i = 0; i < this.timeLong; i++) {
        startTime = new Date(+startTime + fiveMinutes)
        this.xData.push(this.chartData(startTime))
      }

      this.$nextTick(() => {
        this.handleClearEcharts('totalFlowRate')
      })
    },
    
    riqigeshi(date) {
      return (
        date.getFullYear() +
        '/' +
        this.checkTime(date.getMonth() + 1) +
        '/' +
        this.checkTime(date.getDate()) +
        ' ' +
        this.checkTime(date.getHours()) +
        ':' +
        this.checkTime(date.getMinutes())
      )
    },

    chartData(date) {
      return {
        value: this.riqigeshi(date)
      }
    },
    
    checkTime(i) {
      if (i < 10) {
        i = '0' + i
      }
      return i
    }
    
    // 获取患者生命体征
    async vitalData() {
        /*请求接口*/
        // ...
        if (!this.hadleMove) {
          this.start =
            this.nibpsData.length >= 30 ? this.nibpsData.length - 20 : 0
          this.end =
            this.nibpsData.length + 40 >= this.timeLong
              ? this.timeLong
              : this.nibpsData.length + 40
        }

        this.handleData('totalFlowRate')
      }
    },
    
	handleData(id) {
	  const myChart = echarts.init(document.getElementById(id))
      myChart.on('datazoom', () => {
        const obj = myChart.getModel().option.dataZoom[0]
        this.start = obj.startValue
        this.end = obj.endValue
        this.hadleMove = true
      })

      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          // 提示框的位置
          position: pt => {
            return [pt[0], '10%']
          }
        },
        legend: {
          data: ['nibps', 'nibpd', 'pr', 'mcrr', 'rr']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          // type: 'category', // category为一级分类,适用于离散的类目数据
          boundaryGap: false, // 无间隙
          data: this.xData,
          splitLine: {
            show: true,
            interval: '0',
            lineStyle: {
              color: ['#bcbcbc']
            }
          },

          axisLabel: {
            formatter: function(val) {
              const strs = val.split(' ') //字符串数组
              return strs[1]
            }
          }
        },
        yAxis: {
          splitLine: { show: true },
          type: 'value',
          scale: true,
          max: 240,
          min: 0,
          splitNumber: 12,
          boundaryGap: [0.2, 0.2]
        },
        dataZoom: [
          {
            startValue: this.start,
            endValue: this.end
          },
          {
            startValue: this.start,
            endValue: this.end,
            handleSize: '80%', //  控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
            handleStyle: {
              color: 'bcbcbc',
              shadowBlur: 3, // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            name: 'nibps',
            type: 'line',
            data: this.nibpsData,
            symbol:
              'path:// M512 730c-6.4 0-12.8-2.4-17.7-7.3l-386-386c-9.8-9.8-9.8-25.6 0-35.4 9.8-9.8 25.6-9.8 35.4 0L512 669.6l368.3-368.3c9.8-9.8 25.6-9.8 35.4 0 9.8 9.8 9.8 25.6 0 35.4l-386 386c-4.9 4.9-11.3 7.3-17.7 7.3z',

            itemStyle: {
              borderColor: 'blue',
              color: 'blue',
              borderWidth: 2
            }
          },
          {
            name: 'nibpd',
            type: 'line',
            data: this.nibpdData,
            symbol:
              'path:// M898 730c-6.4 0-12.8-2.4-17.7-7.3L512 354.4 143.7 722.7c-9.8 9.8-25.6 9.8-35.4 0-9.8-9.8-9.8-25.6 0-35.4l386-386c9.8-9.8 25.6-9.8 35.4 0l386 386c9.8 9.8 9.8 25.6 0 35.4-4.9 4.9-11.3 7.3-17.7 7.3z',
            itemStyle: {
              color: 'blue',
              borderColor: 'blue',
              borderWidth: 2
            }
          },
          {
            name: 'pr',
            type: 'line',
            data: this.prData,
            symbol: 'circle',
            itemStyle: {
              color: '#00B034',
              borderColor: '#00B034',
              borderWidth: 2
            }
          },
          {
            name: 'mcrr',
            type: 'line',
            data: this.mcrrData,
            symbol: 'circle',
            itemStyle: {
              color: '#000000',
              borderColor: '#000000',
              borderWidth: 2
            }
          },
          {
            name: 'rr',
            type: 'line',
            data: this.rrData,
            itemStyle: {
              color: '#000000',
              borderColor: '#000000',
              borderWidth: 2
            }
          }
        ]
      })
      }
    }

图例：