ECharts + Node简单实现图表动态更新

本文链接： https://blog.csdn.net/HermitSun/article/details/102489632

因为最近有个需求是处理流数据，需要动态更新图表，所以稍微捣鼓了一下。项目demo的地址在这里：https://github.com/HermitSun/echarts-node-dynamic-update

其实是不是流数据，对前端没什么影响：本质上不还是数据吗？无非是通信方式和通信频率可能有变化罢了。至于图表展示，根据业务场景来选择好了；虽然之前久仰D3大名，但是我还是选择echarts，因为处理简（xian）单（cheng）的图很方便。

首先最容易想到的肯定是前端开个计时器（比如setInterval），然后定期向后端发请求，拿到数据之后塞进echarts里。这个虽然说没什么问题，但不符合业务场景。这不是一个交互式的过程，数据应该是从后端“流”过来的，后端有数据之后发给前端，主导权在后端，而不是前端向后端要数据。

然后想到的就是socket了，开一个长连接，然后后端通过socket向前端发数据。这个其实也比较容易，比如我要在前端显示一个最简单的折线图，大概效果是这样的：
在这里插入图片描述
我们不妨假设数据每秒会变化一次。虽然实际的流数据不一定有这么整齐，但具体实现的时候我们可以替换成Observer，有变化的时候发送给前端。这里为了简洁，就不加错误捕获之类的代码了：

// server
const WebSocket = require("ws");
const WebSocketServer = WebSocket.Server;
const server = new WebSocketServer({
  port: 3141
});
// echarts data
const data = [820, 932, 901, 934, 1290, 1330, 1320];
// send data per sec
server.on("connection", (socket) => {
  socket.send(JSON.stringify(data));
  setInterval(() => {
    data[0] += 10;
    socket.send(JSON.stringify(data));
  }, 1000);
});

前端就负责用socket连接后端：

// client
const socket = new WebSocket("ws://localhost:3141");
// update line
socket.onmessage = ({data}) => {
  testChart.setOption({
    series: [{
      data: JSON.parse(data)
    }]
  });
};

这样就可以实现了。

另外，目前前端还不能向后端发起UDP请求。所以，很遗憾的是，我们不能用基于UDP的方式来替代基于TCP的WebSocket。

ECharts + Node简单实现图表动态更新

猜你喜欢