fix: 调整charttooltip 样式错乱的问题

This commit is contained in:
zhangyu
2023-11-29 13:43:18 +08:00
parent b91ab76825
commit 215b2e3ccf
4 changed files with 25 additions and 15 deletions

View File

@@ -88,7 +88,7 @@ export default {
methods: {
dateChange () {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
this.setSearchTime('searchTime', nowTimeType)
this.setSearchTime('searchTime', nowTimeType,'', false)
this.filter.start_time = bus.timeFormate(this.searchTime[0])
this.filter.end_time = bus.timeFormate(this.searchTime[1])
this.filter.value = this.searchTime[2]
@@ -206,10 +206,10 @@ export default {
this.nowType.end_time = this.searchTime[1]
if (!this.nowTimeType) {
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
this.setSearchTime('searchTime', this.nowType)
this.setSearchTime('searchTime', this.nowType, '', false)
} else {
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
this.setSearchTime('searchTime', this.nowType)
this.setSearchTime('searchTime', this.nowType, '', false)
}
}
}

View File

@@ -95,7 +95,9 @@ export default {
clickIndex: undefined
},
isGrey: [],
seriesData: []
seriesData: [],
leftYaxisMin: undefined,
leftYaxisMax: undefined
}
},
computed: {
@@ -403,9 +405,11 @@ export default {
let chartUplot = ''
chartUplot = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`))
setChart(this.chartId, chartUplot)
this.isInit = false
}, 100)
},
renderMinMax (opts) {
const that = this
let leftMin = this.$lodash.get(this.chartInfo, 'param.min', undefined)
let leftMax = this.$lodash.get(this.chartInfo, 'param.max', undefined)
if (leftMin || leftMax) {
@@ -429,6 +433,8 @@ export default {
leftMax = initMax / 2
}
}
that.leftYaxisMin = leftMin
that.leftYaxisMax = leftMax
return [leftMin, leftMax]
}
}

View File

@@ -511,7 +511,7 @@ export default {
let tooltip = root.getElementsByClassName('nz-uplot-tooltip')
if (tooltip.length) {
tooltip = tooltip[0]
tooltip.style.display = 'block'
// tooltip.style.display = 'block'
}
over.addEventListener('mouseleave', this.uplotMouseleave)
over.addEventListener('mousemove', this.uplotMousemove)
@@ -652,14 +652,16 @@ export default {
const x0 = u.valToPos(xd[i0], 'x', true)
const x1 = u.valToPos(xd[i1], 'x', true)
thresholdsArr.forEach(item => {
const y0 = u.valToPos(item.value, 'left', true)
const y1 = u.valToPos(item.value, 'left', true)
ctx.beginPath()
ctx.strokeStyle = item.color
ctx.setLineDash([5, 5])
ctx.moveTo(x0, y0)
ctx.lineTo(x1, y1)
ctx.stroke()
if (item.value > this.leftYaxisMin && item.value < this.leftYaxisMax) {
const y0 = u.valToPos(item.value, 'left', true)
const y1 = u.valToPos(item.value, 'left', true)
ctx.beginPath()
ctx.strokeStyle = item.color
ctx.setLineDash([5, 5])
ctx.moveTo(x0, y0)
ctx.lineTo(x1, y1)
ctx.stroke()
}
})
ctx.restore()
}

View File

@@ -217,10 +217,12 @@ export default {
}
},
/* 时间条件查询--end */
setSearchTime (key, nowType, cb) { // 设置searchTime
setSearchTime (key, nowType, cb, flag = true) { // 设置searchTime
if (this.$refs.pickTime) {
const nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
this.nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
if (flag) {
this.nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
}
const type = nowTimeType.type
const val = nowTimeType.value
const oneDTimestamp = 24 * 60 * 60 * 1000