在顶点图表中,实时图表并不平滑。
当我只使用一张图表时,工作顺利。但是两个图表,运行不顺畅
我只是按照官方演示(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>