重新渲染echarts图形

版权声明：本文为博主原创文章，未经博主允许不得转载。转载注明出处。 https://blog.csdn.net/zuoyiran520081/article/details/79259077

在项目中用到echarts中的地图：

但是在操作过程中往往会出现过分缩小：

或者是：

这样一不小心滑跑的情况，这样想要进行操作就很难了。
解决方法：
加个刷新的按钮，重新渲染地图:
方法一：
自带的简单地方法：clear()方法

var chart = ECharts.init(document.getElementById('map') as HTMLDivElement);
chart.clear();
chart.setOption({图表设置})

这样不报错，但会有警告：

第二种：
笨方法就是手动创建这个进行图表渲染的标签：

var parent = document.getElementById("mapDiv");
parent.innerHTML = ''; 
let divMap = "map";
let mapD = document.getElementById(divMap); 
var div = document.createElement("div"); 
div.setAttribute("id",divMap); 
div.style.height = '300px'; 
parent.appendChild(div); 
var chart = ECharts.init(document.getElementById(divMap) as HTMLDivElement); 
chart.setOption({图表设置})

注：但是这样很麻烦，如果只是渲染图表而不进行操作的话，其实直接用第一种方法就行了，但是像是地图如果需要点击事件的话，会有加载多次的情况出现（例如：我在ionic中使用，点击N次刷新的话，在对地图进行点击穿透到下个页面的操作的话，就会出现N次加载到下个页面，这时候选择第二种比较苯的方法则没有此问题！）。