根据websocket实时获取到uid和health，实时渲染到Echarts折线图上面?

站长

2024年06月27日 08:53 · 阅读数 19

[
  {
    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折线图上面，然后自定义了一个大小，当发送的数据大于自定义的大小时候，就会删除前面的旧数据，新数据继续生成，保持折线图上面一直只会显示的自定义大小的数据条数

1个回答

test

2024-06-27

 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的数据中，并更新图表。

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容