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与您的codesandbox不同。应该在一个以下

dynamicAnimation: {
    speed: 1000
}

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

请通过两个图表检查example的工作情况。

代码段

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);
    }
  }
};

vue-apexchart实时图表不流畅

1 个答案: