ECharts实现动态图表更新有三种方法：一、用setInterval定时轮询，调用setOption强制重绘；二、用WebSocket长连接，配合addData和dataZoom实现低延迟推送；三、用内置streaming支持，通过appendData流式添加数据并配置时间轴。
如果您希望在网页中展示随时间变化的数据趋势，例如实时监控系统中的温度、访问量或股票价格，ECharts 提供了便捷的机制来实现图表数据的动态刷新。以下是实现 ECharts 动态图表数据实时更新的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、使用 setInterval 定时轮询更新数据
该方法通过 JavaScript 的 setInterval 定期调用后端接口或生成模拟数据，并调用 ECharts 实例的 setOption 方法刷新图表。适用于对实时性要求中等、后端支持常规 HTTP 接口的场景。
1、在初始化 ECharts 实例后，定义一个全局变量 chart 保存实例引用。
2、编写 fetchNewData 函数，返回 Promise，用于获取最新数据（可为 mock 数据或实际 API 调用）。
3、使用 setInterval 每 3000 毫秒执行一次数据拉取与图表更新逻辑。
4、在回调中调用 chart.setOption({ series: [{ data: newData }] }, true)，其中第二个参数 true 表示不合并配置，强制重绘。
5、确保每次更新前对新数据做格式校验，避免因数据结构错误导致图表渲染中断。
二、利用 WebSocket 建立长连接推送数据
该方式由服务端主动向客户端推送增量数据，减少无效请求，降低延迟，适合高频率更新（如每秒多次）且服务端已部署 WebSocket 服务的场景。
1、在页面加载完成后，创建 WebSocket 实例，连接至后端 ws:// 地址，例如 new WebSocket("ws://localhost:8080")。
2、监听 onopen 事件，在连接建立后发送初始化订阅指令。
3、监听 onmessage 事件，解析返回的 JSON 数据，提取 time 和 value 字段。
4、将新数据 push 到原始 series.data 数组末尾，并调用 chart.addData() 方法添加单点（需 ECharts 5.0+）。
5、配合 dataZoom 组件启用实时滚动，设置 dataZoom[0].type = "inside" 可实现平滑拖拽与缩放。
三、采用 ECharts 的 streaming 插件简化流式处理
ECharts 官方提供 streaming 插件（echarts-gl 不适用，需引入 echarts@5.4+ 内置流支持），可自动管理时间窗口、丢弃旧数据并维持固定点数显示，适合时序监控类图表。
1、初始化 option 时，在 series 中设置 type: "line" 并启用 progressiveThreshold: 0。
2、配置 large: true 和 progressive: 0 以启用流式渲染模式。
3、使用 chart.appendData({ seriesIndex: 0, data: [[timestamp, value]] }) 替代 setOption 全量更新。
4、为 x 轴设置 type: "time"，并设定 minInterval 与 boundaryGap 确保时间轴连续。
5、务必在 appendData 前确认 chart 实例已正确初始化且 DOM 已挂载。
