vue-顶点图实时图不是光滑的

Question

在顶点图中，实时图表并不是平滑的。

当我只使用一张图表的时候，工作就很顺利。但是两张图表，工作不顺利

我只是遵循官方演示(https://apexcharts.com/vue-chart-demos/line-charts/realtime/)，只需再添加一个图表，并添加第二个图表的功能。完整代码在这里，https://codesandbox.io/s/vue-template-fhjbr?fontsize=14

这是代码的一部分

// html codes

var data1 = [];
var data2 = [];

function getDayWiseTimeSeries(baseval, count, yrange) {
  var i = 0;
  while (i < count) {
    var x = baseval;
    var y =
      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    data1.push({
      x,
      y
    });
    data2.push({
      x,
      y
    });
    lastDate = baseval;
    baseval += 86400000;
    i++;
  }
}

getDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {
  min: 10,
  max: 90
});

function getNewSeries(baseval, yrange) {
  var newDate = baseval + 86400000;
  lastDate = newDate;
  data1.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  });
  data2.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  });
}

function resetData() {
  data1 = data1.slice(data1.length - 10, data1.length);
  data2 = data2.slice(data2.length - 10, data2.length);
}

export default {
  name: "home",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series1: [
        {
          data: data1.slice()
        }
      ],
      series2: // same with series1
      chartOptions: {
        chart: {
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 900
            }
        //...
      }
    };
  },
  mounted() {
    this.intervals1();
    this.intervals2();
  },
  methods: {
    intervals1: function() {
      var me = this;
      window.setInterval(function() {
        getNewSeries(lastDate, {
          min: 10,
          max: 90
        });
        console.log(data1);
        me.$refs.realtimeChart1.updateSeries([
          {
            data: data1
          }
        ]);
      }, 900);

      // every 60 seconds, we reset the data to prevent memory leaks
      ...
    },
    intervals2: //same with intervals1()
  }
};
</script>

Answer 1

dynamicAnimation在您的码箱中是不同的。应该在1以下

dynamicAnimation: {
    speed: 1000
}

您还调用了两个方法intervals1()和intervals2()。而不是调用2个方法，只需创建一个函数intervals()，就可以设置两个图表数据。

请用两个图表检查一下这个工作的示例。

代码片段

export default {
  name: "home",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series1: [{ data: data1.slice() }],
      series2: [{ data: data2.slice() }],
      chartOptions: {
        chart: {
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 1000
            }
          },
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: "smooth"
        },

        title: {
          text: "Dynamic Updating Chart",
          align: "left"
        },
        markers: {
          size: 0
        },
        xaxis: {
          type: "datetime",
          range: 777600000
        },
        yaxis: {
          max: 100
        },
        legend: {
          show: false
        }
      }
    };
  },
  mounted() {
    this.intervals();
  },
  methods: {
    intervals: function() {
      var me = this;
      window.setInterval(function() {
        getNewSeries(lastDate, { min: 10, max: 90 });
        me.$refs.realtimeChart1.updateSeries([{ data: data1 }]);
        me.$refs.realtimeChart2.updateSeries([{ data: data2 }]);
      }, 1000);

      // every 60 seconds, we reset the data to prevent memory leaks
      window.setInterval(function() {
        resetData();
        me.$refs.realtimeChart1.updateSeries([{ data: [] }], false, true);
        me.$refs.realtimeChart2.updateSeries([{ data: [] }], false, true);
      }, 60000);
    }
  }
};