知识点：1、需要使用openlayer的Overlay属性和方法。 2、地图上叠加饼状图类似在地图上叠加div，原理一样；唯一的区别echarts会存在节点渲染好后再往节点添加要素。 3、第一步根据后台返回的数据的条数，在地图上循环出div作为容器；在使用this.$nextTick(function(){})把饼状图添加到节点中；或者采用axios的then()方法，把节点添加到地图后再添加echarts元素。 先上图： 代码实现：
//将对象转化为节点的函数 parseDom(arg) { var objE = document.createElement("div"); objE.innerHTML = arg; return objE.childNodes; }, //再methods中添加一个实现饼状图的方法 initPie(){ let self=this; let data=''; self.$axios({ methods: "get", url: '',//后台地址 }).then(function (res) { data = res.data.data; let str=''; data.forEach(function (obj,i) { str+=' <div class=\'chartPie\' ref=\'chartPie\' style="height: 70px;width: 70px;"> ' + '</div>'; self.map.addOverlay(new ol.Overlay({ element:self.parseDom(str)[i].nextElementSibling,//饼状图的节点 position: [obj.x, obj.y],//饼状图的位置 positioning: 'center-center',//成功率+耗时；饼状图相对于中心坐标点的偏移方向，属性有：'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', 和 'top-right'. 默认为：'top-left'. stopEvent: false, //offset: [-15, -5],//饼状图相对于中心坐标点的自定义偏移位置；左减右加，上减下加 })); }); }).then(){ data.forEach(function (obj,i) { let myChart = self.$echarts.init(document.getElementsByClassName("chartPie")[i]); myChart.setOption();//设置你的饼状图 let popups=new ol.Overlay({ element:document.getElementsByClassName("chartPie")[i], position: [obj.x, obj.y], positioning: 'center-center',//成功率+耗时 stopEvent: false, }); self.map.addOverlay(popups);//添加覆盖层到地图上 }) } }到此即可实现往地图上添加饼状图，我上面代码没有写初始化饼状图，可自行查官网选择自己需要的饼状图。
