You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/09/08 15:04:48 UTC

[GitHub] [incubator-echarts] russkdhd opened a new issue #13249: 使用appendData分多次(每次数据量大概1万5,总数据量大概50万+左右)渲染数据,会导致整个页面很卡顿,cpu达到120%-250%左右!

russkdhd opened a new issue #13249:
URL: https://github.com/apache/incubator-echarts/issues/13249


   ### Version
   4.0
   
   ### Steps to reproduce
   使用appendData分批加载数据,并且sampling设置为默认,即不做降采样策略,如果做这个的话会影响整体的曲线。
   
   ### What is expected?
   期望能够顺畅加载,不卡顿
   
   ### What is actually happening?
   页面很卡顿,导致cpu一直飙涨
   
   
   ### Any additional comments? (optional)
   ```
    function getConfig() {
           const legendData = chartData.map(item => item.name);
           const yData = [];
           for (let index = 0; index < legendData.length; index++) {
   
               yData.push({
                   name: legendData[index],
                   type: 'line',
                   smooth: 0.4,
                   // sampling: 'average',
                   connectNulls: true,
                   showSymbol: false,
                   hoverAnimation: false,
                   data: chartData[index].points
               })
           }
   
           const option = {
               title: {
                   text: selectedKey
               },
               tooltip: {
                   trigger: 'axis',
                   // axisPointer: false,
                   // animation: false,
                   padding: 10,
                   formatter: function (params) {
                       let res = moment(params[0].axisValue).format('MM-DD HH:mm:ss.SSS') + '<br/>';
                       for (let i = 0, l = params.length; i < l; i++) {
                           res += (i === 0 ? '' : '<br />') + params[i].marker + params[i].seriesName + ' : ' + params[i].value[1];
                       }
                       return res;
                   },
                   axisPointer: {
                       animation: false
                   }
               },
               color: ['blue', 'yellow', 'green'],
               legend: {
                   data: legendData
               },
               grid: {
                   left: '3%',
                   right: '4%',
                   bottom: '10%',
                   containLabel: true
               },
               backgroundColor: 'transparent',
               xAxis: {
                   type: 'time',
                   axisLabel: {
                       formatter: (function (value) {
                           return moment(value).format('MM-DD HH:mm:ss.SSS');
                       })
                   }
               },
               yAxis: [{
                   type: 'value',
                   // boundaryGap: [0, '100%'],
                   // min: 0.98,
                   // max: 1.1
               }],
               dataZoom: [{
                   // startValue: xAxisData[0],
                   // start: 0,
                   // end: 100,
                   filterMode: 'empty',
                   textStyle: {
                       color: '#fff'
                   }
               }, {
                   type: 'inside'
               }],
               series: yData
           };
   
           return option;
       }
   ```
   
   
   ## appendData
   
   ```
       for (let index = 0; index < chartData.length; index++) {
                   chartInstanceRef.current.appendData({
                       seriesIndex: index,
                       data: chartData[index].points
                   })
   
                   chartInstanceRef.current.resize();
               }
   ```
   
   
   ![image](https://user-images.githubusercontent.com/41645112/92493526-34b2c980-f227-11ea-9c1e-54f81fbcc5b8.png)
   
   ![image](https://user-images.githubusercontent.com/41645112/92493592-43997c00-f227-11ea-8fda-6ab7abd7cd66.png)
   
   ![image](https://user-images.githubusercontent.com/41645112/92493633-501dd480-f227-11ea-89ae-1b1a5ab66ed6.png)
   
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [incubator-echarts] russkdhd commented on issue #13249: 使用appendData分多次(每次数据量大概1万5,总数据量50万-150万+)渲染数据,会导致整个页面很卡顿,cpu达到120%-250%左右!

Posted by GitBox <gi...@apache.org>.
russkdhd commented on issue #13249:
URL: https://github.com/apache/incubator-echarts/issues/13249#issuecomment-690078860


   @pissang` chartInstanceRef.current.resize(); ` 这个有没有影响?但是如果不加这个appendData后图形没有变化。


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [incubator-echarts] russkdhd commented on issue #13249: 使用appendData分多次(每次数据量大概1万5,总数据量50万-150万+)渲染数据,会导致整个页面很卡顿,cpu达到120%-250%左右!

Posted by GitBox <gi...@apache.org>.
russkdhd commented on issue #13249:
URL: https://github.com/apache/incubator-echarts/issues/13249#issuecomment-693438820


   @Ovilia 小姐姐可以帮忙看下这个问题吗?


----------------------------------------------------------------
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.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org