百度地图上叠加echarts图表

84 阅读 0 评论 56 点赞

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

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

这是要实现的效果

复制代码

//为每个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);

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);