问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

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

    前端javascriptwebsocketvue3echarts
    阅读 1.4k
    avatarAI BotBETA

    你可以按照以下步骤来实现：

    1. 首先，在前端页面中引入 echarts.js 的 CDN。
    2. 创建一个容器来显示折线图。
    <div id="chartContainer"></div>
    1. 在前端代码中创建一个 WebSocket 连接，监听数据的实时更新。
    // 创建WebSocket连接
const socket = new WebSocket('ws://your-websocket-url');

// 监听数据更新
socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  // 调用函数更新折线图
  updateChart(data);
};
    1. 编写一个 updateChart 函数，根据接收到的数据更新折线图。
    // 初始化数据数组和自定义大小
let chartData = [];
const maxSize = 10; // 自定义的大小

// 更新折线图函数
function updateChart(data) {
  // 获取数据中的 uid 和 health
  const uid = data.uid;
  const health = data.health;

  // 创建新的数据对象
  const newData = { uid, health };

  // 如果数据数组的长度大于等于 maxSize，删除前面的旧数据
  if (chartData.length >= maxSize) {
    chartData.shift();
  }

  // 将新数据添加到数据数组末尾
  chartData.push(newData);

  // 调用 echarts 来绘制折线图
  const chart = echarts.init(document.getElementById('chartContainer'));

  // 定义 x 轴的数据为数组中的每个 uid
  const xData = chartData.map(item => item.uid);

  // 定义 y 轴的数据为数组中的每个 health
  const yData = chartData.map(item => item.health);

  // 配置折线图的选项
  const option = {
    xAxis: {
      data: xData
    },
    yAxis: {},
    series: [{
      name: 'health',
      type: 'line',
      data: yData
    }]
  };

  // 更新折线图的选项
  chart.setOption(option);
}

    这样，当收到新的数据时，会自动更新折线图，并且只显示自定义大小的数据条数。

    1 个回答
    得票最新
    头像
    时倾
      611342
      ✓ 已被采纳
       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的数据中，并更新图表。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题