ucharts插件问题记录-组件事件@getIndex

项目场景：

uniapp项目，使用hbuilderx引入的ucharts插件。

项目场景：要实现一个饼图下钻功能，所以会用到点击事件。通过点击事件，获取到点击的项，来判断是否可以下钻。

---

问题描述

获取点击项的下标有问题，始终是-1；并且原本的点击展示label功能失效

通过ucharts组件中的@getIndex事件获取当前点击的数据下标，然后通过下标找到原始数据，并判断是否可以下钻。下钻后，图表右上角要有一个返回上一层的按钮。返回按钮用浮动来定位（即position：absolute），所以它的父元素需要position：relative来做限制。
代码如下：

	//html如下
	<view class="chart">
		<view class="back" v-if="stack.length > 1" @click="() => stack.pop()">
			<tui-icon size="16" name="back"></tui-icon>
			<text>返回</text>
		</view>
		<DataCharts type="pie" :opts="opts" :chartData="chartData" @getIndex="getIndex" />
	</view>
	//函数如下			
	const getIndex = (e) => {
		console.log('e==', e);
		const idx = e.currentIndex;//这里获取的idx始终是-1
		const current = e.opts.series[idx];
		if (current && current.children?.length > 0) {
			stack.push(current.children);
		}
	};
	//样式如下
	.chart {
		width: 100%;
		height: 550rpx;
		position: relative;//问题就出在这里了
	}
	.back {
		color: #999;
		padding: 2px 6px;
		position: absolute;
		font-size: 14px;
		z-index: 99999;
		top: 0;
		right: 0;
	}

原因分析：

就是因为ucharts组件的父元素使用了position:relative，所以导致ucharts的组件方法@getIndex无法获取到下标，返回的是默认的下标-1；

---

解决方案：

将父元素中的position:relative样式去掉即可正常。