Vue + Echarts 地图解决缩放或平移后切换地图不显示问题

最新推荐文章于 2023-12-13 16:31:47 发布

原创最新推荐文章于 2023-12-13 16:31:47 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #前端

本文介绍了一个关于地图应用中切换省市时地图显示异常的问题，并提供了两种解决方案：一是通过设置notMerge参数为true来更新地图选项；二是使用clear()方法清空画布并重新渲染。然而这两种方法都会导致地图样式丢失。

问题描述

项目需要用到地图切换省市区，在加上地图缩放平移功能后，发现切换省市地图就不显示

缩放平移后切换地图

解决方案：

分析：

chart.setOption(option, notMerge, lazyUpdate);

图例的setOption有个notMerge参数，可以选择是否不跟之前设置的 option 进行合并，值为false或true。默认为 false。即表示合并，意为在原油组件上添加新的数据。合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 重新创建所有新组件。

解决代码：
        this.chartInstance.setOption(changeOption, true);
但是这样有个弊端，地图的样式都会清空需重新设置。另外也可以使用实例自带的clear()方法，效果跟上述差不多。
   this.chartInstance.clear();//清空画布重新渲染 但格式都会消失