Memory Leaks #7002
Description
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 线图和饼图如何去除无数据的灰色symbol #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>