Skip to content

echarts内存泄露 #4726

New issue
New issue
Closed
Closed
echarts内存泄露#4726
Labels
staleInactive for a long time. Will be closed in 7 days.
@tangniye

Description

@tangniye
tangniye
opened on Dec 19, 2016

One-line summary [问题简述]

页面放置3天左右会崩溃，我用了dispose()方法，虽然有清理内存，但是总的趋势是在上涨的，大致上是1个小时会出现10M的增长。现在已经排除网络ajax请求、页面其他元素导致的原因。

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:3.3.1
  • Browser version [浏览器类型和版本]:chrome54.0.2840.71 m
  • OS Version [操作系统类型和版本]:Windows 7

Expected behaviour [期望结果]

期望内存无论多长时间都不增长，保持平稳

ECharts option [ECharts配置项]

var arrowPath = 'path://M44.826692 971.068343l526.323967-911.559195 526.292794 911.559195-526.292794-188.471613z';

option = {
 backgroundColor: 'transparent',
        tooltip: {
          backgroundColor: 'transparent',
          enterable: true,
          hideDelay: 3000,
          formatter: function (param) {
            var str, type = param.seriesIndex == 1 ? 'src' : 'dst';
            switch (type) {
              case 'src':
                str = "<div class='echart-tooltip map-tooltip'><p>攻击源：" + param.name + "</p><p>攻击次数：" + countUnit(param.value[2]) + "次</p></div>";
                break;
              case 'dst':
                str = "<div class='echart-tooltip map-tooltip'><p>被攻击地：" + param.name + "</p><p>被攻击次数：" + countUnit(param.value[2]) + "次</p></div>";
                break;
            }
            return str;
          }
        },
        geo: {
          map: map,
          nameMap: nameMap,
          roam: true,
          label: {
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'rgba(1,41,71,.3)',
              borderColor: '#52bb7f'
            },
            emphasis: {
              areaColor: 'rgba(1,41,71,.5)',
              borderColor: '#fbaf09'
            }
          }
        },
        series: [
          {
            name: 'line',
            type: 'lines',
            zlevel: 2,
            silent: true,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: arrowPath,
              symbolSize: 8
            },
            lineStyle: {
              normal: {
                shadowBlur: 10,
                width: 1,
                opacity: 0.8,
                curveness: 0.2
              }
            },
            data: lines
          },
          {
            name: 'src',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            symbolSize: 6,
            rippleEffect: {
              scale: 4
            },
            label: {
              normal: {
                show: true,
                position: 'bottom',
                formatter: '{b}',
                textStyle: {
                  color: '#4bf79a'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#ff6600',
                shadowColor: '#ff6600',
                shadowBlur: 15
              }
            },
            data: src
          },
          {
            name: 'dst',
            type: 'effectScatter',
            symbol: 'image://styles/image/situation-circle.png',
            coordinateSystem: 'geo',
            zlevel: 2,
            showEffectOn: 'emphasis',
            symbolSize: 30,
            rippleEffect: {
              scale: 0.1,
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: true,
                position: 'bottom',
                formatter: '{b}',
                textStyle: {
                  color: '#4bf79a'
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#fa8e02'
              }
            },
            data: dst
          }
        ]
}

Other comments [其他信息]

这个是放置一晚上的内存趋势图。这个趋势下去，页面放置两三天就会崩溃。
lalokvipvc0bq80hww_1883_323

Activity

pissang

pissang commented on Dec 19, 2016

@pissang
pissang
on Dec 19, 2016 · edited by pissang
Contributor

没定时更新数据么？

tangniye

tangniye commented on Dec 20, 2016

@tangniye
tangniye
on Dec 20, 2016
Author

定时更新了，定时setOption()。

pissang

pissang commented on Dec 20, 2016

@pissang
pissang
on Dec 20, 2016
Contributor

那发个完整的例子看下？

elelvenliu

elelvenliu commented on Dec 21, 2016

