You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "jipolun (via GitHub)" <gi...@apache.org> on 2024/09/04 08:09:10 UTC
[I] [Bug] echartsInstance. appendData 这个API加载进去的数据，我想数据达到一定数量去清空掉，但是似乎没有办法清除曲线数据，内存一直在涨 [echarts]
jipolun opened a new issue, #20318:
URL: https://github.com/apache/echarts/issues/20318
### Version
5.5.1
### Link to Minimal Reproduction
none
### Steps to Reproduce
`<script setup lang="ts">
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();
})
</script>
<template>
<div class="myechart" id="Chart_Tmp" style="width: 1400px;height:600px;"></div>
</template>
<style scoped>
</style>`
是这样的，我需要绘制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的数据确实被清除了，能达到预期的结果，但是同时发现内存在不断的涨
<img width="1087" alt="微信图片_20240904160438" src="https://github.com/user-attachments/assets/a131f737-8b0e-4303-8047-2cd6c635069b">
### 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_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] echartsInstance. appendData 这个API加载进去的数据，我想数据达到一定数量去清空掉，但是似乎没有办法清除曲线数据，内存一直在涨 [echarts]
Posted by "jipolun (via GitHub)" <gi...@apache.org>.
jipolun commented on issue #20318:
URL: https://github.com/apache/echarts/issues/20318#issuecomment-2328359557
> As its name suggests, `appendData` concatenates the data and do not remove old ones. You can manage the logic of data by yourself and call `setOption` with the new data.
但是我的数据量很大，40条曲线，每50ms250个 一秒会产生20万个点，我怕setOption 效率太低，所以才使用的appendData
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] echartsInstance. appendData 这个API加载进去的数据，我想数据达到一定数量去清空掉，但是似乎没有办法清除曲线数据，内存一直在涨 [echarts]
Posted by "Ovilia (via GitHub)" <gi...@apache.org>.
Ovilia commented on issue #20318:
URL: https://github.com/apache/echarts/issues/20318#issuecomment-2328316939
As its name suggests, `appendData` concatenates the data and do not remove old ones. You can manage the logic of data by yourself and call `setOption` with the new data.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] echartsInstance. appendData 这个API加载进去的数据，我想数据达到一定数量去清空掉，但是似乎没有办法清除曲线数据，内存一直在涨 [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] commented on issue #20318:
URL: https://github.com/apache/echarts/issues/20318#issuecomment-2328197029
@jipolun It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Bug] echartsInstance. appendData API loads the data, I want the data to reach a certain amount to clear, but there seems to be no way to clear the curve data, the memory keeps rising
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] echartsInstance. appendData 这个API加载进去的数据，我想数据达到一定数量去清空掉，但是似乎没有办法清除曲线数据，内存一直在涨 [echarts]
Posted by "Lemmingh (via GitHub)" <gi...@apache.org>.
Lemmingh commented on issue #20318:
URL: https://github.com/apache/echarts/issues/20318#issuecomment-3226969032
@jipolun
请删掉 `console.log`。
你把收到的所有报文都打印到 console 了。
**console 里的东西也占用 JS heap。**
---
另外，你的 Markdown 排版太乱了。我看了好久才明白你的代码是什么。
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org