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

本文介绍了如何利用ECharts的双击事件结合Vue实现点击折线图后在指定位置显示隐藏数据的弹框。通过设置CSS样式和事件处理,确保弹框位置准确,并详细解释了不同鼠标坐标属性的用法,如clientX/Y, pageX/Y, offsetX/Y, screenX/Y。同时,文章展示了删除事件的处理逻辑,包括数据过滤和图表更新的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

一、代码细节及展示
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个属性,标准事件没有对应的属性。
方案① 原本我用的是offsetXoffsetY但因为我的echarts图表用的是相对定位+绝对定位,所以 当多个折线图时,每个位置 都是一样的,无法满足我的需求

4.event.screenX、event.screenY

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

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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值