SPC后续之鼠标位置出现隐藏数据弹框

需求 ：点击折线图，在点击位置出现隐藏数据的弹框
先直接上代码，后续再解释

一、代码细节及展示
1.echarts双击事件

const _this = this;
this.chart[id].on("dblclick", function (params) {
	const { data, event } = params;
	_this.isShowDelete = true; //显示弹框
	_this.delStyle.top = event.event.pageY + "px";
	_this.delStyle.left = event.event.pageX + "px";
	_this.selectObj = { ...data, dataIndex: data._index, label, name };
});

2.css

<div class="spc-delete" ref="spcRef" v-if="isShowDelete" :style="delStyle">
	<el-popover placement="top" width="160">
	<p>确认切换为内部标记吗？</p>
	<div style="text-align: right; margin: 0">
		<el-button size="mini" type="text" @click="isShowDelete = false">取消</el-button>
		<el-button type="primary" size="mini" @click="deletClick">确定</el-button>
	</div>
	<el-button slot="reference" size="mini">切换内部标记</el-button>
	</el-popover>
</div>

3.top,left值设定

data:{
  return {
     isShowDelete:false,//动态控制隐藏显示数据
     delStyle: { top: 0, left: 0 },
  }
}

4.弹框的样式设定

注意:使用的是position:fixed

.spc-delete {
	position: fixed;
	white-space: nowrap;
	z-index: 9999999;
	background-color: #fff;
	border-width: 0px;
	border-color: rgb(51, 51, 51);
	border-radius: 4px;
	color: #000;
	padding: 5px;
	left: 610px;
	top: 97px;
	cursor: pointer;
}

5.删除事件【具体按照自己的数据处理逻辑】

我这边是伪删除–加了isShow:false,echarts图表 过滤isShow为false的值

deletClick() {
	let tempLineData = [];
	const { label, name, dataIndex } = this.selectObj;
	this.lineData.forEach((item, index) => {
		tempLineData[index] = { ...item };
		if (item.name === name) {
			for (let itemKey in item.data) {
				if (itemKey === label) {
					// 隐藏折线图数据
					tempLineData[index].data[itemKey].value[dataIndex][1]["isShow"] = false;
					tempLineData[index].data[itemKey].value[dataIndex - 1][1]["isShow"] = false; //把隐藏点之前的 值为- 的同样隐藏
					//删除直方图数据
					let normalIndex = tempLineData[index].data[itemKey].normalData.indexOf(this.selectObj.value);
					tempLineData[index].data[itemKey].normalData.splice(normalIndex, 1);
					tempLineData = JSON.parse(JSON.stringify(tempLineData));
					// 隐藏内部数据弹框
					this.isShowDelete = false;
					// 刷新修改的图表
					this.$nextTick(() => {
					    // 折线图
						this.initChartLine(tempLineData[index].data[itemKey], item.id + itemKey + "line", itemKey, item.name);
						//直方图
						this.initChartNormal(tempLineData[index].data[itemKey], item.id + itemKey + "normal", itemKey);
					});
				}
			}
		}
	});
},

6.展示结果

二、Event下鼠标坐标的获取

1.event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
方案② 我用的是clientX-左侧菜单栏与clientY -头部栏，点前两个还是可以的，当第三个折线图时，就会有错位的情况，原因是因为没有加上滚动条滚动的位置

2.event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
方案③ 后来使用了这个，但由于我的隐藏数据弹框设定定位position:absolute，导致位置不准确【估计是有外层div有设定为相对定位吧】，最终改为position:fixed就好了
原因：运用position：fixed；一定要抱紧“ 相对于浏览器窗口"进行定位这个条件！

3.event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
方案① 原本我用的是offsetX与offsetY但因为我的echarts图表用的是相对定位+绝对定位，所以 当多个折线图时，每个位置 都是一样的，无法满足我的需求

4.event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

三、echarts图表 鼠标点击事件
位置