Incubator-echarts: bmap拓展结合series的使用中,悬浮说明无法跟随地图平移

[wsxjump]

One-line summary [问题简述]

bmap拓展结合series的使用中,label(即鼠标放置在某一点上时出现的悬浮说明)无法跟随地图平移.
在此示例(http://echarts.baidu.com/gallery/editor.html?c=effectScatter-bmap)中也有悬浮说明无法跟随地图进行拖动平移的情况.

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:3.5.2
• Browser version [浏览器类型和版本]:firefox 52\chrome 57\IE 11
• OS Version [操作系统类型和版本]:WIN 7 SP1

Expected behaviour [期望结果]

在地图进行平移拖动后,悬浮说明仍跟随移动并应在展示点的附近进行展示,而不是在原来位置.

ECharts option [ECharts配置项]

option = {
    title: {
        text: '全国主要城市空气质量 - 百度地图',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center'
    },
    tooltip : {
        trigger: 'item'
    },
    bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
            styleJson: [{
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'land',
                'elementType': 'all',
                'stylers': {
                    'color': '#f3f3f3'
                }
            }, {
                'featureType': 'railway',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'highway',
                'elementType': 'all',
                'stylers': {
                    'color': '#fdfdfd'
                }
            }, {
                'featureType': 'highway',
                'elementType': 'labels',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry',
                'stylers': {
                    'color': '#fefefe'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'geometry.fill',
                'stylers': {
                    'color': '#fefefe'
                }
            }, {
                'featureType': 'poi',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'green',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'subway',
                'elementType': 'all',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'manmade',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'local',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'arterial',
                'elementType': 'labels',
                'stylers': {
                    'visibility': 'off'
                }
            }, {
                'featureType': 'boundary',
                'elementType': 'all',
                'stylers': {
                    'color': '#fefefe'
                }
            }, {
                'featureType': 'building',
                'elementType': 'all',
                'stylers': {
                    'color': '#d1d1d1'
                }
            }, {
                'featureType': 'label',
                'elementType': 'labels.text.fill',
                'stylers': {
                    'color': '#999999'
                }
            }]
        }
    },
    series : [
        {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: 'purple'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: 'purple',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};

Other comments [其他信息]

[silverHugh]

我也遇到了同样的问题，我发现 dom 的 left 和 top 属性并没有正确地根据point的值去设置。

position: function (point, params, dom, rect, size) {
    var x = point[0] + 30;
    var y = point[1] + 30;
    return [x, y];
}

将dom和x，y打印出来后，发现dom中style的属性“left”和“top”属性没有正确地根据x，y设置，而是仍然保持拖动前的数值。

原生的geo，比如用china.js，测试过了，不会有问题。

[silverHugh]

position的回调函数里添加了点代码让它正常了，不太优雅，不过可以正常工作。 参考链接： https://silverhugh.github.io/project/tower-map/#section-2

期待bug的修复。

代码：（无关代码已省略）

window.onload = function(){
    /* Used in tooltip position */
    var t_pos = {
        left: 0,
        top: 0
    }

    var last_point = [0, 0];
    var counter = 0;

    option = {        
        tooltip: {
            trigger: 'item',
            transitionDuration: 0,
            position: function (point, params, dom, rect, size) {
                var least_area = 20;
                var offset_x = 30;        /* 相对于point的偏移 */
                var offset_y = 30;

                /* last_point的least_area范围内不会产生新的t_pos */
                if (Math.abs(point[0] - last_point[0]) < least_area 
                    && Math.abs(point[1] - last_point[1]) < least_area
                    && counter >= 2){
                    return t_pos;
                }
                if (Math.abs(point[0] - last_point[0]) >= least_area 
                    || Math.abs(point[1] - last_point[1]) >= least_area){
                    counter = 0;
                }
                counter += 1;
                /* 使real_x,real_y有数值 */
                if (counter == 1) {
                    t_pos.left = point[0] + offset_x;
                    t_pos.top = point[1] + offset_y;
                    last_point = [point[0], point[1]];
                }
                /* 此处进行修正tooltip的位置 */
                if (counter == 2){
                    var real_x = $(dom).position().left;
                    var real_y = $(dom).position().top;
                    t_pos.left += point[0] - real_x + offset_x;
                    t_pos.top += point[1] - real_y + offset_y;
                }
                return t_pos;
            }
        }
}

[wsxjump]

@silverHugh 实测可用,非常感谢你!
佩服你debug的效率了,隔天就把这问题解决了~

[Ovilia]

已修复