Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

百度地图与scatter结合,拖动地图后,tooltip位置显示移位 #7396

Closed
AggerChen opened this issue Dec 29, 2017 · 3 comments
Closed
Labels
stale Inactive for a long time. Will be closed in 7 days.

Comments

@AggerChen
Copy link

One-line summary [问题简述]

使用百度地图显示scatter点,配置tooltip显示每个点的信息。不管tooltip是跟随鼠标还是固定位置,当地图缩放并拖动后,tooltip显示位置偏移,甚至偏移到显示区域之外。confine:true控制显示在图形之内也不管用

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:3.8.4
  • Browser version [浏览器类型和版本]:chrome 62.0.3202.62
  • OS Version [操作系统类型和版本]:win7

Expected behaviour [期望结果]

tooltip能根据配置显示,不会因为地图拖动而偏移

ECharts option [ECharts配置项]

option = {
progressive:10000,
	            bmap: {
	                zoom: 10,
	                roam: true,
	                mapStyle: mapstyle
	            }, 
	            tooltip: {
		                trigger: 'item',
		                confine:true,
                                positions:["0px","0px"],      //位置会随着地图拖动而偏移
		                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
	            }]
}

Other comments [其他信息]

image

@nongzhenli
Copy link

请问你是如何解决了这个问题的呢?

@github-actions
Copy link
Contributor

github-actions bot commented Nov 6, 2021

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

@github-actions github-actions bot added the stale Inactive for a long time. Will be closed in 7 days. label Nov 6, 2021
@github-actions
Copy link
Contributor

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale Inactive for a long time. Will be closed in 7 days.
Projects
None yet
Development

No branches or pull requests

2 participants