echart柱状图的区域点击（非柱子的精确点击）

柱状图区域联动点击优化：处理难点击柱子与联动操作

最新推荐文章于 2025-01-10 11:19:31 发布

原创最新推荐文章于 2025-01-10 11:19:31 发布 · 858 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #echarts

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何解决柱状图中不易点击的柱子问题，通过`getZr().on('click')`方法实现区域联动点击，着重于处理点击事件并获取选中柱子的名称。

有些柱子没有值或者由于样式问题很难点击到，需要进行区域点击联动
一般的点击方法必须选中柱子

//getZr()方法，官方文档中未标注

this.barChart1.getZr().on('click', function (params) {
	let pointInPixel = [params.offsetX, params.offsetY]
	if (that.barChart1.containPixel('grid', pointInPixel)) {
		let pointInGrid = that.barChart1.convertFromPixel({
			seriesIndex: 0
		}, pointInPixel);
		let yIndex = pointInGrid[1]; //索引，可取x或y轴的，当前取y轴
		let handleIndex = Number(yIndex);
		let seriesObj = that.barChart1.getOption(); //图表object对象
		let selName = seriesObj.yAxis[0].data[handleIndex]//获取到区域点击选中的柱子的name
		
		//that.zdryOptions.forEach(item => {
		//	if(selName.slice(0,4)==item.name.slice(0,4)){
		//		that.zdryRegionCode = item.codeId
		//	}
		//})
	}
})