lycfr commented on issue #20454: URL: https://github.com/apache/echarts/issues/20454#issuecomment-2865649456
找AI帮我修复了一下这个问题：
1、记录页面不可见的时间长度
2、当页面重新可见时，生成这段时间内缺失的数据点
3、平滑地将缺失的数据添加到图表中
可以参考一下修改后的代码：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts Demo</title>
<!-- 引入Echarts库 -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js";></script>
</head>
<body>
<!-- 用于渲染图表的div -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<div id="avg">
<div id="app_avg">app平均值:</div>
<div id="system_avg">system平均值:</div>
</div>
<div>
<button onclick="exportData()">获取区间数据</button>
</div>
<script>
// 初始化图表
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: ['app', 'system']
},
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();
let pageHiddenTime = null; // 记录页面隐藏的时间
let intervalId = null; // 存储定时器ID
// 更新数据函数 - 支持批量生成缺失的数据
function updateData(time, isBatch = false) {
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);
// 非批量更新时才更新图表，批量更新会在最后统一处理
if (!isBatch) {
updateChart();
lastUpdateTime = Date.now();
}
}
// 批量生成缺失的数据
function generateMissingData() {
if (pageHiddenTime) {
// 计算页面隐藏的时间长度（毫秒）
var hiddenDuration = Date.now() -
pageHiddenTime;
// 计算应该生成多少个数据点（每秒一个）
var dataPointsToGenerate =
Math.floor(hiddenDuration / 1000);
console.log(`生成${dataPointsToGenerate}个缺失的数据点`);
// 生成缺失的数据点
for (let i = 1; i <=
dataPointsToGenerate; i++) {
// 计算每个数据点的时间
let time = new
Date(pageHiddenTime + i * 1000);
// 批量生成数据（不立即更新图表）
updateData(time, true);
}
// 全部生成后统一更新图表
updateChart();
// 重置隐藏时间记录
pageHiddenTime = null;
}
}
// 更新图表显示
function updateChart() {
myChart.setOption({
series: [{
name: 'app',
data: app_data,
markPoint: {
data:
app_data.length != 0 ? [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
},
{
type: 'point',
name: '当前值',
value: app_data[app_data.length-1].value[1],
xAxis: app_data[app_data.length-1].value[0],
yAxis: app_data[app_data.length-1].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,
markPoint: {
data:
system_data.length != 0 ? [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
},
{
type: 'point',
name: '当前值',
value: system_data[system_data.length-1].value[1],
xAxis: system_data[system_data.length-1].value[0],
yAxis: system_data[system_data.length-1].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
}
}
}
}
]
});
}
// 启动数据更新定时器
function startDataUpdate() {
if (intervalId) clearInterval(intervalId);
intervalId = setInterval(updateData, 1000);
}
// 监听数据缩放事件
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') {
document.getElementById('app_avg').innerHTML = "app平均值:" + avg.toFixed(2);
} else if (series.name ===
'system') {
document.getElementById('system_avg').innerHTML = "system平均值:" + avg.toFixed(2);
}
})
});
};
// 实现获取区间数据功能
function exportData() {
var option = myChart.getOption();
var appData = option.series[0].data;
var systemData = option.series[1].data;
var start = option.dataZoom[0].start;
var end = option.dataZoom[0].end;
var startIndex = Math.floor(start *
appData.length / 100);
var endIndex = Math.floor(end * appData.length
/ 100);
var selectedAppData = appData.slice(startIndex,
endIndex);
var selectedSystemData =
systemData.slice(startIndex, endIndex);
var exportData = {
app: selectedAppData.map(item => ({
time: new
Date(item.value[0]).toISOString(),
value: item.value[1]
})),
system: selectedSystemData.map(item =>
({
time: new
Date(item.value[0]).toISOString(),
value: item.value[1]
}))
};
var jsonStr = JSON.stringify(exportData, null,
2);
var blob = new Blob([jsonStr], {type:
'application/json'});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'chart_data_' + new
Date().toISOString().slice(0,19).replace(/:/g,'-') + '.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// 页面可见性变化处理
document.addEventListener('visibilitychange', function
() {
if (document.hidden) {
// 页面被隐藏时
pageHiddenTime = Date.now(); // 记录隐藏时间
localStorage.setItem('appData',
JSON.stringify(app_data));
localStorage.setItem('systemData',
JSON.stringify(system_data));
clearInterval(intervalId); // 清除定时器
} else {
// 页面重新可见时
var savedAppData =
JSON.parse(localStorage.getItem('appData'));
var savedSystemData =
JSON.parse(localStorage.getItem('systemData'));
if (savedAppData && savedSystemData) {
app_data = savedAppData;
system_data = savedSystemData;
}
generateMissingData(); // 生成缺失的数据
startDataUpdate(); // 重新启动定时器
}
});
// 初始化
startDataUpdate();
listen_dataZoom(myChart);
</script>
</body>
</html>
```
我本地可以正常运行~
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
