根据websocket实时获取到uid和health，实时渲染到Echarts折线图上面?-灵析社区
只想躺平[ { health: 94, height: 500, id: 19, latitude: 30.74378681, longitude: 103.9291311, offLineNum: 0,onLineNum: 2,state: 0,uid: 1 }, { health: 20, height: 500, id: 19, latitude: 30.74378681, longitude: 103.9291311, offLineNum: 0,onLineNum: 2,state: 0,uid: 2 }, { health: 80, height: 500, id: 19, latitude: 30.74378681, longitude: 103.9291311, offLineNum: 0,onLineNum: 2,state: 0,uid: 3 }, { health: 40, height: 500, id: 19, latitude: 30.74378681, longitude: 103.9291311, offLineNum: 0,onLineNum: 2,state: 0,uid: 4 } ................................. ] 请问大佬们，如何写一个根据websocket实时获取到uid和health字段，渲染到Echarts折线图上面，然后自定义了一个大小，当发送的数据大于自定义的大小时候，就会删除前面的旧数据，新数据继续生成，保持折线图上面一直只会显示的自定义大小的数据条数
脑洞大咖 const { uid, health } = data.data;
dataQueue.push({ uid, health });
// 检查是否已存在该uid的数据
if (uidDataMap[uid] === undefined) {
uidDataMap[uid] = {
xAxisData: [], // 存储X轴数据
seriesData: [], // 存储折线数据
};
} else {
// 检查当前区间数量是否超过最大区间数量
if (uidDataMap[uid].xAxisData.length >= MAX_DATA_INTERVAL) {
// 删除后面的数据
uidDataMap[uid].xAxisData.splice(0, uidDataMap[uid].xAxisData.length - MAX_DATA_INTERVAL);
uidDataMap[uid].seriesData.splice(0, uidDataMap[uid].seriesData.length - MAX_DATA_INTERVAL);
}
}
// 将数据添加到对应uid的数据中
uidDataMap[uid].xAxisData.push(uid);
uidDataMap[uid].seriesData.push(health);
// 更新ECharts图表
updateChart();
通过在收到新的数据时，会先检查当前区间的数量是否超过了最大区间数量。如果超过了，就会删除后面的数据，确保区间数量不超过最大限制。然后再将新的数据添加到对应的uid的数据中，并更新图表。