search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.3k stars 19.61k forks source link

Memory Leaks #7002

Open ergouser opened 6 years ago

ergouser commented 6 years ago

One-line summary [问题简述]

Memory leak

Version & Environment [版本及环境]

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>
ergouser commented 6 years ago

Issue still exists in version 3.8.4

komorebi-san commented 6 years ago

I am facing the same issue as well.

Also, I realised that the dynamic charting tutorial having memory leak as well.

https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/tutorial-dynamic-data

https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Loading%20and%20Updating%20of%20Asynchronous%20Data

@ergouser Did you manage to resolve the issue?

sorenhoyer commented 6 years ago

+1 using this for real time line chat with thousands of datapoints. Memory steadily increases over time.

komorebi-san commented 6 years ago

@sorenhoyer Did you manage to solve the issue?

luissmg commented 6 years ago

+1 I don't have that much data but I am using multiple charts on the same page and after a while it gets just impossible to use it.

ergouser commented 6 years ago

@pissang Do we have an update? Has anything been fixed in the latest version (4.0.4)? Thanks.

luissmg commented 6 years ago

@ergouser I don't think so because I have the latest release!

sorenhoyer commented 6 years ago

@komorebi-san unfortunately no, but creating your own charts with d3+html5 canvas is not that hard, and really pays off. That's what I ended up doing.

komorebi-san commented 6 years ago

@sorenhoyer I guess you are right.

I am surprised that this memory leak issue isn't an important one for them. ¯_(ツ)_/¯

abkhalid commented 5 years ago

@sorenhoyer I guess you are right.

I am surprised that this memory leak issue isn't an important one for them. ¯(ツ)/¯

Do you know if there is some way where we can register our request to get this prioritized

abkhalid commented 5 years ago

@komorebi-san unfortunately no, but creating your own charts with d3+html5 canvas is not that hard, and really pays off. That's what I ended up doing.

Hi, would you be willing to share your library with the group?

ergouser commented 4 years ago

@komorebi-san @abkhalid @luissmg @sorenhoyer I've been running the attached example overnight without seeing any noticeable increase in memory usage. If you have examples that were previously showing an issue please retest against the latest (4.6) release and report any issues.

ergouser commented 4 years ago

I think that this example still has a memory leak with 4.6. While the rate is much (much) smaller than earlier versions it still means that the application will crash, possibly after a week rather than a few minutes, but that's still not acceptable in a 24/7/365 production environment.

I'm not completely sure that there is a leak. After running for about 20 hours the trend of the memory footprint for the tab running the chart code in Chromium is generally upwards. It started with a footprint oscillating around 100k and is now oscillating around about 200k. I didn't initially take note of the GPU memory usage, but that also seems to be trending upwards.

While the snapshots seem to show a small (1.5MB) increase I can't definitively assign this to the application - I just started running the chart in an existing browser instance so it's possible JavaScript on other pages is contributing to this. I think that Chromium uses only one JS engine instance, but I'm not sure - I'm not an expert there. I'm also not enough of a JavaScript expert to confidently interpret the contents of the snapshot.

There's definitely been some good progress, but given the critical nature of memory leaks I would appreciate is someone else could replicate and determine whether there is still a slow leak.

I cannot detect any issues with the application in #10130 but that's a much smaller, less demanding application - it would take longer to demonstrate a problem.

trannamquan commented 4 years ago

This happens when the chart uses GL, also. It seems that charts using Gl cannot dispose properly. Can I know some ways to solve this memory leak problem?

luissmg commented 4 years ago

Hey! Sorry for the late reply, I not in the project that used the lib, can't give you any insights on this :(

aurelien-boubennec commented 1 year ago

2 years later and I'm experiencing the same issue.

GoldenretriverYT commented 1 year ago

Also having this problem, after a few hours our site uses almost 800mb RAM which is obviously too much.

0xAskar commented 1 year ago

I am having this problem as well, does anyone have a solution? Is there a cleanup method that needs to be enabled?

linxiaowu66 commented 5 months ago

so terrible! This issue hang up until today ?