Memory leak after destruction of 3D graphic object #9437

mismo · 2018-11-20T12:56:15Z

I am using English in this issue. 在这个 Issue 中我使用了英文（强烈建议）。

General Questions

PLEASE MAKE SURE OF ALL THE FOLLOWING OPTIONS IN REQUIRED FIELDS ARE TICKED (with x)!
Otherwise, the issue will not be answered.
And think before you tick. :)
请确保以下每项都打上勾了！并且确保都做了这些事哦~ 这将大量简化我们的工作流程，使你的问题更快速得到解答。

Required: I have read the document and examples and tried to solve it by myself. （必填）我读过了文档和教程，并且曾试图自己解决问题。
Required: I have searched for similar issues and that didn't help. （必填）我搜索过 issue 但是没有帮助。
Required: I have tried with the latest version of ECharts and still have this problem. （必填）我试过最新版本的 ECharts，还是存在这个问题。

In this issue, I have provided information with: 在这个 issue 中我提供了以下信息：

Required: issue type；（必填）issue 类型
Required: one sentence description in issue details；（必填）一句话的问题描述
Required: demo；（必填）能反映问题的例子（如果你想提问或报 bug）
Required: ECharts version；ECharts 版本

Issue Type

I have a question to ask about how to use ECharts to ...；我想提问如何使用 ECharts 实现某功能
I have a bug to report；我想要报 bug
I have a feature to request, e.g.: I'd like a new feature that ...；我需要一个新功能
I have a feature to enhance, e.g.: The current feature should be improved in the way that ...；我希望改进某个功能
There's something wrong with the documents；文档有些问题
Others, or I'm not sure which issue types to choose here；其他，或我不知道应该选什么类型

Issue Details

{DESCRIBE_HERE}
Memory leak after destruction of 3D graphic object

Expected Behavior

{DESCRIBE_HERE}
Fix memory leak

Current Behavior

{DESCRIBE_HERE}
Select the "3D" graphics type in the demo test page, click the "refresh" button many times, and use Chrome to detect memory leaks.
在示例测试页面中选择“3D”图形类型，多次点击“刷新”按钮，使用Chrome检测内存泄漏。
(Note: select the "common" graphic type to perform the same operation without memory leaks).
(注：选择“普通”图形类型执行相同操作，没有内存泄漏)

Online Example

THIS IS REQUIRED FOR ALL BUG REPORTS AND QUESTIONS!!! 如果是提问或报 bug 一定要提供这一项！

{ADD_LINK_OF_DEMO_HERE}

