温馨提示×

echarts怎么异步加载数据

小亿
115
2024-01-25 11:59:19
栏目: 编程语言

在Echarts中异步加载数据可以使用Ajax请求或者通过Promise对象来实现。

使用Ajax请求的方法如下:

```javascript

// 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

// 发送GET请求

xhr.open('GET', 'data.json', true);

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

var data = JSON.parse(xhr.responseText);

// 使用data来绘制图表

// ...

}

};

xhr.send();

```

通过Promise对象来异步加载数据的方法如下:

```javascript

function getData() {

return new Promise(function (resolve, reject) {

var xhr = new XMLHttpRequest();

xhr.open('GET', 'data.json', true);

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

resolve(JSON.parse(xhr.responseText));

} else {

reject(xhr.statusText);

}

}

};

xhr.send();

});

}

getData().then(function (data) {

// 使用data来绘制图表

// ...

}).catch(function (error) {

console.log(error);

});

```

以上是两种常用的异步加载数据的方法,根据具体情况选择适合的方法来加载数据并绘制Echarts图表。

0