echarts结合百度地图绘制散点图，移动地图后tooltip位置错位

Question

使用echarts结合百度地图，在地图上生成散点图，也就是series：scatter。配置相关tooltip内容，在不拖动地图的情况向，tooltip显示正常，跟随鼠标显示，放大缩小地图都正常。
但是当拖动地图，相应的tooltip显示就会移位，不管是position配置固定位置还是跟随鼠标，都会移位，导致超出显示区域，或者移位太远消失不见。

---

图一，正常情况，只是缩放大小，没有拖动地图。

图二，拖动地图后，显示移位

---

使用chrome调试器，查看了，tooltip的div在移动了地图后，position位置变成了负数，并不是指定的固定值，不知道这个有什么好办法解决？还是我哪里配置错了？

var option = {
                progressive:10000,
                bmap: {
                    zoom: 10,
                    roam: true,
                    mapStyle: mapstyle
                }, 
                tooltip: {
                        trigger: 'item',
                        confine:true,
                        formatter: function(item){
                              return "会员数："+item.value[2]+"<br/>周边1公里覆盖数: "+item.value[3]+"<br/>药店: "+item.name+"<br/>地址："+item.data.addr;
                        }
                    },
                series: [{
                    name: '药店',
                    type: 'scatter',
                    zlevel :100,
                    animation :false,
                    coordinateSystem: 'bmap',
                    symbolSize: 5,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal :{
                            //color:'#D74E67',
                            color:'#F9EB50',
                            opacity :1
                        }
                    },
                    data:data
                   
                },{
                    name: '会员数',
                    type: 'scatter',
                    zlevel :90,
                    animation :false,
                    coordinateSystem: 'bmap',
                    symbolSize: function (val) {
                            var size = val[2]/500;
                            size = size<15?15:size;    //限制最小10
                              size = size>30?30:size;  //限制最大28
                            return size;
                    },
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                   itemStyle: {
                        normal :{
                            color:'#458DBC',
                            opacity :1
                        }
                    },
                    data:data
                   
                },{
                    name: '覆盖数',
                    type: 'scatter',
                    zlevel :50,
                    animation :false,
                    coordinateSystem: 'bmap',
                    symbolSize: function (val) {
                          var size = val[3]/500;
                            size = size<20?20:size;     //限制最小10
                              size = size>30?30:size;   //限制最大40
                            return size;
                    },
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                         normal :{
                            color:'#71BD98',
                            opacity :0.3
                        }
                    },
                    data:data
                }]
            };

Answer 1

好吧，这么久了没人回答。还是我自己来解决吧。。。搞了很久，想到了一个解决办法。
首先，这确实是echarts的bug，并不是我没有配置对，就算我配置option为固定值，他也还是会偏移。
在position中有几个返回参数position: function(point, params, dom);
point:就是鼠标当前位置
dom：就是tooltip的dom对象。
有了这两个参数，我们就可以自己定义一个dom，然后这是他的位置，也就实现了tooltip的功能，也不会偏移~

html代码

在charts的dom前面创建一个div,样式如下，用来模拟现实tooltip

<div id="mapStoreClass" stytle="position: absolute;z-index: 9999;"></div>
<div id="chinaMap" style="text-align: left;width:100%;height:500px"></div>

js配置代码

在配置tooltip的地方，将tooltip的dom参数丢给我们模拟的dom就可以了，并这是位置

tooltip: {
    trigger: 'item',
     confine:true,
    position: function(point, params, dom) { 
        var width = $(dom).width();     //获取tooltip原来的width
        var m = $("#mapStoreClass");    //获取我们自定义模拟的tooltip dom
        $(dom).css("position","initial");    //将原来的tooltip设置为initial *重要，为了不让原来的tooltip dom乱跑
        $(m).html(dom);                      //将更改好的dom放入我们模拟的tooltip dom
        $(m).css("left",point[0]+20);        //设置模拟dom显示位置，此为鼠标位置
        $(m).css("top",point[1]+20);         //设置模拟dom显示位置，此为鼠标位置
        $(m).css("width",width+15);          //设置模拟dom宽度
        //不用return 在此我们只是用来获取我们想要的point和dom，并不更改原来的位置，因为改了也没用，不然我就不用这么麻烦了。。
    }

就这么简单，成功解决，并完美的实现了tooltip功能，不会偏移。

Answer 2

好吧搞定了 自定义的tooltip行内style会被覆盖，写在class里面就可以了