echarts-bot[bot] commented on issue #20454: URL: https://github.com/apache/echarts/issues/20454#issuecomment-2437322291
@lycfr It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗 <details><summary><b>TRANSLATED</b></summary><br> **TITLE** [Bug] Real-time curve, when you leave the echarts page and open it for 1~2 minutes, you go back to the echart page to view the data, and find that the data of the left period is not updated or lost **BODY** ### 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> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js";></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <div id="avg"> <div id="app_avg">app average:</div> <div id="system_avg">system average:</div> </div> <div> <button onclick="exportData()">Get interval data</button> </div> <script> //Initialize chart var myChart = echarts.init(document.getElementById('chart')); // Generate random numbers function generateRandomValue() { return Math.floor(Math.random() * 100); } //Set the configuration items and data of the chart var option = { title: { name: 'CPU', left: 'center' }, legend: { orient: 'horizontal', x: 'right', //The legend can be set to the left, right, or center y: 'top', //The legend can be set to top, bottom, or center 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' } ] }; //Use configuration items and data to display charts myChart.setOption(option); let app_data = []; let system_data = []; let lastUpdateTime = Date.now(); function updateData(time) { var now = time || new Date(); // Use the passed in time or the current time 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: 'maximum value' }, { type: 'min', name: 'minimum value' }, { type: 'point', name: 'current value', 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: 'average' }], label: { formatter: function(param) { return "avg:" + param.value } } } }, { name: 'system', data: system_data, type: 'line', markPoint: { data: system_data.length != 0 ? [{ type: 'max', name: 'maximum value' }, { type: 'min', name: 'minimum value' }, { type: 'point', name: 'current value', 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: 'average' }], label: { formatter: function(param) { return "avg:" + param.value } } } } ] }); lastUpdateTime = Date.now(); } //Update data every second 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 average:" + avg.toFixed(2); } else if (series.name === 'system') { system_avg.innerHTML = "system average:" + avg.toFixed(2); } }) }); }; // Save and restore data when the page gains and loses focus 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 Data is lost after leaving the page ### Expected Behavior The program is still running and the data should continue to load. ### Environment ```markdown -OS: -Browser: - Framework: ``` ### Any additional comments? _No response_ </details> -- 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]
