echarts点击某一行显示菜单

1.echarts图表点击触发事件

获取图表点击所在行的参数和位置信息

//图表点击事件
myChart[this.id].on("click", function (params) {
	const { data, event } = params;
	_this.$parent.$refs.submenuRef.isShowSubMenu = true;
	_this.$parent.$refs.submenuRef.submenuStyle = { top: event.event.pageY + "px", left: event.event.pageX + "px" };
	_this.$parent.$refs.submenuRef.data = { ...data };
});

2. 菜单子组件

参数：
isShowSubMenu: false,
submenuStyle: {}, //子菜单位置
data: {}, //选中值数据

• html

<div class="temp-submenu" ref="submenuRef" v-show="isShowSubMenu" :style="submenuStyle">
	<Icon type="ios-close" class="submenu-close-icon" @click="cancelClick()" />
	<ul>
		<li @click="submenuClick('datadetail')">查看数据明细</li>
	</ul>
</div>

• js

//子菜单点击事件
submenuClick(name) {
	//菜单点击逻辑
	this.isShowSubMenu = false;
},
//关闭弹框
cancelClick() {
	this.isShowSubMenu = false;
},

• css

/* 子菜单悬浮框*/
.temp-submenu {
	position: fixed;
	white-space: nowrap;
	z-index: 9999999;
	border-width: 0px;
	border-color: rgb(51, 51, 51);
	color: #000;
	left: 610px;
	top: 97px;
	cursor: pointer;
	background: #39403ba6;
	color: #fff;
	min-height: 100px;

	li {
		list-style: none;
		padding: 5px 10px;
		margin: 0 0 5px 0;
		&:hover {
			background: #27ce88;
		}
	}
	.submenu-close-icon {
		display: inline-block;
		width: 100%;
		text-align: right;
		font-size: 18px;
	}
}