@elelvenliu
elelvenliu
on Dec 21, 2016

楼主的趋势图是什么软件？

arrinhzh

arrinhzh commented on Dec 29, 2016

@arrinhzh
arrinhzh
on Dec 29, 2016

请问这个问题解决了吗？用了dispose()方法，但是内存还是在上升，有办法稳定吗？

voidsteed

voidsteed commented on Feb 7, 2017

@voidsteed
voidsteed
on Feb 7, 2017

我也有相同的问题，加载过多数据就会崩溃

voidsteed

voidsteed commented on Feb 8, 2017

@voidsteed
voidsteed
on Feb 8, 2017

我用的是散点图，而且setOption的notMerge选项没有效果，一次读取40万的点。三次load浏览器就崩溃了。
我今天找到一个可行的方法：
如果第一次新建图表，创建一个新的option。如果在图表存在的情况下， 用getOption取到已经存在的option, 重新set option.series = new series. 然后用chartInstance.clear()，清空option，最后setOption(option, false, false)。这个选项会merge一起清空的data series。我的内存指标也下降不少，再也没有浏览器崩溃的情况了。
可能不是最好的方案，但是解决了我的问题。希望其他大神可以给点更好的建议

oograce

oograce commented on Apr 24, 2017

@oograce
oograce
on Apr 24, 2017

内存问题不解决，这玩意就很不好用

shaqueoneal

shaqueoneal commented on Jun 2, 2017

@shaqueoneal
shaqueoneal
on Jun 2, 2017

内存问题不解决，这玩意就很不好用

since91

since91 commented on Oct 30, 2017

@since91
since91
on Oct 30, 2017

我也遇到这个问题，多图表定时渲染时，内存泄露

759325100

759325100 commented on Jan 4, 2018

@759325100
759325100
on Jan 4, 2018

同样遇到这样的问题，涉及到页面多图表的定时更新，使用的mergeOptions，内存一晚上飚的很厉害，基本上3~4G的样子。还没尝试过定时的dispose，想知道这个问题是否有解决方案。

JerryDai90

JerryDai90 commented on Apr 18, 2018

@JerryDai90
JerryDai90
on Apr 18, 2018 · edited by JerryDai90

我也遇到同样问题，我们一个页面有15个以上的图形，机器内存2.7G，不到一个小时就页面崩溃了，后面每次刷新数据都销毁掉 echart 对象，也发现是如此。

MartinGaoC

MartinGaoC commented on Jan 25, 2019

@MartinGaoC
MartinGaoC
on Jan 25, 2019

这个问题看来是很多人都遇到了，一个中国地图带很多图表，内存稳定上涨。没有避免的办法了吗

100pah

100pah commented on Jan 27, 2019

@100pah
100pah
on Jan 27, 2019 · edited by 100pah
Member

如果仍然有内存不断上涨的例子，希望能提供更多的信息（版本、能渲染出图表的 option、setOption 等 API 调用的语句，运行环境等），以帮助复现场景定位问题。

chengwb53

chengwb53 commented on Jan 30, 2019

@chengwb53
chengwb53
on Jan 30, 2019 · edited by chengwb53

