我是靠谱客的博主 端庄书包,这篇文章主要介绍百度地图上叠加echarts图表,现在分享给大家,希望可以做个参考。

项目需要在百度地图上实现类似饼状图的标注,看了一下目前百度地图结合好像只支持点、线以及热力图

这是要实现的效果

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//为每个echarts设置不同的ID var divId = 1; // 自定义覆盖物,point为添加覆盖物的点位置 function ComplexCustomOverlay(point){ this._point = point; } ComplexCustomOverlay.prototype = new BMap.Overlay(); ComplexCustomOverlay.prototype.initialize = function(map){ this._map = map; //生成div var div = this._div = document.createElement("div"); //赋id div.id = 'div'+divId; divId++; // div.style.backgroundColor = "#fff"; // div.style.border = "1px solid #BC3B3A"; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.width = "100px"; div.style.height = "100px"; //这里必须是绝对定位,不然会影响经纬度定位,然中偏离原来位置 div.style.position='absolute'; //将该覆盖物添加到标签覆盖物列表 map.getPanes().labelPane.appendChild(div); //echarts图表配置,下面只是一个示例,可以配置各种图表 var echarts2=echarts.init(document.getElementById(div.id)) var option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name: '呵呵', type: 'pie', radius : ['50%', '70%'], // center: ['50%', '70%'], data:[ {value:335, name:'吃'}, {value:110, name:'喝'}, {value:210, name:'玩'}, {value:410, name:'乐'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; echarts2.setOption(option) var divText=this._divText=document.createElement("div"); divText.className = "divText"; $(divText).html("<span>"+213+"<br>"+12312+"</span>") div.appendChild(divText) return div; } ComplexCustomOverlay.prototype.draw = function(){ var map = this._map; //饼图的位置设置,需要获取该地图点的像素位置x,y var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x +"px"; this._div.style.top = pixel.y - 30 + "px"; } var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(104.116583,30.839504)); map.addOverlay(myCompOverlay);

 该方法通过百度地图自定义标注创建容器,在容器内放置各种图表,类似在容器内可以防止任何内容。但可能会有性能问题,具体没有测试,只是实现了功能。

最后

以上就是端庄书包最近收集整理的关于百度地图上叠加echarts图表的全部内容,更多相关百度地图上叠加echarts图表内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(56)

评论列表共有 0 条评论

立即
投稿
返回
顶部