echarts动态数据+时间坐标轴内存溢出，页面崩溃

lQei commented 6 years ago

One-line summary [问题简述]

动态绘制实时曲线，前端使用vue框架，绘制曲线的组件中保证只有一个echarts实例。同时最多绘制8条曲线，每条曲线最多有900个点组成（由于过多点页面卡顿且很快崩溃，每秒更新一次数据。初始渲染整个option，更新时渲染option中的series。目前测试，曲线绘制大概达到15个小时，页面崩溃，内存占用已达到一两个G。经测试发现使用setOption更新数据的前后时间差初始在450ms左右，运行一段一两个小时之后，该时间差偶尔能达到1s。

Version & Environment [版本及环境]

ECharts version [ECharts 版本]:3.7.1
Browser version [浏览器类型和版本]:谷歌 60.0.3112.90（正式版本）
OS Version [操作系统类型和版本]:win7 64位

Expected behaviour [期望结果]

实时曲线一直运行，不卡顿不崩溃。

ECharts option [ECharts配置项]

option = title: {
            text: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
            top: 10,
            left: 'center',
            data: this.legendMsg
          },
          xAxis: {
              type: 'time',
              splitNumber:20,
              splitLine: {
                  show: false
              }
          },
          yAxis: {
              type: 'value',
              splitLine: {
                  show: false
              }
          },
          series: this.msg
}
//var num=0;
//num++
//series为数据，存储多组曲线的配置及数据。arr为与“动态数据+时间坐标轴”中数据结构一致。
      series[num]={
                name: obj,
                type: 'line',
                step:'start',
                showSymbol: false,
                hoverAnimation: false,
                data: arr
              }

Other comments [其他信息]

pissang commented 6 years ago

能否把能够抽出能够复现的最小代码发我们，方便我们定位问题

lQei commented 6 years ago

数据是WebSocket推送来的，无法重复此数据推送频率较快，，推送过来之后更新数据，that.msg最终赋值给series

              that.msg[i].data.shift();
              that.msg[i].data.push({
                name:res.timestamp,
                value:[new Date(res.timestamp),res.value==null?res["value"]:res["value"].toFixed(2)]
              })

前端定时刷新数据，1s执行一次initPointGraphData函数。

    initPointGraphData:function(){
        var  aa = new Date().getTime()
        this.myChart.setOption({
          series:this.msg
        })
        console.log(new Date().getTime()-aa)
      },

我感觉问题出在了绘制曲线的内部，，是否有某处占用内存来不及释放，导致内存不断增加。因为发现打印出来的时间差会变大（实时运行久了之后，偶尔有时间超过1s的情况）。

qinshenghechu commented 6 years ago

我也在尝试从2.x升级为3.x。在2.x版本中由于每个图例启动一个定时刷新，我的一个页面有15个图表后机器cpu飙升，发热问题严重，后来我手动改了那段定时刷新频率，问题减弱，据说3.x性能更优，所以目前正在尝试升级到3.x。期待结果

pissang commented 6 years ago

@lQei 我们也有测试过动态的折线图 http://www.echartsjs.com/gallery/editor.html?c=dynamic-data2 ，这个例子里没法复现出内存泄漏的问题，所以可能跟浏览器，操作系统和你项目中其它因素相关，你也可以试下这个例子是否会出现跟你一样的问题

qinshenghechu commented 6 years ago

@pissang 请问3.x还会有自动刷新那个机制吧？我上面说的2.x里消耗cpu的问题3.x里是否优化了呢？

lQei commented 6 years ago

@pissang 今天简单测试了这个官方实例，发现好像也有问题。setInterval(function () { var a=new Date(); myChart.setOption({ series: [{ data: data }] }); console.log(new Date()-a) }, 1000);

我在setOption之后打印每次绘制的时间，，点数越多，线条越多，绘制时间越长。目前还不清楚运行时间久了会不会导致绘制时间变长，还在进一步测试中。也希望你们看看是否和这个有关系。

lQei commented 6 years ago

