vue实现openlayer地图上叠加echarts饼状图

最新推荐文章于 2024-06-28 23:19:33 发布

请叫我爱你一万年

最新推荐文章于 2024-06-28 23:19:33 发布

阅读量1.3k

点赞数

分类专栏： openlayer vue

本文链接：https://blog.csdn.net/qq_32339477/article/details/102837009

版权

本文介绍了如何在OpenLayers地图上叠加ECharts饼状图。主要涉及利用OpenLayers的Overlay特性创建div容器，并在地图加载完成后，通过Vue的$nextTick或axios的then方法将ECharts图表渲染到这些div上，从而实现在地图上的动态展示。

摘要由CSDN通过智能技术生成

知识点：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