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

echarts在设置自动获取数据刷新的时候,内存不断增长,最终导致浏览器崩溃 #4105

Closed
zqbxrambo opened this Issue Sep 19, 2016 · 6 comments

Comments

Projects
None yet
7 participants
@zqbxrambo

zqbxrambo commented Sep 19, 2016

问题简述 (One-line summary)

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version): 最新版本echarts 3.2.3
  • 浏览器类型和版本 (Browser version):IE11,Chrome52.0.2743.82
  • 操作系统类型和版本 (OS Version):win7

重现步骤 (Steps to reproduce)

1.setInterval(function(){echartInit();},refreshSec);
2.echartInit=function(){
myChart = echarts.init(document.getElementById('echartID'));
option={};
myChart.clear();
myChart.dispose();
myChart.setOption(option);
}

期望结果 (Expected behaviour)

调用clear(),dispose()可以自动释放内存,内存在自动刷新的过程中内存可以固定在某一均值,而不是一直不断增长

可能哪里有问题 (What went wrong)

在调用clear(),dispose()时并没有释放内存,导致内存一直增加

ECharts配置项 (ECharts option)

option = {

}

其他信息 (Other comments)

@100pah

This comment has been minimized.

Show comment
Hide comment
@100pah

100pah Sep 19, 2016

Member

是否能给出完整的 option,方便我们复现问题?

Member

100pah commented Sep 19, 2016

是否能给出完整的 option,方便我们复现问题?

@zqbxrambo

This comment has been minimized.

Show comment
Hide comment
@zqbxrambo

zqbxrambo Sep 19, 2016

var dom = document.getElementById('main');
dom.style.height = (document.body.offsetHeight - 40) + 'px';
var myChart = echarts.init(dom,'dark');
var app = [];
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 300];

for (var i = 1; i < 20000; i++) {
    var now = new Date(base += oneDay);
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}

option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    title: {
        left: 'center',
        text: '大数据量面积图',
    },
    legend: {
        top: 'bottom',
        data:['意向']
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 100
    }, {
        start: 0,
        end: 100,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [
        {
            name:'模拟数据',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'rgb(255, 70, 131)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            },
            data: data
        }
    ]
};

//myChart.setOption(option);
setInterval(function(){myChart.clear();myChart.setOption(option);},5000);
/* $(window).resize(function(){
    myChart.resize();
});  */

就直接用官网的例子,然后自己添加setInterval,循环执行就会出现这个问题 @100pah

zqbxrambo commented Sep 19, 2016

var dom = document.getElementById('main');
dom.style.height = (document.body.offsetHeight - 40) + 'px';
var myChart = echarts.init(dom,'dark');
var app = [];
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 300];

for (var i = 1; i < 20000; i++) {
    var now = new Date(base += oneDay);
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}

option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    title: {
        left: 'center',
        text: '大数据量面积图',
    },
    legend: {
        top: 'bottom',
        data:['意向']
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 100
    }, {
        start: 0,
        end: 100,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [
        {
            name:'模拟数据',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'rgb(255, 70, 131)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            },
            data: data
        }
    ]
};

//myChart.setOption(option);
setInterval(function(){myChart.clear();myChart.setOption(option);},5000);
/* $(window).resize(function(){
    myChart.resize();
});  */

就直接用官网的例子,然后自己添加setInterval,循环执行就会出现这个问题 @100pah

@pissang pissang added the pending label Sep 30, 2016

@100pah 100pah closed this in 0aeea99 Oct 8, 2016

@tangniye

This comment has been minimized.

Show comment
Hide comment
@tangniye

tangniye Dec 19, 2016

我也出现了这个问题,请问楼主你解决了吗

tangniye commented Dec 19, 2016

我也出现了这个问题,请问楼主你解决了吗

@arrinhzh

This comment has been minimized.

Show comment
Hide comment
@arrinhzh

arrinhzh Dec 29, 2016

请问这个问题解决了吗?用了dispose()方法,但是内存还是在上升,有办法稳定吗?

arrinhzh commented Dec 29, 2016

请问这个问题解决了吗?用了dispose()方法,但是内存还是在上升,有办法稳定吗?

@komorebi-san

This comment has been minimized.

Show comment
Hide comment
@komorebi-san

komorebi-san Jan 11, 2018

Anyone managed to solve the issue?

@tangniye @arrinhzh @zqbxrambo @100pah

komorebi-san commented Jan 11, 2018

Anyone managed to solve the issue?

@tangniye @arrinhzh @zqbxrambo @100pah

@luoluobobo

This comment has been minimized.

Show comment
Hide comment
@luoluobobo

luoluobobo Jun 14, 2018

4.0解决这个问题了吗?

luoluobobo commented Jun 14, 2018

4.0解决这个问题了吗?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment