gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：select series悬浮框优化

Browse Source
This commit is contained in:
zyh
2023-10-16 14:46:05 +08:00
parent dba1179e60
commit 126a078205
5 changed files with 46 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -683,10 +683,10 @@
} }
} }
.chart-dataLink-tooltip{ .chart-toolbox{
position: absolute !important; position: absolute !important;
padding-bottom: 2px !important; padding-bottom: 2px !important;
z-index: 999999999; z-index: 9999;
pointer-events: auto; pointer-events: auto;
.chart-dataLink-list{ .chart-dataLink-list{
width: calc(100% + 20px); width: calc(100% + 20px);

63
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -22,9 +22,9 @@
:series="series" :series="series"
:is-fullscreen="isFullscreen" :is-fullscreen="isFullscreen"
></chart-legend> ></chart-legend>
<div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
<div v-html="tooltip.tooltipHtml"></div> <div v-html="toolbox.tooltipHtml"></div>
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> <div class="chart-dataLink-list">
<!-- 只有一条数据时显示 --> <!-- 只有一条数据时显示 -->
<div class="chart-dataLink-item" v-if="isGrey.filter(value => value === false).length==1" @click="showAllSeries"> <div class="chart-dataLink-item" v-if="isGrey.filter(value => value === false).length==1" @click="showAllSeries">
<i class="nz-icon nz-icon-a-Showallseries"></i> <i class="nz-icon nz-icon-a-Showallseries"></i>
@@ -72,14 +72,13 @@ export default {
isStack: false, isStack: false,
hasRightYAxis: false, hasRightYAxis: false,
chartLoading: false, chartLoading: false,
tooltip: { toolbox: {
x: 0, x: 0,
y: 0, y: 0,
title: 0, title: 0,
value: 0, value: 0,
mapping: {}, mapping: {},
show: false, show: false,
dataLinkShow: '',
metric: {}, metric: {},
activeIndex: undefined, activeIndex: undefined,
clickIndex: undefined clickIndex: undefined
@@ -248,12 +247,6 @@ export default {
} }
if (this.isInit) { if (this.isInit) {
myChart.on('click', this.chartClick) myChart.on('click', this.chartClick)
myChart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
const e = params.event.event
e.stopPropagation()
}
})
// 鼠标滑过当前symbol 改变样式 // 鼠标滑过当前symbol 改变样式
myChart.on('mousemove', (params) => { myChart.on('mousemove', (params) => {
@@ -283,7 +276,7 @@ export default {
} }
) )
} }
this.tooltip.activeIndex = params.seriesIndex this.toolbox.activeIndex = params.seriesIndex
}) })
myChart.on('mouseout', (params) => { myChart.on('mouseout', (params) => {
const option = myChart.getOption() const option = myChart.getOption()
@@ -298,7 +291,7 @@ export default {
}) })
myChart.setOption({ series }) myChart.setOption({ series })
} }
this.tooltip.activeIndex = undefined this.toolbox.activeIndex = undefined
}) })
// 修复echarts bug(dataZoom设置为inside 未按住shift 页面无法滚动) // 修复echarts bug(dataZoom设置为inside 未按住shift 页面无法滚动)
@@ -564,7 +557,7 @@ export default {
// 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示 // 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示
str += ` str += `
<div class="${(self.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}"> <div class="${(self.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">
<div class="row__label"> <div class="row__label">
<span class="${className}" style="background-color: ${color};color: ${color}"></span> <span class="${className}" style="background-color: ${color};color: ${color}"></span>
<span>${seriesName}</span> <span>${seriesName}</span>
@@ -666,25 +659,25 @@ export default {
this.hasRightYAxis = true this.hasRightYAxis = true
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度 const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度 const windowHeight = window.innerHeight// 窗口高度
this.$nextTick(() => { 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['timeSeries-chart-box'].getBoundingClientRect().left const left = e.pageX - this.$refs['timeSeries-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top
if (box) { if (box) {
const boxWidth = box.offsetWidth const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 15 this.toolbox.x = left + 15
} else { } else {
this.tooltip.x = left - boxWidth - 15 this.toolbox.x = left - boxWidth - 15
} }
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
this.tooltip.y = top + 15 this.toolbox.y = top + 15
} else { } else {
this.tooltip.y = top - boxHeight - 10 this.toolbox.y = top - boxHeight - 10
} }
} }
}) })
@@ -694,17 +687,9 @@ export default {
if (this.isConnect !== 'none') { if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup') echarts.disconnect('timeSeriesGroup')
} }
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:hidden;transition:none;',
hideDelay: 0
}
}
getChart(this.chartId).setOption(option)
getChart(this.chartId).dispatchAction({ getChart(this.chartId).dispatchAction({
type: 'hideTip' type: 'hideTip'
}) })
// 生成dataLink tooltip
const nameArr = params.seriesName.split('-') const nameArr = params.seriesName.split('-')
if (nameArr.length > 1) { if (nameArr.length > 1) {
nameArr.splice(nameArr.length - 1, 1) nameArr.splice(nameArr.length - 1, 1)
@@ -737,7 +722,7 @@ export default {
className = 'yAxis-icon nz-icon nz-icon-youzongzhou' className = 'yAxis-icon nz-icon nz-icon-youzongzhou'
} }
const color = this.colorList[params.seriesIndex] const color = this.colorList[params.seriesIndex]
this.tooltip.tooltipHtml = ` this.toolbox.tooltipHtml = `
<div class="nz-chart__tooltip"> <div class="nz-chart__tooltip">
<div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div> <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
<div class="tooltip__row"> <div class="tooltip__row">
@@ -751,24 +736,16 @@ export default {
</div> </div>
</div> </div>
` `
this.tooltip.show = true this.toolbox.show = true
this.tooltip.dataLinkShow = true this.toolbox.clickIndex = params.seriesIndex
this.tooltip.clickIndex = params.seriesIndex
const e = params.event.event const e = params.event.event
this.datalinkPosition(e) this.toolboxPosition(e)
if (this.isConnect !== 'none') { if (this.isConnect !== 'none') {
echarts.connect('timeSeriesGroup') echarts.connect('timeSeriesGroup')
} }
}, },
clickout () { clickout () {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
const option = {
tooltip: {
extraCssText: 'z-index:99999999;visibility:visible;'
}
}
getChart(this.chartId).setOption(option)
}, },
showSelectedSeries () { showSelectedSeries () {
if (this.isConnect !== 'none') { if (this.isConnect !== 'none') {
@@ -776,7 +753,7 @@ export default {
} }
this.legends.forEach((item, index) => { this.legends.forEach((item, index) => {
if (index == this.tooltip.clickIndex) { if (index == this.toolbox.clickIndex) {
getChart(this.chartId).dispatchAction({ getChart(this.chartId).dispatchAction({
type: 'legendSelect', type: 'legendSelect',
name: item.name name: item.name
@@ -789,7 +766,7 @@ export default {
} }
}) })
this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex) this.isGrey = this.isGrey.map((g, i) => i !== this.toolbox.clickIndex)
this.$refs.legend.isGrey = this.isGrey this.$refs.legend.isGrey = this.isGrey
if (this.isConnect !== 'none') { if (this.isConnect !== 'none') {
echarts.disconnect('timeSeriesGroup') echarts.disconnect('timeSeriesGroup')

3
nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
View File

@@ -46,7 +46,8 @@ export const chartTimeSeriesLineOption = {
label: { label: {
show: false show: false
} }
} },
hideDelay: 0
}, },
dataZoom: [ dataZoom: [
{ {

60
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -23,9 +23,9 @@
</div> </div>
</div> </div>
<div :id="`chart-canvas-tooltip-${chartId}`" class="chart-expolre-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout"> <div :id="`chart-toolbox-${chartId}`" class="chart-expolre-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
<div v-html="tooltip.tooltipHtml"></div> <div v-html="toolbox.tooltipHtml"></div>
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow"> <div class="chart-dataLink-list">
<!-- 只有一条数据时显示 --> <!-- 只有一条数据时显示 -->
<div class="chart-dataLink-item" v-if="legend.filter(value => value.isGray === false).length==1" @click="showAllSeries"> <div class="chart-dataLink-item" v-if="legend.filter(value => value.isGray === false).length==1" @click="showAllSeries">
<i class="nz-icon nz-icon-a-Showallseries"></i> <i class="nz-icon nz-icon-a-Showallseries"></i>
@@ -82,14 +82,13 @@ export default {
dataSize: 20, dataSize: 20,
chartDot: 2, chartDot: 2,
theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light', theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light',
tooltip: { toolbox: {
x: 0, x: 0,
y: 0, y: 0,
title: 0, title: 0,
value: 0, value: 0,
mapping: {}, mapping: {},
show: false, show: false,
dataLinkShow: '',
metric: {}, metric: {},
activeIndex: undefined, activeIndex: undefined,
clickIndex: undefined clickIndex: undefined
@@ -248,12 +247,6 @@ export default {
if (this.isInit) { if (this.isInit) {
this.chart.on('click', this.chartClick) this.chart.on('click', this.chartClick)
this.chart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
const e = params.event.event
e.stopPropagation()
}
})
// 鼠标滑过当前symbol 改变样式 // 鼠标滑过当前symbol 改变样式
this.chart.on('mousemove', (params) => { this.chart.on('mousemove', (params) => {
@@ -274,7 +267,7 @@ export default {
dataIndex: params.dataIndex dataIndex: params.dataIndex
} }
) )
this.tooltip.activeIndex = params.seriesIndex this.toolbox.activeIndex = params.seriesIndex
}) })
this.chart.on('mouseout', (params) => { this.chart.on('mouseout', (params) => {
const option = this.chart.getOption() const option = this.chart.getOption()
@@ -287,7 +280,7 @@ export default {
}) })
}) })
this.chart.setOption({ series }) this.chart.setOption({ series })
this.tooltip.activeIndex = undefined this.toolbox.activeIndex = undefined
}) })
} }
@@ -533,7 +526,7 @@ export default {
showFlag = showFlag || item.value[1] showFlag = showFlag || item.value[1]
if (!isNaN(item.value[1] + '')) { if (!isNaN(item.value[1] + '')) {
const val = Number(item.value[1]) const val = Number(item.value[1])
str += `<div class="${(this.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">` str += `<div class="${(this.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">`
str += `<div class="row__label"> str += `<div class="row__label">
<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> <span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>
<span>${alias || item.seriesName}</span> <span>${alias || item.seriesName}</span>
@@ -707,9 +700,9 @@ export default {
oldDot oldDot
} }
}, },
datalinkPosition (e) { toolboxPosition (e) {
this.$nextTick(() => { 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 left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
if (box) { if (box) {
@@ -718,22 +711,15 @@ export default {
const parent = chartDom.parentElement const parent = chartDom.parentElement
const parClientWidth = parent.clientWidth// 可视宽度 const parClientWidth = parent.clientWidth// 可视宽度
if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框 if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 10 this.toolbox.x = left + 10
} else { } else {
this.tooltip.x = left - boxWidth this.toolbox.x = left - boxWidth
} }
this.tooltip.y = top + 10 this.toolbox.y = top + 10
} }
}) })
}, },
chartClick (params) { chartClick (params) {
const option = {
tooltip: {
extraCssText: 'z-index:1000;visibility:hidden;transition:none;',
hideDelay: 0
}
}
this.chart.setOption(option)
this.chart.dispatchAction({ this.chart.dispatchAction({
type: 'hideTip' type: 'hideTip'
}) })
@@ -754,7 +740,7 @@ export default {
} }
const val = formatScientificNotation(params.value[1], paramsDot) const val = formatScientificNotation(params.value[1], paramsDot)
const color = this.colors[params.seriesIndex] const color = this.colors[params.seriesIndex]
this.tooltip.tooltipHtml = ` this.toolbox.tooltipHtml = `
<div class="nz-chart__tooltip"> <div class="nz-chart__tooltip">
<div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div> <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
<div class="tooltip__row"> <div class="tooltip__row">
@@ -768,25 +754,17 @@ export default {
</div> </div>
</div> </div>
` `
this.tooltip.show = true this.toolbox.show = true
this.tooltip.dataLinkShow = true this.toolbox.clickIndex = params.seriesIndex
this.tooltip.clickIndex = params.seriesIndex
const e = params.event.event const e = params.event.event
this.datalinkPosition(e) this.toolboxPosition(e)
}, },
clickout () { clickout () {
this.tooltip.show = false this.toolbox.show = false
this.tooltip.dataLinkShow = false
const option = {
tooltip: {
extraCssText: 'z-index:1000;visibility:visible;'
}
}
this.chart.setOption(option)
}, },
showSelectedSeries () { showSelectedSeries () {
this.legend.forEach((item, index) => { this.legend.forEach((item, index) => {
if (index == this.tooltip.clickIndex) { if (index == this.toolbox.clickIndex) {
this.chart.dispatchAction({ this.chart.dispatchAction({
type: 'legendSelect', type: 'legendSelect',
name: item.name name: item.name
@@ -802,7 +780,7 @@ export default {
this.legend = this.legend.map((item, index) => { this.legend = this.legend.map((item, index) => {
return { return {
...item, ...item,
isGray: index !== this.tooltip.clickIndex isGray: index !== this.toolbox.clickIndex
} }
}) })
this.clickout() this.clickout()

5
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -76,14 +76,15 @@ const commonOption = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine: false, confine: false,
extraCssText: 'z-index:1000;', extraCssText: 'z-index:99999999;',
backgroundColor: 'rgba(221,228,237,1)', backgroundColor: 'rgba(221,228,237,1)',
borderColor: 'rgba(221,228,237,1)', borderColor: 'rgba(221,228,237,1)',
textStyle: { color: '#000' }, textStyle: { color: '#000' },
axisPointer: { axisPointer: {
snap: false, snap: false,
animation: false animation: false
} },
hideDelay: 0
// formatter:null, // formatter:null,
// position:null, // position:null,
}, },