apache / apache/echarts

[Bug] Memory leak with SVG

Open
#19,627 1 comment 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.3.3

### Link to Minimal Reproduction

https://jsfiddle.net/9d6egnLo/1/

### Steps to Reproduce



Test ECharts

html,
body {
margin: 0;
padding: 0;
}
#output {
margin: 4px;
height: 500px;
border: 1px solid #000;
}






//
var options = {
series: [
{
type: "line",
name: "系列一",
stack: "系列一0",
data: [
{
value: 1,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 25,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 43,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 13,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 80,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
],
symbol: "rect",
symbolSize: 8,
itemStyle: {
opacity: 0,
},
markLine: {},
lineStyle: {
color: "#61FFF2FF",
width: 2,
type: "solid",
shadowBlur: 6,
shadowColor: "rgba(0, 0, 0, 0)",
shadowOffsetX: 1,
shadowOffsetY: 1,
},
areaStyle: {
color: "",
},
label: {
opacity: 1,
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 12,
color: "#ffffff",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
rich: {
spacing: {
color: "rgba(0,0,0,0)",
fontSize: 1,
},
},
show: false,
position: "top",
offset: [0, 0],
padding: [2, 6, 2, 6],
backgroundColor: "#1A1A1A8C",
borderColor: "#FFFFFF40",
borderType: "solid",
borderWidth: 0,
},
labelLine: {
show: true,
lineStyle: {
color: "#61FFF2FF",
type: "solid",
width: 1,
},
smooth: true,
},
emphasis: {
focus: "series",
lineStyle: {
width: 2,
color: "#84FFF5FF",
},
areaStyle: {},
label: {},
},
animation: true,
animationDuration: 1000,
animationEasing: "linear",
animationDelay: 0,
},
{
type: "line",
name: "系列二",
stack: "系列二1",
data: [
{
value: 47,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 76,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 83,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 72,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
value: 32,
itemStyle: {
opacity: 0,
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
],
symbol: "rect",
symbolSize: 8,
itemStyle: {
opacity: 0,
},
markLine: {},
lineStyle: {
color: "#27A197FF",
width: 2,
type: "solid",
shadowBlur: 6,
shadowColor: "rgba(0, 0, 0, 0)",
shadowOffsetX: 1,
shadowOffsetY: 1,
},
areaStyle: {
color: "",
},
label: {
opacity: 1,
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 12,
color: "#ffffff",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
rich: {
spacing: {
color: "rgba(0,0,0,0)",
fontSize: 1,
},
},
show: false,
position: "top",
offset: [0, 0],
padding: [2, 6, 2, 6],
backgroundColor: "#1A1A1A8C",
borderColor: "#FFFFFF40",
borderType: "solid",
borderWidth: 0,
},
labelLine: {
show: true,
lineStyle: {
color: "#27A197FF",
type: "solid",
width: 1,
},
smooth: true,
},
emphasis: {
focus: "series",
lineStyle: {
width: 2,
color: "#4AB4ACFF",
},
areaStyle: {},
label: {},
},
animation: true,
animationDuration: 1000,
animationEasing: "linear",
animationDelay: 0,
},
],
grid: {
left: 18,
right: 38,
top: 50,
bottom: 25,
containLabel: true,
},
xAxis: {
interval: null,
boundaryGap: null,
triggerEvent: true,
splitLine: {
show: false,
lineStyle: {
color: "#8D999826",
width: 1,
type: "solid",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#8D999899",
width: 1,
},
},
axisTick: {
show: true,
length: 0,
interval: 0,
lineStyle: {
color: "#8D999899",
width: 0,
},
},
axisLabel: {
show: true,
rotate: 0,
margin: 8,
interval: 0,
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 12,
color: "#EBFFFDCC",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
rich: {
spacing: {
color: "rgba(0,0,0,0)",
fontSize: 1,
},
},
},
name: "{padding|}",
nameLocation: "end",
nameTextStyle: {
rich: {
padding: {
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 12,
color: "#EBFFFDCC",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
rich: {
spacing: {
color: "rgba(0,0,0,0)",
fontSize: 1,
},
},
padding: [0, 0, 0, 0],
},
},
},
axisPointer: {
show: true,
type: "line",
shadowStyle: {
color: {
type: "linear",
x: 0.5,
y: 0,
x2: 0.5,
y2: 1,
colorStops: [
{
color: "#8F8F8F99",
offset: 0,
},
{
color: "#4F4F4F66",
offset: 1,
},
],
},
opacity: 0.5,
},
lineStyle: {
color: "#FFFFFFFF",
opacity: 0.5,
},
label: {
color: "",
backgroundColor: "transparent",
},
triggerTooltip: false,
},
type: "category",
data: ["Type0", "Type1", "Type2", "Type3", "Type4"],
},
yAxis: {
interval: 21,
triggerEvent: true,
splitLine: {
show: true,
lineStyle: {
color: "#8D999826",
width: 1,
type: "solid",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#8D999899",
width: 1,
},
},
axisTick: {
show: true,
length: 0,
lineStyle: {
color: "#8D999899",
width: 0,
},
},
axisLabel: {
show: true,
rotate: 0,
margin: 8,
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 12,
color: "#EBFFFDCC",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
rich: {
spacing: {
color: "rgba(0,0,0,0)",
fontSize: 1,
},
},
},
name: "{padding|}",
nameLocation: "end",
nameTextStyle: {
rich: {
padding: {
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 12,
color: "#EBFFFDCC",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
rich: {
spacing: {
color: "rgba(0,0,0,0)",
fontSize: 1,
},
},
padding: [0, 0, 0, 0],
},
},
},
axisPointer: {
show: true,
type: "line",
shadowStyle: {
color: "rgba(0,0,0,0)",
opacity: 0.5,
},
lineStyle: {
color: "transparent",
opacity: 0.5,
},
label: {
color: "",
backgroundColor: "transparent",
},
triggerTooltip: false,
},
},
dataZoom: [
{
type: "inside",
xAxisIndex: 0,
minValueSpan: 4,
maxValueSpan: 4,
zoomLock: true,
},
],
title: {
show: true,
left: "left",
top: "top",
text: "标题",
textStyle: {
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
lineHeight: 12,
color: "#EBFFFDFF",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 6,
textShadowOffsetX: 1,
textShadowOffsetY: 0,
rich: {
spacing: {
color: "rgba(0,0,0,0)",
fontSize: 1,
},
},
},
padding: [10, 10, 10, 10],
},
legend: {
show: true,
orient: "horizontal",
left: "right",
top: "top",
width: "80%",
height: "80%",
itemGap: 0,
align: "left",
itemStyle: {
opacity: 1,
borderWidth: 0,
borderColor: "auto",
},
textStyle: {
rich: {
widthBox: {
fontWeight: "normal",
fontStyle: "normal",
color: "#EBFFFDFF",
textShadowColor: "rgba(0,0,0,0)",
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
fontSize: 12,
lineHeight: 12,
width: 36,
padding: [0, 0, 0, 1],
},
padding: {
fontSize: 12,
height: 12,
lineHeight: 1,
padding: [6, 4, 6, 4],
},
},
},
type: "scroll",
padding: [18, 10, 18, 10],
tooltip: {
show: true,
},
itemWidth: 15,
itemHeight: 15,
icon: "path://M512,192c154.81597900390625,0,283.93597412109375,109.95199584960938,313.5999755859375,256L1024,448l0,128l-198.4000244140625,0.031982421875C795.9359741210938,722.0800170898438,666.8159790039062,832,512,832c-154.81600952148438,0,-283.9360046386719,-109.91998291015625,-313.6000061035156,-255.968017578125L0,576l0,-128l198.39999389648438,0c29.66400146484375,-146.04800415039062,158.78399658203125,-256,313.6000061035156,-256Zm-29.66400146484375,130.27200317382812l-2.0159912109375,0.32000732421875a191.264,191.264,0,0,0,-14.240020751953125,2.944000244140625l-0.959991455078125,0.2239990234375l-1.91998291015625,0.511993408203125a190.528,190.528,0,0,0,-60.800018310546875,28.063995361328125a192.96,192.96,0,0,0,-57.1199951171875,62.368011474609375l-1.279998779296875,2.303985595703125l-0.704010009765625,1.279998779296875a191.584,191.584,0,0,0,-11.647979736328125,25.696014404296875l-0.73602294921875,2.0159912109375A191.68,191.68,0,0,0,320,512a190.624,190.624,0,0,0,19.23199462890625,83.87200927734375l0.576019287109375,1.18402099609375l0.991973876953125,1.98394775390625c1.63201904296875,3.20001220703125,3.360015869140625,6.33599853515625,5.152008056640625,9.44000244140625l1.0880126953125,1.82403564453125l0.319976806640625,0.54400634765625a192.384,192.384,0,0,0,93.5040283203125,79.552001953125l2.27197265625,0.89599609375l0.448028564453125,0.15997314453125a190.528,190.528,0,0,0,16.89599609375,5.5679931640625l2.68798828125,0.70404052734375l1.920013427734375,0.511962890625a190.368,190.368,0,0,0,17.279998779296875,3.488037109375l1.279998779296875,0.19195556640625l4.47998046875,0.6080322265625a192.32,192.32,0,0,0,31.45599365234375,1.31201171875L512,704a195.104,195.104,0,0,0,22.4959716796875,-1.280029296875l1.40802001953125,-0.19195556640625l4.47998046875,-0.6400146484375a191.616,191.616,0,0,0,17.5360107421875,-3.42401123046875l0.96002197265625,-0.2239990234375l1.91998291015625,-0.511962890625a190.528,190.528,0,0,0,19.61602783203125,-6.27203369140625l0.447998046875,-0.15997314453125a190.656,190.656,0,0,0,62.81597900390625,-39.58404541015625a193.472,193.472,0,0,0,32.96002197265625,-40.86395263671875l0.32000732421875,-0.54400634765625a191.904,191.904,0,0,0,6.239990234375,-11.2640380859375l0.9599609375,-1.98394775390625A191.04,191.04,0,0,0,704,512a191.68,191.68,0,0,0,-10.9119873046875,-64l-0.73602294921875,-2.0159912109375a190.592,190.592,0,0,0,-1.27996826171875,-3.391998291015625l2.0159912109375,5.44000244140625a190.624,190.624,0,0,0,-11.135986328125,-25.44000244140625l-1.248046875,-2.33599853515625l-0.7039794921875,-1.279998779296875a191.776,191.776,0,0,0,-30.8800048828125,-41.376007080078125a192.896,192.896,0,0,0,-85.5999755859375,-50.623992919921875l-2.68804931640625,-0.704010009765625l-1.91998291015625,-0.511993408203125a190.336,190.336,0,0,0,-17.24798583984375,-3.488006591796875l-1.280029296875,-0.1920166015625l-4.47998046875,-0.608001708984375a192.384,192.384,0,0,0,-31.552001953125,-1.311981201171875L512,320a195.104,195.104,0,0,0,-22.496002197265625,1.279998779296875l-1.407989501953125,0.191986083984375l-4.480010986328125,0.6400146484375a191.616,191.616,0,0,0,-1.279998779296875,0.160003662109375Z",
pageButtonItemGap: 4,
pageButtonGap: 12,
pageIconColor: "#fff",
pageTextStyle: {
color: "#fff",
},
data: [
{
name: "系列一",
},
{
name: "系列二",
},
],
},
tooltip: {
triggerOn: "mousemove",
show: true,
backgroundColor: "#1A1A1ABF",
borderColor: "#636363FF",
borderWidth: 1,
extraCssText: "line-height:12px;border:1px solid #636363FF;",
padding: [6, 6, 6, 6],
},
color: [
"#61fff2",
"#27a197",
"#0f8663",
"#145d57",
"#104440",
"#159ddb",
"#6db557",
"#d1b15b",
"#f0c17f",
"#dfa94a",
],
animation: true,
animationDuration: 1000,
animationEasing: "linear",
animationDelay: 0,
};
//
var chart;
function byId(id) {
return document.getElementById(id);
}
function refreshHandler() {
cleanup();
var container = byId("output");
if(!chart){
chart = echarts.init(container, null, { renderer: "svg" });
}
chart && chart.setOption(options, true);
setTimeout(() => {
refreshHandler();
}, 5000);
}
function cleanup() {
chart && chart.dispose && chart.dispose();
chart = null;
}
refreshHandler();

### Current Behavior

After running demo for one day, an obvious memory leak was discovered,If the SVG option is removed, there is no such issue
![企业微信截图_17084797379395](https://github.com/apache/echarts/assets/50442979/534db0a5-5a0b-4302-91bf-a88bf7dc227e)

### Expected Behavior

Normal rendering

### Environment

```markdown
- OS:windows 10
- Browser: Chrome 119.0.6045.124
- Framework: JS
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.