Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Memory Leaks

See original GitHub issue

One-line summary [问题简述]

Memory leak

Version & Environment [版本及环境]

ECharts version [ECharts 版本]: Echarts 3.8.0 Full (downloaded today)
Browser version [浏览器类型和版本]:Chromium Version 62.0.3202.62 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)
OS Version [操作系统类型和版本]:Linux hidden 4.4.0-97-generic #120-Ubuntu SMP Tue Sep 19 17:28:18 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

Chrome on Windows also seems to have the same problem.

Expected behaviour [期望结果]

All memory should be garbage collected.

Memory increase steadily and is never completely collected. Application eventually stops working.

As far as I can tell from the Chromium profiling tools, the variables that are not being collected are in the echarts source code, but my apologies if this is my Javascript that is causing the problem. Corrections and suggestions are appreciated for me and as a guide to others.

ECharts option [ECharts配置项]

Slightly modified version of:

https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-large

Full html file:

<html><head>
  <title>Generated for DIVXxChart3Big</title>
<script src="echarts.min.js"></script>
  </head>
 <body  
 <!--onload="DIVXxChart_init(document.getElementById('DIVXxChart3Big'));"--> >
<div id="DIVXxChart3Big" style="width: 800px; height: 650px;">         
</div>

<script type='application/javascript'>
var DIVXxChartBigVar = {
};


function DIVXxChartBig_init (doc) {
    DIVXxChartBigVar.myChart = echarts.init(doc);
    DIVXxChartBigVar.option = {
    title: {
        text: 'Big Data Set 5'
    },
    tooltip : {
        trigger: 'axis',
        showDelay : 0,
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        },
        zlevel: 1
    },
    legend: {
        data:['sin','cos']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            type : 'value',
            scale:true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true
        }
    ],
    series : [
        {
            name:'sin',
            type:'scatter',
            large: true,
            symbolSize: 3,
            data: []
        },
        {
            name:'cos',
            type:'scatter',
            large: true,
            symbolSize: 2,
             data: []
         }
    ]
    };


        
             DIVXxChartBigVar.myChart.setOption(DIVXxChartBigVar.option);
             DIVXxChartBigVar.myChart.resize();
           };
        
function DIVXxChartBig_updateValues (incomingValue) {
                 var d = [];
                 var len = 10000;
                 var x = 0;
                 while (len--) {
                     x = (Math.random() * 10).toFixed(3) - 0;
                     d.push([
                         x,
                         //Math.random() * 10
                         (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                     ]);
                 }
                  
                 var d1 = [];
                 len = 20000;
                 x = 0;
                 while (len--) {
                     x = (Math.random() * 10).toFixed(3) - 0;
                     d1.push([
                         x,
                         //Math.random() * 10
                         (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                     ]);
                 }
                      DIVXxChartBigVar.myChart.setOption({
                         series: [{
                             data: d
                         },{
                             data: d1
                             }]
                     });
                     d1 = null;
                     d = null;
           };
 DIVXxChartBig_init(document.getElementById('DIVXxChart3Big'));
setInterval(function (){
DIVXxChartBig_updateValues(Math.random()*100)
},500);
</script>
</body></html>

Other comments [其他信息]

I think that this code also leaks, but the rate is much lower so I’m not a certain as of the one above.

<html><head>
  <title>Generated for DIVXxChart3</title>
<script src="echarts.min.js"></script>
  </head>
 <body  
 <!--onload="DIVXxChart_init(document.getElementById('DIVXxChart3'));"--> >
<div id="DIVXxChart3" style="width: 800px; height: 650px;">         
</div>

<script type='application/javascript'>
var DIVXxChartVar = {
};
           
function DIVXxChart_init (doc){
             DIVXxChartVar.myChart = echarts.init(doc);
             DIVXxChartVar.option = {
	          title: { text: 'EChart3' },
	          tooltip: { },
	          legend: { data: [ 'Sales' ] },
	          xAxis: { data: [ 'shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks' ] },
	          yAxis: { },
	          series: [{
	            name: 'Sales',
	            type: 'bar',
	            data: [23, 20, 36, 10, 10, 20]
	          }]
             };
        
              DIVXxChartVar.myChart.setOption(DIVXxChartVar.option);
             DIVXxChartVar.myChart.resize();
           };
        
function DIVXxChart_updateValues(incomingValue) {
               var data0 = DIVXxChartVar.option.series[0].data;
              data0[0] = incomingValue +5;          
              DIVXxChartVar.myChart.setOption(DIVXxChartVar.option);
              data0 = null;
           };


 DIVXxChart_init(document.getElementById('DIVXxChart3'));
setInterval(function (){<html><head>
  <title>Generated for DIVXxChart3</title>
<script src="echarts.min.js"></script>
  </head>
 <body  
 <!--onload="DIVXxChart_init(document.getElementById('DIVXxChart3'));"--> >
<div id="DIVXxChart3" style="width: 800px; height: 650px;">         
</div>

<script type='application/javascript'>
var DIVXxChartVar = {
};
           
function DIVXxChart_init (doc){
             DIVXxChartVar.myChart = echarts.init(doc);
             DIVXxChartVar.option = {
	          title: { text: 'EChart3' },
	          tooltip: { },
	          legend: { data: [ 'Sales' ] },
	          xAxis: { data: [ 'shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks' ] },
	          yAxis: { },
	          series: [{
	            name: 'Sales',
	            type: 'bar',
	            data: [23, 20, 36, 10, 10, 20]
	          }]
             };
        
              DIVXxChartVar.myChart.setOption(DIVXxChartVar.option);
             DIVXxChartVar.myChart.resize();
           };
        
function DIVXxChart_updateValues(incomingValue) {
               var data0 = DIVXxChartVar.option.series[0].data;
              data0[0] = incomingValue +5;          
              DIVXxChartVar.myChart.setOption(DIVXxChartVar.option);
              data0 = null;
           };


 DIVXxChart_init(document.getElementById('DIVXxChart3'));
setInterval(function (){
DIVXxChart_updateValues(Math.random()*100)
},500);
</script>
</body></html>
DIVXxChart_updateValues(Math.random()*100)
},500);
</script>
</body></html>