+
+
+
+ {{$t('overall.copy')}} PromQL
+ {{$t('overall.copy')}} LogQL
+
{{item.title}}
@@ -119,14 +125,8 @@ export default {
}
myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
- if (this.isInit && this.dataLink.length) {
+ if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
myChart.on('click', this.chartClick)
- myChart.on('mousedown', (params) => {
- if (this.tooltip.dataLinkShow && params.dataIndex) {
- const e = params.event.event
- e.stopPropagation()
- }
- })
}
this.isInit = false
}, 200)
@@ -195,57 +195,46 @@ export default {
`
},
- datalinkPosition (e) {
+ toolboxPosition (e) {
const windowWidth = window.innerWidth// 窗口宽度
const windowHeight = window.innerHeight// 窗口高度
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['treemap-chart-box'].getBoundingClientRect().left
const top = e.pageY - this.$refs['treemap-chart-box'].getBoundingClientRect().top
if (box) {
const boxWidth = box.offsetWidth
const boxHeight = box.offsetHeight
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
- this.tooltip.x = left + 15
+ this.toolbox.x = left + 15
} else {
- this.tooltip.x = left - boxWidth - 15
+ this.toolbox.x = left - boxWidth - 15
}
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
- this.tooltip.y = top + 15
+ this.toolbox.y = top + 15
} else {
- this.tooltip.y = top - boxHeight - 10
+ this.toolbox.y = top - boxHeight - 10
}
}
})
},
chartClick (params) {
if (!params.dataIndex) { return } // 点击父节点(空白间隙)
- const option = {
- tooltip: {
- extraCssText: 'z-index:99999999;visibility:hidden;transition:none;'
- }
- }
- getChart(this.chartId).setOption(option)
- this.tooltip.title = params.data.alias
- this.tooltip.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
- this.tooltip.mapping = params.data.mapping
- this.tooltip.show = true
- this.tooltip.dataLinkShow = true
- this.tooltip.metric.labels = params.data.labels
- this.tooltip.metric.expressionIndex = params.data.expressionIndex
+ getChart(this.chartId).dispatchAction({
+ type: 'hideTip'
+ })
+ this.toolbox.title = params.data.alias
+ this.toolbox.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
+ this.toolbox.mapping = params.data.mapping
+ this.toolbox.show = true
+ this.toolbox.metric.labels = params.data.labels
+ this.toolbox.metric.expressionIndex = params.data.expressionIndex
const e = params.event.event
- this.datalinkPosition(e)
+ this.toolboxPosition(e)
},
clickout () {
- if (this.dataLink.length) {
- this.tooltip.show = false
- this.tooltip.dataLinkShow = false
- const option = {
- tooltip: {
- extraCssText: 'z-index:99999999;visibility:visible;'
- }
- }
- getChart(this.chartId).setOption(option)
+ if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+ this.toolbox.show = false
}
}
},
diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue
index e7f6f7593..49c6eccfc 100644
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -129,11 +129,6 @@ export default {
}
},
methods: {
- onCopy (txt) {
- this.$copyText(txt).then(() => {
- this.$message.success({ message: this.$t('overall.copySuccess') })
- })
- },
clickLegend (legendName, index) {
/* 点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
@@ -272,11 +267,24 @@ export default {
this.$emit('clickLegendD3', this.isGrey)
},
hoverLegend (legendName, index, type) {
+ // legend 已经取消显示，鼠标悬浮，不开启 高亮效果
+ if (this.isGrey[index]) {
+ return false
+ }
if (this.chartInfo.type === 'pie' || this.chartInfo.type === 'doughnut' || this.chartInfo.type === 'rose') {
- if (!this.isGrey[index]) {
- this.$emit('hoverLegendD3', legendName, index, type)
- }
+ this.$emit('hoverLegendD3', legendName, index, type)
} else if (this.isTimeSeries) {
+ if (type == 'highlight' && getChart(this.chartId)) {
+ const option = getChart(this.chartId).getOption()
+ const series = this.$lodash.cloneDeep(option.series)
+ series[index].emphasis.focus = 'series'
+ getChart(this.chartId).setOption({ series })
+ } else if (getChart(this.chartId)) {
+ const option = getChart(this.chartId).getOption()
+ const series = this.$lodash.cloneDeep(option.series)
+ series[index].emphasis.focus = 'none'
+ getChart(this.chartId).setOption({ series })
+ }
getChart(this.chartId) && getChart(this.chartId).dispatchAction({
type: type,
seriesIndex: index,
diff --git a/nezha-fronted/src/components/chart/chart/line-chart-block.vue b/nezha-fronted/src/components/chart/chart/line-chart-block.vue
index 3f56dd3eb..27c2eb92f 100644
--- a/nezha-fronted/src/components/chart/chart/line-chart-block.vue
+++ b/nezha-fronted/src/components/chart/chart/line-chart-block.vue
@@ -1740,13 +1740,13 @@ export default {
theData: {
name: '',
symbol: 'emptyCircle', // 去掉点
- symbolSize: [2, 2],
+ symbolSize: 8,
smooth: 0.2, // 曲线变平滑
showSymbol: false,
data: [],
type: this.data.type,
lineStyle: {
- width: 1,
+ width: 2,
opacity: 0.9
}
// visible: true,
diff --git a/nezha-fronted/src/components/chart/chart/options/chartBar.js b/nezha-fronted/src/components/chart/chart/options/chartBar.js
index 3898e0fcd..64a9553a2 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartBar.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartBar.js
@@ -7,7 +7,8 @@ const chartBarOption = {
z: 9,
animation: false,
appendToBody: true,
- className: 'chart-bar'
+ className: 'chart-bar',
+ hideDelay: 0
},
legend: {
show: false
diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
index 9089b7c2f..a6ee55528 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
@@ -7,7 +7,8 @@ const chartGaugeOption = {
z: 9,
animation: false,
appendToBody: true,
- className: 'chart-gauge'
+ className: 'chart-gauge',
+ hideDelay: 0
},
legend: {
show: false
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
index 9145789d4..25c7940aa 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -46,13 +46,14 @@ export const chartTimeSeriesLineOption = {
label: {
show: false
}
- }
+ },
+ hideDelay: 0
},
dataZoom: [
{
disabled: true,
type: 'inside',
- zoomOnMouseWheel: 'ctrl'
+ zoomOnMouseWheel: 'shift'
}
],
color: initColor(),
@@ -91,6 +92,9 @@ export const chartTimeSeriesLineOption = {
},
axisTick: {
show: false
+ },
+ axisPointer: {
+ snap: true
}
},
yAxis: [
@@ -149,16 +153,24 @@ export const chartTimeSeriesLineOption = {
type: 'line',
symbol: 'emptyCircle', // 去掉点
connectNulls: true,
- symbolSize: [2, 2],
+ symbolSize: 8,
smooth: 0.2, // 曲线变平滑
showSymbol: false,
data: [],
lineStyle: {
- width: 1,
+ width: 2,
opacity: 0.9
},
emphasis: {
- focus: 'series'
+ focus: 'none'
+ },
+ blur: {
+ lineStyle: {
+ opacity: 0.3
+ },
+ itemStyle: {
+ opacity: 1
+ }
}
}],
useUTC: false // 使用本地时间
@@ -178,7 +190,7 @@ export const chartTimeSeriesScatterOption = {
data: [],
z: 9,
emphasis: {
- focus: 'series'
+ focus: 'none'
}
}]
}
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
index 10842331a..fa3d72742 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
@@ -21,7 +21,8 @@ const chartTreemapOption = {
formatUtil.encodeHTML(treePath.join('/')) +
'
'
].join('')
- }
+ },
+ hideDelay: 0
},
series: [
{
diff --git a/nezha-fronted/src/components/chart/chartDataFormat.js b/nezha-fronted/src/components/chart/chartDataFormat.js
index 0cc051f7b..4bcd81b17 100644
--- a/nezha-fronted/src/components/chart/chartDataFormat.js
+++ b/nezha-fronted/src/components/chart/chartDataFormat.js
@@ -5,15 +5,18 @@
* */
import bus from '../../libs/bus'
import { formatScientificNotation } from '@/components/common/js/tools'
-function none (value, index) {
- const scientificNotationValue = formatScientificNotation(value, 2)
+function none (value, index, type = 1, dot = 2) {
+ const scientificNotationValue = formatScientificNotation(value, dot)
if (!numberWithEConvent(scientificNotationValue)) {
return scientificNotationValue
}
if (isNaN(value) || value === null) {
return value
}
- return keepDoubleNumber(value)
+ if (scientificNotationValue == 0) {
+ return 0
+ }
+ return scientificNotationValue
}
function short (value, index, type = 1, dot) {
if (type == 1) {
@@ -24,24 +27,24 @@ function short (value, index, type = 1, dot) {
return asciiCompute(value, 1000, [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion'], 2)
}
}
-function percent01 (value, index) {
- const scientificNotationValue = formatScientificNotation(value, 2)
+function percent01 (value, index, type = 1, dot = 2) {
+ const scientificNotationValue = formatScientificNotation(value, dot)
if (!numberWithEConvent(scientificNotationValue)) {
return `${scientificNotationValue} %`
}
value = parseFloat((Number(value)).toFixed(2))
return `${value} %`
}
-function percent02 (value, index) {
- const scientificNotationValue = formatScientificNotation(value, 2)
+function percent02 (value, index, type = 1, dot = 2) {
+ const scientificNotationValue = formatScientificNotation(value, dot)
if (!numberWithEConvent(scientificNotationValue)) {
return `${scientificNotationValue} %`
}
- value = parseFloat((Number(value) * 100).toFixed(2))
+ value = parseFloat((Number(value) * 100).toFixed(dot))
return `${value} %`
}
-function localFormat (value, index) {
- const scientificNotationValue = formatScientificNotation(value, 2)
+function localFormat (value, index, type = 1, dot = 2) {
+ const scientificNotationValue = formatScientificNotation(value, dot)
if (!numberWithEConvent(scientificNotationValue)) {
return `${scientificNotationValue} %`
}
diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
index 41ad9b13f..28b9442e5 100644
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -41,8 +41,10 @@
-