解决Echarts地图区域点击事件无效 && geo.lable.formatter无效

最新推荐文章于 2024-09-17 23:04:00 发布

zaqenenen

最新推荐文章于 2024-09-17 23:04:00 发布

阅读量6.8k

点赞数 2

分类专栏： Echarts 文章标签：前端 echarts json js

本文链接：https://blog.csdn.net/zaqenenen/article/details/114477571

版权

本文介绍了如何解决Echarts地图区域点击事件无效的问题，以及geo.label.formatter无效的修复方法。在尝试多个最新版本无果后，作者发现可能是自定义区域导致的点击事件失效，并给出了解决方案。另外，还提到了一个关于echarts报错的解决方案，即在使用地图延长线功能时，避免引入压缩文件。

摘要由CSDN通过智能技术生成

1.解决Echarts地图区域点击事件无效

需求：获取echarts当前点击城市名称
bug：Echarts地图区域点击事件无效，添加.getZr()后又无法获取到地图当前点击城市。
一些资料说是版本问题，然鹅我下了几个最新echarts版本都无效。怀疑是我加了自定义区域让它点不中了？
解决：

//添加.getZr()之后，又获取不到params中当前点击城市
let self=this;
this.chart.getZr().on('click', function (params) {
	console.log('好的终于点击到了，但是点整个画布都能触发');
	//判断点击的是地图区域  而非空画布
	//通过判断鼠标在子元素上指针样式是否为pointer
	if(self.$refs.ele.childNodes[0].style.cursor=='pointer'){
	//self.city我在地图配置项emphasis.formatter中有存（👇附代码）
		console.log(self.city);	
	}
}

//this.chart.setOption({})配置项中获取的city
   emphasis: { //当鼠标放上去  地区区域是否显示名称
		       label: {
				    show: true,
				    formatter: function (params) {
						this.city=params.name;//存取当前鼠标滑过城市
						return params.name;
					 },
			},
		}