Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ZhuYumo1020 opened this issue Sep 8, 2020 · 4 comments
Labels
enhancement stale Inactive for a long time. Will be closed in 7 days. waiting-for: community

Comments

@ZhuYumo1020
Copy link

ZhuYumo1020 commented Sep 8, 2020

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

image

image

求解决方案,不然整个页面太卡了,什么都操作不了!感谢官方的各位大佬,打扰了!

@ZhuYumo1020 ZhuYumo1020 changed the title 使用appendData分多次(每次数据量大概1万5,总数据量大概50万+左右)渲染数据,会导致整个页面很卡顿,cpu达到120%-250%左右! 使用appendData分多次(每次数据量大概1万5,总数据量50万-150万+)渲染数据,会导致整个页面很卡顿,cpu达到120%-250%左右! Sep 8, 2020
@ZhuYumo1020
Copy link
Author

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

@ZhuYumo1020
Copy link
Author

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

@github-actions
Copy link
Contributor

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

@github-actions github-actions bot added the stale Inactive for a long time. Will be closed in 7 days. label Sep 16, 2022
@github-actions
Copy link
Contributor

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement stale Inactive for a long time. Will be closed in 7 days. waiting-for: community
Projects
None yet
Development

No branches or pull requests

2 participants