${alias || item.seriesName}
@@ -707,9 +700,9 @@ export default {
oldDot
}
},
- datalinkPosition (e) {
+ toolboxPosition (e) {
this.$nextTick(() => {
- const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+ const box = document.getElementById(`chart-toolbox-${this.chartId}`)
const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
if (box) {
@@ -718,22 +711,15 @@ export default {
const parent = chartDom.parentElement
const parClientWidth = parent.clientWidth// 可视宽度
if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
- this.tooltip.x = left + 10
+ this.toolbox.x = left + 10
} else {
- this.tooltip.x = left - boxWidth
+ this.toolbox.x = left - boxWidth
}
- this.tooltip.y = top + 10
+ this.toolbox.y = top + 10
}
})
},
chartClick (params) {
- const option = {
- tooltip: {
- extraCssText: 'z-index:1000;visibility:hidden;transition:none;',
- hideDelay: 0
- }
- }
- this.chart.setOption(option)
this.chart.dispatchAction({
type: 'hideTip'
})
@@ -754,7 +740,7 @@ export default {
}
const val = formatScientificNotation(params.value[1], paramsDot)
const color = this.colors[params.seriesIndex]
- this.tooltip.tooltipHtml = `
+ this.toolbox.tooltipHtml = `
`
- this.tooltip.show = true
- this.tooltip.dataLinkShow = true
- this.tooltip.clickIndex = params.seriesIndex
+ this.toolbox.show = true
+ this.toolbox.clickIndex = params.seriesIndex
const e = params.event.event
- this.datalinkPosition(e)
+ this.toolboxPosition(e)
},
clickout () {
- this.tooltip.show = false
- this.tooltip.dataLinkShow = false
- const option = {
- tooltip: {
- extraCssText: 'z-index:1000;visibility:visible;'
- }
- }
- this.chart.setOption(option)
+ this.toolbox.show = false
},
showSelectedSeries () {
this.legend.forEach((item, index) => {
- if (index == this.tooltip.clickIndex) {
+ if (index == this.toolbox.clickIndex) {
this.chart.dispatchAction({
type: 'legendSelect',
name: item.name
@@ -802,7 +780,7 @@ export default {
this.legend = this.legend.map((item, index) => {
return {
...item,
- isGray: index !== this.tooltip.clickIndex
+ isGray: index !== this.toolbox.clickIndex
}
})
this.clickout()
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index c43d04b60..de2d120ad 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -76,14 +76,15 @@ const commonOption = {
tooltip: {
trigger: 'axis',
confine: false,
- extraCssText: 'z-index:1000;',
+ extraCssText: 'z-index:99999999;',
backgroundColor: 'rgba(221,228,237,1)',
borderColor: 'rgba(221,228,237,1)',
textStyle: { color: '#000' },
axisPointer: {
snap: false,
animation: false
- }
+ },
+ hideDelay: 0
// formatter:null,
// position:null,
},