NEZ-1951 fix:修复图表最大化悬浮框位置错误
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
class="chart-stat-item"
|
class="chart-stat-item"
|
||||||
v-for="(item,index) in statData"
|
v-for="(item,index) in statData"
|
||||||
:key="index"
|
:key="index"
|
||||||
@mouseenter="statMouseEnter(item)"
|
@mouseenter="statMouseEnter(item,$event)"
|
||||||
@mouseleave="statMouseleave(item)"
|
@mouseleave="statMouseleave(item)"
|
||||||
:class="statData.length===1 ?'only-stat' : ''"
|
:class="statData.length===1 ?'only-stat' : ''"
|
||||||
:style="{
|
:style="{
|
||||||
@@ -163,11 +163,33 @@ export default {
|
|||||||
this.tooltip.x = e.pageX + 15
|
this.tooltip.x = e.pageX + 15
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
statMouseEnter (that) {
|
statMouseEnter (that, e) {
|
||||||
this.tooltip.title = that.legend
|
this.tooltip.title = that.legend
|
||||||
this.tooltip.value = that.showValue
|
this.tooltip.value = that.showValue
|
||||||
this.tooltip.mapping = that.mapping
|
this.tooltip.mapping = that.mapping
|
||||||
this.tooltip.show = true
|
this.tooltip.show = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const windowWidth = window.innerWidth// 窗口宽度
|
||||||
|
const windowHeight = window.innerHeight// 窗口高度
|
||||||
|
const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
|
||||||
|
if (box) {
|
||||||
|
const boxWidth = box.offsetWidth
|
||||||
|
const boxHeight = box.offsetHeight
|
||||||
|
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||||
|
this.tooltip.x = e.pageX + 15
|
||||||
|
} else {
|
||||||
|
this.tooltip.x = e.pageX - boxWidth - 15
|
||||||
|
}
|
||||||
|
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||||
|
this.tooltip.y = e.pageY + 15
|
||||||
|
} else {
|
||||||
|
this.tooltip.y = e.pageY - boxHeight - 10
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.tooltip.y = e.pageY + 15
|
||||||
|
this.tooltip.x = e.pageX + 15
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
statMouseleave (taht) {
|
statMouseleave (taht) {
|
||||||
this.tooltip.show = false
|
this.tooltip.show = false
|
||||||
|
|||||||
Reference in New Issue
Block a user