apache / apache/echarts

[Bug] echartsInstance. appendData 这个API加载进去的数据,我想数据达到一定数量去清空掉,但是似乎没有办法清除曲线数据,内存一直在涨

Open
#20,318 4 comments 0 reactions 0 assignees View on GitHub
bug pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.1

### Link to Minimal Reproduction

none

### Steps to Reproduce

`
import * as signalR from "@microsoft/signalr";
import {onMounted, onUnmounted} from "vue";
import type {HeatDataModel} from "@/models/heatboards/HeatDataModel";
import {MyehartsModel} from "@/models/myechartsModel/MyEchartsModel";
import {HeatEcharts} from "@/models/heatboards/HeatEcharts";
import * as echarts from "echarts";

var Chart_Tmp:HeatEcharts;
var serias1:any[];
onMounted(()=> {

Chart_Tmp=new HeatEcharts()

//Chart_Tmp.chart.setOption(
Chart_Tmp.option = {
animation: false, // 关闭动画,降低cpu占有率
// animationThreshold:500,
title: {
text: '电流值(A)'
},
tooltip: {
// trigger: 'axis',
//show:false,
axisPointer: {
animation: false,
},
},
xAxis: {
type: 'category',
// boundaryGap: false,
//show: false,
//data: [],
name:"时间",
/*splitLine: {
show: false
},*/
/*axisLabel: {
formatter:"{ss}:{SSS}"
},*/
/* splitLine: {
show: false
}*/
},
yAxis: {
name:"电流值",
type: 'value',
// boundaryGap: [0, '100%'],
/*splitLine: {
show: false
}*/
},
series: [
/*{
//name: 'NTC温度',
type: 'line',
data:[],
showSymbol: false,
// selectedMode:true,
smooth:true,
sampling:"lttb",

},
{
//name: 'NTC温度',
type: 'line',
data:[],
showSymbol: false,
// selectedMode:true,
smooth:true,
sampling:"lttb",

}*/
],
/* dataZoom: [
{ // 这部分是dataZoom的配置
type: 'slider', // 表示内置型数据区域缩放组件
xAxisIndex:0,
start: 0, // 数据窗口范围的起始百分比
end: 100 // 数据窗口范围的结束百分比
},{ // 这部分是dataZoom的配置
type: 'slider', // 表示内置型数据区域缩放组件
yAxisIndex:0,
start: 0, // 数据窗口范围的起始百分比
end: 100 // 数据窗口范围的结束百分比
},]*/
};
Chart_Tmp.chart= echarts.init(document.getElementById('Chart_Tmp'),null, { renderer: 'canvas',useDirtyRect:true });
//Chart_Tmp.chart= echarts.init(document.getElementById('Chart_Tmp'));
for(let i=0;i<40;i++) {
Chart_Tmp.option.series.push({
//name: 'NTC温度',
type: 'line',
data: [],
showSymbol: false,
large: true,
// selectedMode:true,
smooth: true,
sampling: "lttb",
});
}

Chart_Tmp.chart.setOption(Chart_Tmp.option);
/*window.addEventListener("resize", function () {
Chart_Tmp.chart.resize();
});*/
//===========================================================================================================================//
connection.start()
})
onUnmounted(()=>{
connection.stop()

})
const connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:5153"+"/Chat",{
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets,
}).withAutomaticReconnect([1000, 4000, 1000, 4000])// 断线自动重连
.build()
connection.on("myTest",(message:any[]) => {
console.log(message);
if( Chart_Tmp.chart.getOption().series[0].data.length>5000) {

let myseries:any[]=[];
for(let i=0;i<40;i++) {
myseries.push({
data: []
})
}

Chart_Tmp.chart.setOption({
series: myseries
});
//Chart_Tmp.chart.clear();

}

Chart_Tmp.chart.resize();
for (let i = 0; i < 40; i++) {
Chart_Tmp.chart.appendData({
seriesIndex: i,
data: message[i],
// data: [["11.5",20],["20.5",24],["18.5",28],["24.5",31],["0.45",0],["60.58",32]]
})
}

Chart_Tmp.chart.resize();
})

`

是这样的,我需要绘制40条曲线,每条曲线上有很多个点(大概每50ms,产生250个点),于是我就看文档使用echart的appendData API,在一个C# signalR的槽函数里面接收数据,然后送到echart里面去渲染。
因为数据量很大,所以我在判断当一条曲线的数据量到达5000个的时候,就把这些曲线全部清空,进行重新绘制,但是我在echarts官网的文档里面没有找到类似"removeData"或者“shiftData”的API,于是我就使用以下办法来清空数据(因为业务需要,我们使用 clear或者disopse来销毁组件,我只是想把数据清除掉)
` if( Chart_Tmp.chart.getOption().series[0].data.length>5000) {

let myseries:any[]=[];
for(let i=0;i<40;i++) {
myseries.push({
data: []
})
}

Chart_Tmp.chart.setOption({
series: myseries
});
//Chart_Tmp.chart.clear();

}`
然后打开网页,看到echart的数据确实被清除了,能达到预期的结果,但是同时发现内存在不断的涨
微信图片_20240904160438

### Current Behavior

我的数据格式[
["0",10],
["1",12],
["2",13],
["3",10],
["4",15],
["5",10],
.....
]

### Expected Behavior

理论上应该清空掉了,就不应该会再涨起来

### Environment

```markdown
- OS:windows11
- Browser:chrome
- Framework:vue3 +Typescript
```

### 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.