百度地图上叠加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);

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