@pissang @leeight 还是之前的问题。当前Version & Environment： ECharts version [ECharts 版本]:4.1.0 Browser version [浏览器类型和版本]:谷歌 68.0.3440.84（正式版本） OS Version [操作系统类型和版本]:win10 64位之前有看到有说:vue中，echarts初始化使用变量，不可在data中定义初始化(https://github.com/apache/incubator-echarts/issues/7234)。现在使用如下方式依然存在很严重的内存泄露问题。 1 当打开实时曲线时，只要定时器中的setOption执行，内存就会持续增加。当注掉此处时，其余代码保持不变，内存占用会稳定下来。 2 还有一种情况是，不执行setOption时，不停的重新绘制曲线（获取不同时间段曲线的数据），重新绘制，也会导致内存快速的增加。 3 测试了一种情况，定时器中setOption一直执行，但是里面的series下的data一直不变，这种情况，内存也会不停的增加。下面是正常执行实时曲线绘制时的分析截图：

harsima commented 6 years ago

@pissang @leeight 还是之前的问题。当前Version & Environment： ECharts version [ECharts 版本]:4.1.0 Browser version [浏览器类型和版本]:谷歌 68.0.3440.84（正式版本） OS Version [操作系统类型和版本]:win10 64位之前有看到有说:vue中，echarts初始化使用变量，不可在data中定义初始化(https://github.com/apache/incubator-echarts/issues/7234)。现在使用如下方式%E3%80%82%E7%8E%B0%E5%9C%A8%E4%BD%BF%E7%94%A8%E5%A6%82%E4%B8%8B%E6%96%B9%E5%BC%8F) 依然存在很严重的内存泄露问题。 1 当打开实时曲线时，只要定时器中的setOption执行，内存就会持续增加。当注掉此处时，其余代码保持不变，内存占用会稳定下来。 2 还有一种情况是，不执行setOption时，不停的重新绘制曲线（获取不同时间段曲线的数据），重新绘制，也会导致内存快速的增加。 3 测试了一种情况，定时器中setOption一直执行，但是里面的series下的data一直不变，这种情况，内存也会不停的增加。下面是正常执行实时曲线绘制时的分析截图：

你好，请问解决这个问题了么？

lQei commented 6 years ago

您好，我们还在不断的测试，初步发现可能是多个地方都在占用内存，导致内存的占用和释放无法达到平衡。还在进一步测试中，如果有发现清晰的问题，会和沟通，还望不吝赐教。

------------------ 原始邮件 ------------------ 发件人: "harsima"notifications@github.com; 发送时间: 2018年9月27日(星期四) 下午2:35 收件人: "apache/incubator-echarts"incubator-echarts@noreply.github.com; 抄送: "孟雷"1252190115@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [apache/incubator-echarts] echarts动态数据+时间坐标轴内存溢出，页面崩溃 (#7125)

@pissang @leeight 还是之前的问题。当前Version & Environment： ECharts version [ECharts 版本]:4.1.0 Browser version [浏览器类型和版本]:谷歌 68.0.3440.84（正式版本） OS Version [操作系统类型和版本]:win10 64位之前有看到有说:vue中，echarts初始化使用变量，不可在data中定义初始化(https://github.com/apache/incubator-echarts/issues/7234)。现在使用如下方式%E3%80%82%E7%8E%B0%E5%9C%A8%E4%BD%BF%E7%94%A8%E5%A6%82%E4%B8%8B%E6%96%B9%E5%BC%8F)

依然存在很严重的内存泄露问题。 1 当打开实时曲线时，只要定时器中的setOption执行，内存就会持续增加。当注掉此处时，其余代码保持不变，内存占用会稳定下来。 2 还有一种情况是，不执行setOption时，不停的重新绘制曲线（获取不同时间段曲线的数据），重新绘制，也会导致内存快速的增加。 3 测试了一种情况，定时器中setOption一直执行，但是里面的series下的data一直不变，这种情况，内存也会不停的增加。下面是正常执行实时曲线绘制时的分析截图：

你好，请问解决这个问题了么？

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

ciys commented 5 years ago

都2019年了还这样啊，我只是init，还没开始setOption内存就开始不断的涨，用的4.2.1版本

cuitwangshicheng commented 5 years ago

都2019年了还这样啊，我只是init，还没开始setOption内存就开始不断的涨，用的4.2.1版本

如果只是init还没有setOption就涨，应该是你自己的逻辑优问题吧

wangshug commented 4 years ago

请问这个问题目前还有解决方法嘛 angular 8 + echarts 4.2.1，通过websocke接收t数据，两分钟绘制一条折线，每个折线包含300个点，一个chart里面包含100条折线。大概5个小时chrome内存就涨到1G以上也设置了dispose和clear没有改善

您好，我们还在不断的测试，初步发现可能是多个地方都在占用内存，导致内存的占用和释放无法达到平衡。还在进一步测试中，如果有发现清晰的问题，会和沟通，还望不吝赐教。 … ------------------ 原始邮件 ------------------ 发件人: "harsima"notifications@github.com; 发送时间: 2018年9月27日(星期四) 下午2:35 收件人: "apache/incubator-echarts"incubator-echarts@noreply.github.com; 抄送: "孟雷"1252190115@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [apache/incubator-echarts] echarts动态数据+时间坐标轴内存溢出，页面崩溃 (#7125) @pissang @leeight 还是之前的问题。当前Version & Environment： ECharts version [ECharts 版本]:4.1.0 Browser version [浏览器类型和版本]:谷歌 68.0.3440.84（正式版本） OS Version [操作系统类型和版本]:win10 64位之前有看到有说:vue中，echarts初始化使用变量，不可在data中定义初始化(#7234)。现在使用如下方式%E3%80%82%E7%8E%B0%E5%9C%A8%E4%BD%BF%E7%94%A8%E5%A6%82%E4%B8%8B%E6%96%B9%E5%BC%8F) 依然存在很严重的内存泄露问题。 1 当打开实时曲线时，只要定时器中的setOption执行，内存就会持续增加。当注掉此处时，其余代码保持不变，内存占用会稳定下来。 2 还有一种情况是，不执行setOption时，不停的重新绘制曲线（获取不同时间段曲线的数据），重新绘制，也会导致内存快速的增加。 3 测试了一种情况，定时器中setOption一直执行，但是里面的series下的data一直不变，这种情况，内存也会不停的增加。下面是正常执行实时曲线绘制时的分析截图：你好，请问解决这个问题了么？ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.