{PASTE_RELATED_CODE_HERE}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test ECharts Create And Destroy</title>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
}
#output {
	margin: 4px;
	height: 500px;
	border: 1px solid #000;
}
</style>
<script type="text/javascript" src="./js/echarts/min/echarts.js"></script>
<script type="text/javascript" src="./js/echarts/min/echarts-gl.js"></script>
<script type="text/javascript">
	var data3D = [ [ 0, 0, 5 ], [ 0, 1, 1 ], [ 0, 2, 0 ], [ 0, 3, 0 ], [ 0, 4, 0 ], [ 0, 5, 0 ], [ 0, 6, 0 ], [ 0, 7, 0 ],
    [ 0, 8, 0 ], [ 0, 9, 0 ], [ 0, 10, 0 ], [ 0, 11, 2 ], [ 0, 12, 4 ], [ 0, 13, 1 ], [ 0, 14, 1 ], [ 0, 15, 3 ],
    [ 0, 16, 4 ], [ 0, 17, 6 ], [ 0, 18, 4 ], [ 0, 19, 4 ], [ 0, 20, 3 ], [ 0, 21, 3 ], [ 0, 22, 2 ], [ 0, 23, 5 ],
    [ 1, 0, 7 ], [ 1, 1, 0 ], [ 1, 2, 0 ], [ 1, 3, 0 ], [ 1, 4, 0 ], [ 1, 5, 0 ], [ 1, 6, 0 ], [ 1, 7, 0 ],
    [ 1, 8, 0 ], [ 1, 9, 0 ], [ 1, 10, 5 ], [ 1, 11, 2 ], [ 1, 12, 2 ], [ 1, 13, 6 ], [ 1, 14, 9 ], [ 1, 15, 11 ],
    [ 1, 16, 6 ], [ 1, 17, 7 ], [ 1, 18, 8 ], [ 1, 19, 12 ], [ 1, 20, 5 ], [ 1, 21, 5 ], [ 1, 22, 7 ], [ 1, 23, 2 ],
    [ 2, 0, 1 ], [ 2, 1, 1 ], [ 2, 2, 0 ], [ 2, 3, 0 ], [ 2, 4, 0 ], [ 2, 5, 0 ], [ 2, 6, 0 ], [ 2, 7, 0 ],
    [ 2, 8, 0 ], [ 2, 9, 0 ], [ 2, 10, 3 ], [ 2, 11, 2 ], [ 2, 12, 1 ], [ 2, 13, 9 ], [ 2, 14, 8 ], [ 2, 15, 10 ],
    [ 2, 16, 6 ], [ 2, 17, 5 ], [ 2, 18, 5 ], [ 2, 19, 5 ], [ 2, 20, 7 ], [ 2, 21, 4 ], [ 2, 22, 2 ], [ 2, 23, 4 ],
    [ 3, 0, 7 ], [ 3, 1, 3 ], [ 3, 2, 0 ], [ 3, 3, 0 ], [ 3, 4, 0 ], [ 3, 5, 0 ], [ 3, 6, 0 ], [ 3, 7, 0 ],
    [ 3, 8, 1 ], [ 3, 9, 0 ], [ 3, 10, 5 ], [ 3, 11, 4 ], [ 3, 12, 7 ], [ 3, 13, 14 ], [ 3, 14, 13 ], [ 3, 15, 12 ],
    [ 3, 16, 9 ], [ 3, 17, 5 ], [ 3, 18, 5 ], [ 3, 19, 10 ], [ 3, 20, 6 ], [ 3, 21, 4 ], [ 3, 22, 4 ], [ 3, 23, 1 ],
    [ 4, 0, 1 ], [ 4, 1, 3 ], [ 4, 2, 0 ], [ 4, 3, 0 ], [ 4, 4, 0 ], [ 4, 5, 1 ], [ 4, 6, 0 ], [ 4, 7, 0 ],
    [ 4, 8, 0 ], [ 4, 9, 2 ], [ 4, 10, 4 ], [ 4, 11, 4 ], [ 4, 12, 2 ], [ 4, 13, 4 ], [ 4, 14, 4 ], [ 4, 15, 14 ],
    [ 4, 16, 12 ], [ 4, 17, 1 ], [ 4, 18, 8 ], [ 4, 19, 5 ], [ 4, 20, 3 ], [ 4, 21, 7 ], [ 4, 22, 3 ], [ 4, 23, 0 ],
    [ 5, 0, 2 ], [ 5, 1, 1 ], [ 5, 2, 0 ], [ 5, 3, 3 ], [ 5, 4, 0 ], [ 5, 5, 0 ], [ 5, 6, 0 ], [ 5, 7, 0 ],
    [ 5, 8, 2 ], [ 5, 9, 0 ], [ 5, 10, 4 ], [ 5, 11, 1 ], [ 5, 12, 5 ], [ 5, 13, 10 ], [ 5, 14, 5 ], [ 5, 15, 7 ],
    [ 5, 16, 11 ], [ 5, 17, 6 ], [ 5, 18, 0 ], [ 5, 19, 5 ], [ 5, 20, 3 ], [ 5, 21, 4 ], [ 5, 22, 2 ], [ 5, 23, 0 ],
    [ 6, 0, 1 ], [ 6, 1, 0 ], [ 6, 2, 0 ], [ 6, 3, 0 ], [ 6, 4, 0 ], [ 6, 5, 0 ], [ 6, 6, 0 ], [ 6, 7, 0 ],
    [ 6, 8, 0 ], [ 6, 9, 0 ], [ 6, 10, 1 ], [ 6, 11, 0 ], [ 6, 12, 2 ], [ 6, 13, 1 ], [ 6, 14, 3 ], [ 6, 15, 4 ],
    [ 6, 16, 0 ], [ 6, 17, 0 ], [ 6, 18, 0 ], [ 6, 19, 0 ], [ 6, 20, 1 ], [ 6, 21, 2 ], [ 6, 22, 2 ], [ 6, 23, 6 ] ];
	var options3D = {
	  tooltip: {},
	  visualMap: {
	    max: 20,
	    inRange: {
	      color: [ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43',
	          '#d73027', '#a50026' ]
	    }
	  },
	  xAxis3D: {
	    type: 'category',
	    data: [ '12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p',
	        '5p', '6p', '7p', '8p', '9p', '10p', '11p' ]
	  },
	  yAxis3D: {
	    type: 'category',
	    data: [ 'Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday' ]
	  },
	  zAxis3D: {
	    type: 'value'
	  },
	  grid3D: {
	    boxWidth: 200,
	    boxDepth: 80,
	    light: {
	      main: {
	        intensity: 1.2,
	        shadow: true
	      },
	      ambient: {
	        intensity: 0.3
	      }
	    }
	  },
	  series: [ {
	    type: 'bar3D',
	    data: data3D.map(function(item) {
	      return {
	        value: [ item[1], item[0], item[2] ],
	      }
	    }),
	    shading: 'lambert',
	
	    label: {
	      textStyle: {
	        fontSize: 16,
	        borderWidth: 1
	      }
	    },
	
	    emphasis: {
	      label: {
	        textStyle: {
	          fontSize: 20,
	          color: '#900'
	        }
	      },
	      itemStyle: {
	        color: '#900'
	      }
	    }
	  } ]
	};
	//
	var options = {
		tooltip : {
			show : true
		},
		legend : {
			data : [ '销量' ]
		},
		xAxis : [ {
			type : 'category',
			data : [ '衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子' ]
		} ],
		yAxis : [ {
			type : 'value'
		} ],
		series : [ {
			name : '销量',
			type : 'bar',
			data : [ 5, 20, 40, 10, 10, 20 ]
		} ]
	};
	//
	var chart;
	function byId(id) {
		return document.getElementById(id);
	};
	function refreshHandler() {
		cleanup();
		var container = byId('output'), chartType = byId('ctype').value - 0;
		var option = chartType === 0 ? options : options3D;
		
		chart = echarts.init(container);
		chart && chart.setOption(option, true);
	}
	function cleanup() {
		chart && chart.dispose && chart.dispose();
		chart = null;
	}
