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

fix： 修改line-cahrt tooltip的位置

Browse Source
This commit is contained in:
zhangyu
2021-12-21 15:41:46 +08:00
parent 409f911771
commit 8de08a6ead
15 changed files with 100 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
nezha-fronted/src/components/chart/chart.vue
View File

@@ -19,6 +19,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-pie>
<chart-bar
:ref="'chart' + chartInfo.id"
@@ -27,6 +28,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-bar>
<chartHexagon
:ref="'chart'+chartInfo.id"
@@ -35,6 +37,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chartHexagon>
<chart-url
:ref="'chart' + chartInfo.id"
@@ -43,6 +46,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-url>
<chart-text
:ref="'chart' + chartInfo.id"
@@ -51,6 +55,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-text>
<chart-treemap
:ref="'chart' + chartInfo.id"
@@ -59,6 +64,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-treemap>
<chart-log
:ref="'chart' + chartInfo.id"
@@ -67,6 +73,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-log>
<chart-stat
:ref="'chart' + chartInfo.id"
@@ -75,6 +82,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-stat>
<chart-gauge
:ref="'chart' + chartInfo.id"
@@ -83,6 +91,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-gauge>
<chart-diagram
:ref="'chart' + chartInfo.id"
@@ -90,6 +99,7 @@
:chart-data="chartData"
:chart-info="chartInfo"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
:chart-option="chartOption"
></chart-diagram>
<chartAutotopology
@@ -99,6 +109,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chartAutotopology>
<chartMap
:ref="'chart' + chartInfo.id"
@@ -107,6 +118,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chartMap>
<chart-asset-info
:ref="'chart' + chartInfo.id"
@@ -115,6 +127,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-asset-info>
<chart-endpoint-info
:ref="'chart' + chartInfo.id"
@@ -123,6 +136,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-endpoint-info>
<chart-table
:ref="'chart' + chartInfo.id"
@@ -131,6 +145,7 @@
:chart-info="chartInfo"
:chart-option="chartOption"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
></chart-table>
<chart-group
:ref="'chart' + chartInfo.id"
@@ -140,6 +155,7 @@
:chart-data="chartData"
:chart-info="chartInfo"
:is-fullscreen="isFullscreen"
@chartIsNoData="chartIsNoData"
:chart-option="chartOption"
></chart-group>
</template>

2
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -113,6 +113,7 @@ export default {
s.data = []
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -141,6 +142,7 @@ export default {
}
})
})
this.$emit('chartIsNoData', this.isNoData)
return s
},
formatterFunc (params, ticket, callback) {

2
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -71,6 +71,7 @@ export default {
let colorIndex = 0
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
const gauge = {
value: '',
showValue: '',
@@ -96,6 +97,7 @@ export default {
colorIndex++
})
})
this.$emit('chartIsNoData', this.isNoData)
resolve()
})
},

2
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -96,6 +96,7 @@ export default {
s.data = []
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -121,6 +122,7 @@ export default {
}
})
})
this.$emit('chartIsNoData', this.isNoData)
return s
},
formatterFunc: function (params, ticket, callback) {

2
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -57,6 +57,7 @@ export default {
console.log(originalDatas)
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
const stat = {
value: '',
showValue: '',
@@ -77,6 +78,7 @@ export default {
colorIndex++
})
})
this.$emit('chartIsNoData', this.isNoData)
resolve()
})
},

