echarts数据实时更新

Echarts 提供了多种实时更新数据的方式，以下是其中两种常用的方式：

1. 使用定时器定时刷新数据

可以使用 JavaScript 的定时器 setInterval() 来定时刷新数据。在定时器回调函数中，每隔一段时间就调用一次 Echarts 的 setOption() 方法，更新图表数据。

示例代码：

// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));

// 初始数据
var data = [10, 20, 30, 40, 50];

// 定时器回调函数
setInterval(function() {
    // 更新数据
    data = data.map(function(value) {
        return value + Math.random() * 10 - 5;
    });

    // 更新图表
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

2. 使用 WebSocket 接收实时数据

如果后端提供了 WebSocket 接口，可以使用 WebSocket 接收实时数据并更新图表。在 WebSocket 的 onmessage 事件中，每次接收到数据都调用一次 Echarts 的 setOption() 方法，更新图表数据。

示例代码：

// 初始化图表
var myChart = echarts.init(document.getElementById('chart'));

// 创建 WebSocket 连接
var ws = new WebSocket('ws://localhost:8080/data');

// WebSocket 接收消息回调函数
ws.onmessage = function(event) {
    // 解析消息数据
    var data = JSON.parse(event.data);

    // 更新图表
    myChart.setOption({
        series: [{
            data: data
        }]
    });
};

以上是两种常用的 Echarts 实时更新数据的方式，可以根据实际需求选择合适的方式。