ahmadalibaloch commented on issue #9232: Use OffScreenCanvas API for big data live charts URL: https://github.com/apache/incubator-echarts/issues/9232#issuecomment-430287014 I customized [this large bar chart](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-large) from echarts gallery and made it dynamic so you can have a look, copy and past following code into an echart example. While this chart is rendering in real time try to scroll the code area scrollbar and you will feel UI thread blocking at every interval. ``` var dataCount = 5e5; var data = generateData(dataCount); var option = { title: { text: echarts.format.addCommas(dataCount) + ' Data', left: 10 }, toolbox: { feature: { dataZoom: { yAxisIndex: false }, saveAsImage: { pixelRatio: 2 } } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { bottom: 90 }, dataZoom: [{ type: 'inside' }, { type: 'slider' }], xAxis: { data: data.categoryData, silent: false, splitLine: { show: false }, splitArea: { show: false } }, yAxis: { splitArea: { show: false } }, series: [{ type: 'bar', data: data.valueData, // Set `large` for large data amount large: true }] }; var baseValue = Math.random() * 1000; function next1(idx) { smallBaseValue = idx % 30 === 0 ? Math.random() * 700 : (smallBaseValue + Math.random() * 500 - 250); baseValue += Math.random() * 20 - 10; return Math.max( 0, Math.round(baseValue + smallBaseValue) + 3000 ); } setInterval(()=>{ option.series[0].data.push(next1(1)); myChart.setOption(option); },1000); function generateData(count) { var baseValue = Math.random() * 1000; var time = +new Date(2011, 0, 1); var smallBaseValue; function next(idx) { smallBaseValue = idx % 30 === 0 ? Math.random() * 700 : (smallBaseValue + Math.random() * 500 - 250); baseValue += Math.random() * 20 - 10; return Math.max( 0, Math.round(baseValue + smallBaseValue) + 3000 ); } var categoryData = []; var valueData = []; for (var i = 0; i < count; i++) { categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time)); valueData.push(next(i).toFixed(2)); time += 1000; } return { categoryData: categoryData, valueData: valueData }; } ```
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org For additional commands, e-mail: dev-h...@echarts.apache.org