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

因为最近有个需求是处理流数据，需要动态更新图表，所以稍微捣鼓了一下。项目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 serve