</script>
</head>
<body onunload="cleanup();">
	<div>
		图形类型：<select id="ctype"><option value="0">普通</option><option value="1">3D</option></select>&nbsp;
		<button id="btnRefresh" onclick="refreshHandler()">刷新</button>
	</div>
	<div id="output">
	</div>
</body>
</html>

Topics

Anything Else We Need to Know

{DESCRIBE_HERE}
Many times setOption has similar problems without dispose.

Environment

ECharts version；ECharts 版本: {DESCRIBE_HERE} 4.1.0 (claygl version 1.2.1)
It happens only on certain browsers or operating systems. 对于特定浏览器或操作系统才会出现的问题，请提供相应环境信息：{BROWSER_VERSION_OR_OS_INFORMATION_HERE}

ergouser · 2020-01-08T17:16:22Z

@mismo Can you please restest any failure cases you have against the latest (4.6) report any issues?

trannamquan · 2020-06-22T01:30:20Z

I also faced this problem. Can we have some workarounds for now?

github-actions · 2022-06-22T21:04:27Z

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 · 2022-06-29T21:04:40Z

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!

deqingli assigned pissang Nov 22, 2018

deqingli added the pending We are not sure about whether this is a bug/new feature. label Nov 22, 2018

ergouser mentioned this issue May 20, 2019

dynamic chart memory leak #10130

Open

ergouser mentioned this issue Jan 7, 2020

[SURVEY] What companies are using Apache ECharts ? #11135

Open

github-actions bot added the stale Inactive for a long time. Will be closed in 7 days. label Jun 22, 2022

github-actions bot closed this as completed Jun 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Memory leak after destruction of 3D graphic object #9437

Memory leak after destruction of 3D graphic object #9437

mismo commented Nov 20, 2018 •

edited

ergouser commented Jan 8, 2020

trannamquan commented Jun 22, 2020

github-actions bot commented Jun 22, 2022

github-actions bot commented Jun 29, 2022

Memory leak after destruction of 3D graphic object #9437

Memory leak after destruction of 3D graphic object #9437

Comments

mismo commented Nov 20, 2018 • edited

General Questions

Issue Type

Issue Details

Expected Behavior

Current Behavior

Online Example

Topics

Anything Else We Need to Know

Environment

ergouser commented Jan 8, 2020

trannamquan commented Jun 22, 2020

github-actions bot commented Jun 22, 2022

github-actions bot commented Jun 29, 2022

mismo commented Nov 20, 2018 •

edited