lycfr opened a new issue, #20454: URL: https://github.com/apache/echarts/issues/20454
### Version 4.9.0 ### Link to Minimal Reproduction https://jsfiddle.net/coderun/vhxcf2mt/3/ ### Steps to Reproduce ``` <!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: ['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 }] }); } } }); </script> </body> </html> ``` <img width="628" alt="image" src="https://github.com/user-attachments/assets/fdf0f168-e011-4f73-9761-62af6af62a8f";> ### Current Behavior 离开页面后，数据丢失 ### Expected Behavior 程序还在运行，数据应该还可以持续加载 ### Environment ```markdown - OS: - Browser: - Framework: ``` ### Any additional comments? _No response_ -- 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]
