Vue ApexCharts 不流畅

Question

我正在使用顶点图表创建来自后端的实时数据图表。

我已经使用该演示作为指南并实现了我自己的实时图表 (https://apexcharts.com/vue-chart-demos/line-charts/realtime/)

我希望数据像链接示例中那样滚动，目前，我的数据似乎在每次更新时都重新绘制线条 (https://imgur.com/a/1aTc1JV)

我使用这个函数通过每秒更新一次的固定长度队列更新系列数据（queue.append（newData）然后queue.pop（0））

updateChart: function () {
  var me = this;
  this.intervalid1 = setInterval(() => {

    me.$refs.chart.updateSeries([
      {
        data: this.temperature,
      },
    ]);

  }, 1000);
},

Answer 1

而不是 queue.pop(0) 将 xaxis 中的 range 设置为长度 - 1 的初始数据（type: "numeric"）。 https://apexcharts.com/docs/options/xaxis/#range

Vue ApexCharts 不流畅

Vue ApexCharts is not smooth

graph

real-time

vue.js

apexcharts