ECharts 异步加载数据

ECharts 支持 异步加载数据，适用于从服务器获取动态数据并实时更新图表，例如 Ajax 请求、WebSocket、定时刷新等。

1. 使用 Ajax 请求异步加载

1.1 使用 fetch 加载 JSON 数据

fetch('https://api.example.com/data')  // 替换为你的 API 地址
    .then(response => response.json())
    .then(data => {
        var option = {
            title: { text: '异步数据加载示例' },
            xAxis: { type: 'category', data: data.categories },
            yAxis: { type: 'value' },
            series: [{ type: 'bar', data: data.values }]
        };
        chart.setOption(option);
    })
    .catch(error => console.error('数据加载失败:', error));

📌 说明

  • fetch(url)：从 API 获取数据
  • response.json()：解析 JSON 数据
  • chart.setOption(option)：更新 ECharts 图表

1.2 使用 XMLHttpRequest（兼容旧版浏览器）

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function () {
    if (xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        chart.setOption({
            xAxis: { data: data.categories },
            series: [{ data: data.values }]
        });
    }
};
xhr.send();

2. 定时刷新数据

2.1 setInterval 定时更新

setInterval(() => {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            chart.setOption({
                series: [{ data: data.values }]
            });
        });
}, 5000); // 每 5 秒更新一次

📌 说明

  • setInterval()：定时请求数据
  • chart.setOption({ series: [...] })：动态更新数据

3. WebSocket 实时更新

var socket = new WebSocket('wss://api.example.com/socket');

socket.onmessage = function (event) {
    var data = JSON.parse(event.data);
    chart.setOption({
        series: [{ data: data.values }]
    });
};

📌 适用场景

  • 实时数据（股票、天气、物联网）

4. 结合 ECharts showLoading()

在数据加载前显示加载动画

chart.showLoading(); // 显示加载动画

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        chart.hideLoading(); // 取消加载动画
        chart.setOption({
            series: [{ data: data.values }]
        });
    });

5. 综合示例

var chart = echarts.init(document.getElementById('main'));
chart.showLoading();

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        chart.hideLoading();
        chart.setOption({
            title: { text: '动态数据示例' },
            xAxis: { type: 'category', data: data.categories },
            yAxis: { type: 'value' },
            series: [{ type: 'line', data: data.values }]
        });

        // 每 5 秒刷新数据
        setInterval(() => {
            fetch('https://api.example.com/data')
                .then(response => response.json())
                .then(newData => {
                    chart.setOption({
                        series: [{ data: newData.values }]
                    });
                });
        }, 5000);
    });

6. 总结

方法适用场景实现方式
Ajax (fetch)一次性加载数据fetch(url).then()
定时刷新 (setInterval)定期更新数据setInterval(fetch, time)
WebSocket实时更新WebSocket.onmessage
加载动画避免用户等待空白页面chart.showLoading()

🚀 你需要实现哪种数据加载方式？