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: { methods: {
dateChange () { dateChange () {
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType 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.start_time = bus.timeFormate(this.searchTime[0])
this.filter.end_time = bus.timeFormate(this.searchTime[1]) this.filter.end_time = bus.timeFormate(this.searchTime[1])
this.filter.value = this.searchTime[2] this.filter.value = this.searchTime[2]
@@ -206,10 +206,10 @@ export default {
this.nowType.end_time = this.searchTime[1] this.nowType.end_time = this.searchTime[1]
if (!this.nowTimeType) { if (!this.nowTimeType) {
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType) this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
this.setSearchTime('searchTime', this.nowType) this.setSearchTime('searchTime', this.nowType, '', false)
} else { } else {
this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType) 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 clickIndex: undefined
}, },
isGrey: [], isGrey: [],
seriesData: [] seriesData: [],
leftYaxisMin: undefined,
leftYaxisMax: undefined
} }
}, },
computed: { computed: {
@@ -403,9 +405,11 @@ export default {
let chartUplot = '' let chartUplot = ''
chartUplot = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`)) chartUplot = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`))
setChart(this.chartId, chartUplot) setChart(this.chartId, chartUplot)
this.isInit = false
}, 100) }, 100)
}, },
renderMinMax (opts) { renderMinMax (opts) {
const that = this
let leftMin = this.$lodash.get(this.chartInfo, 'param.min', undefined) let leftMin = this.$lodash.get(this.chartInfo, 'param.min', undefined)
let leftMax = this.$lodash.get(this.chartInfo, 'param.max', undefined) let leftMax = this.$lodash.get(this.chartInfo, 'param.max', undefined)
if (leftMin || leftMax) { if (leftMin || leftMax) {
@@ -429,6 +433,8 @@ export default {
leftMax = initMax / 2 leftMax = initMax / 2
} }
} }
that.leftYaxisMin = leftMin
that.leftYaxisMax = leftMax
return [leftMin, leftMax] return [leftMin, leftMax]
} }
} }

View File

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

View File

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