echarts tooltip 异步重复请求问题
时间: 2023-10-07 21:10:39 浏览: 55
Echarts tooltip 异步重复请求问题通常是因为在 tooltip 的 formatter 函数中使用了异步请求,但是由于 tooltip 的出现和隐藏是频繁的,所以会导致重复请求。
解决这个问题的方法是通过一个缓存机制来避免重复请求。具体的做法是在 formatter 函数中先判断当前需要请求的数据是否已经存在于缓存中,如果存在则直接使用缓存中的数据,如果不存在则发起请求并将请求到的数据存入缓存中。
下面是一个示例代码:
```javascript
// 缓存数据的对象
var dataCache = {};
// formatter 函数中的异步请求
function tooltipFormatter(params) {
var key = params.data.key;
if (dataCache[key]) {
// 直接使用缓存中的数据
return dataCache[key];
} else {
// 发起异步请求
axios.get('/getData', { params: { key: key } }).then(function(response) {
// 将请求到的数据存入缓存中
dataCache[key] = response.data;
// 更新 tooltip 的内容
chart.setOption({
tooltip: {
formatter: tooltipFormatter
}
});
});
// 返回一个 loading 状态
return 'loading...';
}
}
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
tooltip: {
formatter: tooltipFormatter
}
});
```
在上面的代码中,我们使用了一个名为 `dataCache` 的对象来存储已经请求到的数据。在 formatter 函数中,我们先检查当前需要请求的数据是否已经存在于缓存中,如果存在则直接使用缓存中的数据,如果不存在则发起异步请求。在异步请求的回调函数中,我们将请求到的数据存入缓存中,并通过重新设置 tooltip 的 formatter 函数来更新 tooltip 的内容。在返回的同时,我们也返回了一个 loading 状态,以便在数据请求过程中给用户一个提示。
通过以上的缓存机制,我们可以避免 tooltip 异步重复请求问题,同时也提高了数据请求的效率。