2
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -92,6 +92,7 @@ export default {
key = chartInfo.param.datasource[0].name
}
originalData.forEach((data, dataIndex) => {
this.isNoData = false
data.$labels = data.metric
const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -126,6 +127,7 @@ export default {
colorIndex++
})
})
this.$emit('chartIsNoData', this.isNoData)
return returnData
},
selectTableMapping (row, valueMapping) {

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

@@ -71,6 +71,7 @@ export default {
const { minTime, maxTime, minValue, maxValue } = this.getMinMaxFromData(this.chartData) // 此处时间是秒
chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime * 1000, maxTime * 1000) // 需转为毫秒
chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)
chartOption.tooltip.position = this.tooltipPosition
chartOption.yAxis.axisLabel.formatter = this.yAxisLabelFormatter(minValue, maxValue)
if (chartOption.toolbox.feature) {
chartOption.toolbox.feature.myStack.iconStyle.borderColor = this.isStack ? this.toolboxIconColor.active : this.toolboxIconColor.inactive

3
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -81,6 +81,7 @@ export default {
this.legends = []
chartOption.series[0] = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
chartOption.tooltip.formatter = this.formatterFunc
chartOption.tooltip.position = this.tooltipPosition
/* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
@@ -96,6 +97,7 @@ export default {
s.data = []
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
this.isNoData = false
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
@@ -126,6 +128,7 @@ export default {
}
})
})
this.$emit('chartIsNoData', this.isNoData)
return s
},
formatterFunc (params, ticket, callback) {

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

@@ -1,6 +1,7 @@
const chartBarOption = {
tooltip: {
trigger: 'item'
trigger: 'item',
confine: false
},
legend: {
show: false

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

@@ -8,6 +8,9 @@ const chartGaugeOption = {
show: true,
width: 30
},
tooltip: {
confine: false
},
pointer: {
show: false
},

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

@@ -1,6 +1,7 @@
const chartPieOption = {
tooltip: {
trigger: 'item'
trigger: 'item',
confine: false
},
legend: {
show: false

1
nezha-fronted/src/components/chart/chart/options/chartTreemap.js
View File

@@ -2,6 +2,7 @@ import * as echarts from 'echarts'
const formatUtil = echarts.format
const chartTreemapOption = {
tooltip: {
confine: false,
formatter: function (info) {
const value = info.value
const treePathInfo = info.treePathInfo

56
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -1,6 +1,6 @@
import lodash from 'lodash'
import { getMetricTypeValue } from '@/components/common/js/tools'
import { getChart, setChart } from '@/components/common/js/common'
import { getChart, getMousePoint, setChart } from '@/components/common/js/common'
export default {
data () {
return {
@@ -13,7 +13,8 @@ export default {
inactive: '#7e7e7e'
},
chartId: '',
isNoData: true
isNoData: true,
showAllData: false
}
},
props: {
@@ -40,6 +41,10 @@ export default {
console.log(this.chartData)
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
if (colorIndex >= 20 && !this.showAllData) {
colorIndex++
return
}
this.isNoData = false
const s = lodash.cloneDeep(seriesTemplate)
if (s) {
@@ -167,6 +172,53 @@ export default {
}, 300)
}
},
tooltipPosition (point, params, dom, rect, size) {
dom.style.transform = 'translateZ(0)'
const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度
const windowMouse = getMousePoint()
// 提示框位置
let x = 0
let y = 0
// 当前鼠标位置
const pointX = point[0]
const pointY = point[1]
// 外层div大小
const viewWidth = size.viewSize[0]
// const viewHeight = size.viewSize[1]
// 提示框大小
const boxWidth = size.contentSize[0]
const boxHeight = size.contentSize[1]
if (!this.isFullscreen) { // 本地显示
const chartDom = document.getElementById('chart-local-' + this.chartInfo.id)
console.log(point, params, dom, rect, size)
if (chartDom) {
if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
x = pointX + 15
} else {
x = pointX - boxWidth - 15
}
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
y = pointY + 15
} else {
y = pointY - boxHeight - 10
}
return [x, y]
}
} else {
if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
x = pointX + 10
} else {
x = pointX - boxWidth
}
if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
y = pointY + 15
} else {
y = pointY - boxHeight - 10
}
return [x, y]
}
},
mouseLeaveChart () {
const myChart = getChart(this.chartId)
if (myChart) {

2
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- chart外层箱子 -->
<div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart">
<div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
<!-- title和工具栏，支持浮动 -->
<chart-header
v-if="!isFullscreen"

7
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -157,6 +157,7 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
import { fromRoute } from '@/components/common/js/constants'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import { lineChartMove } from '@/components/common/js/common'
// import chartData from './testData'
export default {
@@ -800,6 +801,9 @@ export default {
this.onScroll()
document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
if (!document.onmousemove) { // 添加鼠标移动事件监听
document.onmousemove = lineChartMove
}
},
watch: {
'filter.searchName': function (n, o) {
@@ -860,6 +864,9 @@ export default {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
}
localStorage.removeItem('panelTime')
if (!document.onmousemove) { // 添加鼠标移动事件监听
document.onmousemove = null
}
}
}
</script>