使用dispatchAction设置tooltip轮播功能

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内存泄漏</title>
</head>
<body>
<div id="test" style="width: 500px; height: 300px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
<script>
  var chart = echarts.init(document.getElementById('test'));
  chart.setOption({
      title: {
          text: '模拟数据'
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#283b56'
              }
          }
      },
      legend: {
          data:['最新成交价', '预购队列']
      },
      toolbox: {
          show: true,
          feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
          }
      },
      dataZoom: {
          show: false,
          start: 0,
          end: 100
      },
      xAxis: [
          {
              type: 'category',
              boundaryGap: true,
              data: (function (){
                  var now = new Date();
                  var res = [];
                  var len = 10;
                  while (len--) {
                      res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                      now = new Date(now - 2000);
                  }
                  return res;
              })()
          },
          {
              type: 'category',
              boundaryGap: true,
              data: (function (){
                  var res = [];
                  var len = 10;
                  while (len--) {
                      res.push(10 - len - 1);
                  }
                  return res;
              })()
          }
      ],
      yAxis: [
          {
              type: 'value',
              scale: true,
              name: '价格',
              max: 30,
              min: 0,
              boundaryGap: [0.2, 0.2]
          },
          {
              type: 'value',
              scale: true,
              name: '预购量',
              max: 1200,
              min: 0,
              boundaryGap: [0.2, 0.2]
          }
      ],
      series: [
          {
              name:'预购队列',
              type:'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data:(function (){
                  var res = [];
                  var len = 10;
                  while (len--) {
                      res.push(Math.round(Math.random() * 1000));
                  }
                  return res;
              })()
          },
          {
              name:'最新成交价',
              type:'line',
              data:(function (){
                  var res = [];
                  var len = 0;
                  while (len < 10) {
                      res.push((Math.random()*10 + 5).toFixed(1) - 0);
                      len++;
                  }
                  return res;
              })()
          }
      ]
  });

  var series = chart.getOption().series[0];
  var size = series.data.length;

  var index = 0;
  setInterval(function () {
      chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
      });

      index = ++index % size;
  }, 2000);
</script>
</body>
</html>

版本信息：
chrome：70.0.3538.110（正式版本） （32 位）
echarts: 4.2.0-rc.2

看图：
image

image

chengwb53

chengwb53 commented on Jan 30, 2019

@chengwb53
chengwb53
on Jan 30, 2019 · edited by chengwb53

使用clear以及dispose方法销毁图表并循环创建图表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内存泄漏</title>
</head>
<body>
<div id="test" style="width: 500px; height: 300px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
<script>
  var chart = null;
  function createChart() {
      chart = echarts.init(document.getElementById('test'));
      chart.setOption({
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
      });
  }

  createChart();
  setInterval(function () {
      chart.clear();
      chart.dispose();
      createChart();
  }, 3000);
</script>
</body>
</html>

版本信息：
chrome：70.0.3538.110（正式版本） （32 位）
echarts: 4.2.0-rc.2

image

chengwb53

chengwb53 commented on Jan 30, 2019

@chengwb53
chengwb53
on Jan 30, 2019 · edited by chengwb53

使用clear清除数据后循环设置option

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>内存泄漏</title>
</head>
<body>
<div id="test" style="width: 500px; height: 300px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
<script>
  var chart = null;
  function createChart() {
      chart = echarts.init(document.getElementById('test'));
      chart.setOption({
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
      });
  }

  createChart();
  setInterval(function () {
      chart.clear();
      chart.setOption({
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
      });
  }, 3000);
</script>
</body>
</html>

版本信息：
chrome：70.0.3538.110（正式版本） （32 位）
echarts: 4.2.0-rc.2

image

chengwb53
mentioned this on Feb 26, 2019
Ovilia
added
staleInactive for a long time. Will be closed in 7 days.
on Jul 30, 2019
stale
closed this as completedon Aug 7, 2019
oldRabbitForz

oldRabbitForz commented on Oct 26, 2022

@oldRabbitForz
oldRabbitForz
on Oct 26, 2022

那发个完整的例子看下？

demo哥，又看到你在要demo了

EmilyHOC

EmilyHOC commented on Aug 10, 2023

@EmilyHOC
EmilyHOC
on Aug 10, 2023

我解决了这个问题，当你用setInterval去定时调用动画的时候，可以用setTimeout去模拟，每次调用之前把setTimeout的timer给clear掉，然后递归调用，测试发现这样垃圾回收就会回收内存并且3天页面都不挂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    staleInactive for a long time. Will be closed in 7 days.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Ovilia@pissang@100pah@voidsteed@759325100

        Issue actions
          echarts内存泄露 · Issue #4726 · apache/echarts