[Bug] 实时曲线,当离开echarts页面打开1~2分钟后,重新回到echart页面查看数据,发现这离开的时段数据不更新或者丢失
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
4.9.0
### Link to Minimal Reproduction
https://jsfiddle.net/coderun/vhxcf2mt/3/
### Steps to Reproduce
```
Echarts Demo
获取区间数据
// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));
// 生成随机数
function generateRandomValue() {
return Math.floor(Math.random() * 100);
}
// 设置图表的配置项和数据
var option = {
title: {
name: 'CPU',
left: 'center'
},
legend: {
orient: 'horizontal',
x: 'right', //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中
data: ['Private', 'Real']
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
},
},
xAxis: {
type: 'time',
axisLabel: {
formatter: function(value) {
var date = new Date(value);
var hours = date.getHours();
var minutes = "0" + date.getMinutes();
var seconds = "0" + date.getSeconds();
return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
}
}
},
yAxis: {
type: 'value'
},
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 100,
},
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,
end: 100,
}
],
series: [{
name: 'app',
data: [],
type: 'line',
},
{
name: 'system',
data: [],
type: 'line'
}
]
};
// 使用配置项和数据显示图表
myChart.setOption(option);
let app_data = [];
let system_data = [];
let lastUpdateTime = Date.now();
function updateData(time) {
var now = time || new Date(); // 使用传入的时间或当前时间
var app_value = {
name: now.toString(),
value: [
now,
generateRandomValue(),
]
};
var system_value = {
name: now.toString(),
value: [
now,
generateRandomValue(),
]
};
app_data.push(app_value);
system_data.push(system_value);
myChart.setOption({
series: [{
name: 'app',
data: app_data,
type: 'line',
markPoint: {
data: app_data.length != 0 ? [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
},
{
type: 'point',
name: '当前值',
value: app_value.value[1],
xAxis: app_value.value[0],
yAxis: app_value.value[1]
}
] : [],
label: {
position: 'inside',
formatter: function(param) {
if (param.data.type != 'point') {
return param.data.type + ":" + param.value
}
}
}
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}],
label: {
formatter: function(param) {
return "avg:" + param.value
}
}
}
},
{
name: 'system',
data: system_data,
type: 'line',
markPoint: {
data: system_data.length != 0 ? [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
},
{
type: 'point',
name: '当前值',
value: system_value.value[1],
xAxis: system_value.value[0],
yAxis: system_value.value[1]
}
] : [],
label: {
position: 'inside',
formatter: function(param) {
if (param.data.type != 'point') {
return param.data.type + ":" + param.value
}
}
}
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}],
label: {
formatter: function(param) {
return "avg:" + param.value
}
}
}
}
]
});
lastUpdateTime = Date.now();
}
// 每秒更新一次数据
var intervalId = setInterval(updateData, 1000);
listen_dataZoom(myChart);
function listen_dataZoom(chart) {
chart.on('dataZoom', function(params) {
let startIndex = Math.floor(params.start * chart.getOption().series[0].data.length / 100);
let endIndex = Math.floor(params.end * chart.getOption().series[0].data.length / 100);
chart.getOption().series.forEach(function(series) {
let sum = 0;
let count = endIndex - startIndex;
for (var i = startIndex; i < endIndex; i++) {
sum += series.data[i].value[1];
}
let avg = sum / count;
if (series.name === 'app') {
app_avg.innerHTML = "app平均值:" + avg.toFixed(2);
} else if (series.name === 'system') {
system_avg.innerHTML = "system平均值:" + avg.toFixed(2);
}
})
});
};
// 当页面获得和失去焦点时保存和恢复数据
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
localStorage.setItem('echartsData', JSON.stringify(data));
} else {
var savedData = JSON.parse(localStorage.getItem('echartsData'));
if (savedData) {
data = savedData;
myChart.setOption({
series: [{
data: data
}]
});
}
}
});
```
### Current Behavior
离开页面后,数据丢失
### Expected Behavior
程序还在运行,数据应该还可以持续加载
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.