需求 :点击折线图,在点击位置出现隐藏数据的弹框
先直接上代码,后续再解释
一、代码细节及展示
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图表 鼠标点击事件
位置