Closed tangniye closed 5 years ago
没定时更新数据么?
定时更新了,定时setOption()。
那发个完整的例子看下?
楼主的趋势图是什么软件?
请问这个问题解决了吗?用了dispose()方法,但是内存还是在上升,有办法稳定吗?
我也有相同的问题,加载过多数据就会崩溃
我用的是散点图,而且setOption的notMerge选项没有效果,一次读取40万的点。三次load浏览器就崩溃了。 我今天找到一个可行的方法: 如果第一次新建图表,创建一个新的option。如果在图表存在的情况下, 用getOption取到已经存在的option, 重新set option.series = new series. 然后用chartInstance.clear(),清空option,最后setOption(option, false, false)。这个选项会merge一起清空的data series。我的内存指标也下降不少,再也没有浏览器崩溃的情况了。 可能不是最好的方案,但是解决了我的问题。希望其他大神可以给点更好的建议
内存问题不解决,这玩意就很不好用
内存问题不解决,这玩意就很不好用
我也遇到这个问题,多图表定时渲染时,内存泄露
同样遇到这样的问题,涉及到页面多图表的定时更新,使用的mergeOptions,内存一晚上飚的很厉害,基本上3~4G的样子。还没尝试过定时的dispose,想知道这个问题是否有解决方案。
我也遇到同样问题,我们一个页面有15个以上的图形,机器内存2.7G,不到一个小时就页面崩溃了,后面每次刷新数据都销毁掉 echart 对象,也发现是如此。
这个问题看来是很多人都遇到了,一个中国地图带很多图表,内存稳定上涨。没有避免的办法了吗
如果仍然有内存不断上涨的例子,希望能提供更多的信息(版本、能渲染出图表的 option、setOption 等 API 调用的语句,运行环境等),以帮助复现场景定位问题。
<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
看图:
<!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
<!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
那发个完整的例子看下?
demo哥,又看到你在要demo了
我解决了这个问题,当你用setInterval去定时调用动画的时候,可以用setTimeout去模拟,每次调用之前把setTimeout的timer给clear掉,然后递归调用,测试发现这样垃圾回收就会回收内存并且3天页面都不挂
One-line summary [问题简述]
页面放置3天左右会崩溃,我用了dispose()方法,虽然有清理内存,但是总的趋势是在上涨的,大致上是1个小时会出现10M的增长。现在已经排除网络ajax请求、页面其他元素导致的原因。
Version & Environment [版本及环境]
Expected behaviour [期望结果]
期望内存无论多长时间都不增长,保持平稳
ECharts option [ECharts配置项]
Other comments [其他信息]
这个是放置一晚上的内存趋势图。这个趋势下去,页面放置两三天就会崩溃。