echarts tooltip 异步重复请求问题
时间: 2023-10-07 21:14:31 浏览: 185
当使用 ECharts 中的 Tooltip 组件时,如果在鼠标移动到数据点上时需要异步请求数据,可能会出现异步重复请求的问题。
解决这个问题的方法是在异步请求数据前先判断数据是否已经加载过,如果已经加载过则不再重复请求。可以将请求到的数据缓存到一个对象中,在每次请求前先检查缓存对象中是否已经存在请求的数据。
示例代码:
```javascript
var dataCache = {}; // 缓存已经加载的数据
myChart.on('mousemove', function(params) {
var dataIndex = params.dataIndex;
var seriesIndex = params.seriesIndex;
// 判断数据是否已经加载过
if (dataCache[seriesIndex] && dataCache[seriesIndex][dataIndex]) {
// 直接使用缓存中的数据
var data = dataCache[seriesIndex][dataIndex];
showTooltip(params, data);
} else {
// 异步请求数据
$.ajax({
url: 'data.json',
success: function(data) {
// 缓存数据
if (!dataCache[seriesIndex]) {
dataCache[seriesIndex] = {};
}
dataCache[seriesIndex][dataIndex] = data;
showTooltip(params, data);
}
});
}
});
function showTooltip(params, data) {
// 显示 Tooltip
// ...
}
```