echarts地图闪动
时间: 2023-08-28 15:06:33 浏览: 59
echarts地图闪动的原因通常是因为每次接收到数据时都会调用setOption方法导致地图重新渲染。解决这个问题的一种方法是在鼠标移动到地图上时设置一个标志位,然后在setOption之前检查这个标志位,如果标志位为true,则不执行setOption操作。这样可以避免在鼠标hover到地图时频繁重新渲染地图,从而减少闪动现象的发生。具体实现的代码如下:
```
var myChart = echarts.init(document.getElementById("map"));
var flag = false;
myChart.on('mouseover', function() {
flag = true;
});
myChart.on('mouseout', function() {
flag = false;
});
function updateMapData(data) {
if (flag) {
return;
}
myChart.setOption({
// 设置地图数据
series: [{
// ...
}]
});
}
```
这样,在鼠标hover到地图时,不会执行setOption方法,从而解决了echarts地图闪动的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [echarts地图利用2.0版本时tooltip出现闪动情况的解决办法](https://blog.csdn.net/yovino/article/details/88723518)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [echarts 地图外边框](https://download.csdn.net/download/qq_25110159/9820401)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]