From f8f451334ff42251e3f40a22f6348313a7f0fa89 Mon Sep 17 00:00:00 2001 From: zyh Date: Wed, 31 May 2023 17:20:02 +0800 Subject: [PATCH] =?UTF-8?q?NEZ-2835=20feat=EF=BC=9AData=20link=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/css/common.scss | 2 +- .../src/assets/css/common/tableCommon.scss | 2 +- .../assets/css/components/chart/chart.scss | 79 ++-- nezha-fronted/src/components/chart/chart.vue | 2 +- .../src/components/chart/chart/chartBar.vue | 119 +++++- .../components/chart/chart/chartBubble.vue | 82 ++-- .../src/components/chart/chart/chartClock.vue | 2 +- .../components/chart/chart/chartDoughnut.vue | 89 ++-- .../components/chart/chart/chartFunnel.vue | 320 ++++++++++---- .../components/chart/chart/chartFunnelNew.vue | 389 ------------------ .../src/components/chart/chart/chartGauge.vue | 126 +++++- .../components/chart/chart/chartHexagonD3.vue | 80 +++- .../src/components/chart/chart/chartPie.vue | 2 +- .../src/components/chart/chart/chartRank.vue | 81 ++-- .../src/components/chart/chart/chartRose.vue | 82 ++-- .../components/chart/chart/chartSankey.vue | 113 +++-- .../src/components/chart/chart/chartStat.vue | 85 ++-- .../src/components/chart/chart/chartTable.vue | 85 +++- .../chart/chart/chartTimeSeries.vue | 99 ++++- .../components/chart/chart/chartTreemap.vue | 123 +++++- .../chart/chart/options/chartTreemap.js | 2 +- .../src/components/chart/chartHeaderMixin.js | 2 +- .../src/components/chart/chartList.vue | 12 +- .../src/components/chart/chartMixin.js | 78 ++-- .../common/mixin/globalVariables.js | 2 +- .../common/rightBox/chart/chartConfig.vue | 158 +++---- .../common/rightBox/chart/chartRightBox.vue | 10 +- .../rightBox/chart/otherChartConfig.vue | 113 +---- 28 files changed, 1329 insertions(+), 1010 deletions(-) delete mode 100644 nezha-fronted/src/components/chart/chart/chartFunnelNew.vue diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index b714a36d4..8a0e3c8d1 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -704,7 +704,7 @@ textarea { } .message-zindex{ - z-index: 5000 !important; + z-index: 9999999999 !important; } .text-ellipsis{ diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss index 99a8337a5..b310e557b 100644 --- a/nezha-fronted/src/assets/css/common/tableCommon.scss +++ b/nezha-fronted/src/assets/css/common/tableCommon.scss @@ -12,7 +12,7 @@ flex-direction: column; height: 100%; width: 100%; - z-index: 0; + // z-index: 0; } .main-container { padding: 0px; diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index e82b5aca5..f5df5576d 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -221,6 +221,7 @@ .panel-chart.panel-chart--fullscreen { border: none; .nz-chart__component { + position: relative; &.nz-chart__component--bottom { .legend-container { max-height: 135px; @@ -462,12 +463,11 @@ justify-content: space-between; align-items: center; min-width: 150px; - max-width: 600px; + max-width: 500px; line-height: 18px; font-size: 12px; .row__label { - max-width: 500px; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; @@ -623,8 +623,6 @@ } .chart-canvas-tooltip{ position: fixed; - min-width: 150px; - max-width: 600px; display: block; border-style: solid; white-space: nowrap; @@ -633,13 +631,14 @@ transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; border-width: 1px; border-radius: 4px; - font: 14 px/ 21px "Microsoft YaHei"; + font: 14px / 21px "Microsoft YaHei"; padding: 10px; z-index: 99999999; pointer-events: none; overflow: hidden; } .chart-canvas-tooltip-title{ + min-width: 150px; max-width: 500px; white-space: nowrap; overflow: hidden; @@ -648,65 +647,40 @@ font-size: 14px; } .chart-canvas-tooltip-content{ - font-size: 12px; + max-width: 500px; display: flex; justify-content: space-between; align-items: center; + font-size: 12px; + overflow: hidden; } .chart-dataLink-tooltip{ - position: fixed; - min-width: 150px; - max-width: 600px; - display: block; - white-space: nowrap; - will-change: transform; - transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; - border-radius: 4px; - font: 14 px/ 21px "Microsoft YaHei"; - padding-top: 10px; - z-index: 9999999999; - overflow: hidden; - background-color: $--tooltip-background-color !important; - border: 2px solid $--tooltip-border-color !important; - border-color: $--tooltip-border-color !important; - color: $--color-text-regular !important; - box-shadow: none !important; - .chart-dataLink-title{ - margin-bottom: 5px; - padding: 0 10px; - box-sizing: border-box; - max-width: 500px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 14px; - color: $--color-text-primary !important; - font-weight: 600; - } - .chart-dataLink-content{ - padding: 0 10px; - box-sizing: border-box; - font-size: 12px; - display: flex; - justify-content: space-between; - align-items: center; - } + padding-bottom: 2px; + z-index: 999999999; + pointer-events: auto; .chart-dataLink-list{ + width: calc(100% + 20px); + margin-left: -10px; margin-top: 10px; border-top: 1px solid $--border-color-light; .chart-dataLink-item{ + min-width: 120px; + max-width: 500px; padding: 0 10px; height: 32px; line-height: 32px; font-size: 14px; cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; &:hover{ background: $--background-color-base; color: $--color-primary !important; } .nz-icon{ - margin-right: 2px; + margin-right: 4px; } } } @@ -808,3 +782,20 @@ text-overflow: ellipsis; overflow: hidden; } + +.chart-cursor-default{ + cursor: default !important; + *{ + cursor: default !important; + } +} + +.chart-cursor-pointer{ + cursor: pointer; +} + +.tabel-chart{ + .chart-canvas-tooltip{ + height: auto !important; + } +} \ No newline at end of file diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue index 26c75e0c2..20a22f901 100644 --- a/nezha-fronted/src/components/chart/chart.vue +++ b/nezha-fronted/src/components/chart/chart.vue @@ -286,7 +286,7 @@ import chartTopology from './chart/chartTopology' import chartBubble from './chart/chartBubble' import chartRank from './chart/chartRank' import chartSankey from './chart/chartSankey' -import chartFunnel from './chart/chartFunnelNew' +import chartFunnel from './chart/chartFunnel' import { getOption, isTimeSeries, isHexagon, isUrl, isText, isChartPie, isDoughnut, isRose, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup, isAutotopology, isMap, isAssetInfo, isEndpointInfo, isTable, isGauge, isClock, isTopology, isChartBubble, isChartRank, isSankey, isFunnel } from './chart/tools' import lodash from 'lodash' diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index 626b4ec46..a1d5db1ce 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/nezha-fronted/src/components/chart/chart/chartBar.vue @@ -5,7 +5,7 @@ class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart" > -
+
+ +
+
{{tooltip.title}}
+
+
value
+
+
+ +
+
{{tooltip.value}}
+
+
+ +
+
+ + {{item.title}} +
+
+
@@ -28,7 +48,6 @@ import { formatScientificNotation, getMetricTypeValue } from '@/components/commo import chartDataFormat from '@/components/chart/chartDataFormat' import { initColor } from '@/components/chart/chart/tools' import lodash from 'lodash' -import bus from '@/libs/bus' export default { name: 'chart-bar', @@ -45,7 +64,7 @@ export default { computed: { hasLegend () { try { - return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 + return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 && this.chartInfo.param.enable.legend } catch (e) { return false } @@ -75,11 +94,21 @@ export default { active: '#53a3cb', inactive: '#7e7e7e' }, - chartId: '' + chartId: '', + tooltip: { + x: 0, + y: 0, + title: 0, + value: 0, + mapping: {}, + show: false, + dataLinkShow: '' + } } }, methods: { initChart (chartOption = this.chartOption) { + this.setDataLink() const self = this this.legends = [] this.series = chartOption.series = this.initBarData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends @@ -132,6 +161,15 @@ export default { } myChart.setOption(chartOption) this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 + if (this.isInit && this.dataLink.length) { + myChart.on('click', this.chartClick) + myChart.on('mousedown', (params) => { + if (this.tooltip.show) { + const e = params.event.event + e.stopPropagation() + } + }) + } this.isInit = false }, 200) }, @@ -183,22 +221,69 @@ export default { formatterFunc (params, ticket, callback) { const self = this return ` +
${params.data.alias}
+
+
value
-
-
${params.data.alias}
-
-
value
-
-
- -
-
${params.data.showValue}
-
${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}
-
-
-
+
+ +
+
${params.data.showValue}
+
${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}
+
` + }, + setPosition (e) { + const windowWidth = window.innerWidth// 窗口宽度 + const windowHeight = window.innerHeight// 窗口高度 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } + } else { + this.tooltip.y = e.pageY + 15 + this.tooltip.x = e.pageX + 15 + } + }) + }, + chartClick (params) { + 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 + const e = params.event.event + this.setPosition(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) + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/chartBubble.vue b/nezha-fronted/src/components/chart/chart/chartBubble.vue index 89e3edc27..654b3be08 100644 --- a/nezha-fronted/src/components/chart/chart/chartBubble.vue +++ b/nezha-fronted/src/components/chart/chart/chartBubble.vue @@ -3,10 +3,10 @@ ref="bubble-chart-box" class="nz-chart__component" > -
+
-
+
{{tooltip.title}}
@@ -19,6 +19,13 @@
{{tooltip.value}}
+ +
+
+ + {{item.title}} +
+
@@ -57,13 +64,15 @@ export default { title: 0, value: 0, mapping: {}, - show: false + show: false, + dataLinkShow: '' }, svg: null } }, methods: { initChart () { + this.setDataLink() this.legends = [] this.initBubbleData(this.chartInfo, this.chartData) if (this.isNoData) { @@ -180,12 +189,14 @@ export default { return fontSize }) .style('border-radius', '50%') + .style('cursor', 'pointer') .html((d) => { return this.bubbleFormatterLabel(d) }) bubbles.on('mouseenter', this.bubbleEnter) bubbles.on('mousemove', this.bubbleMove) bubbles.on('mouseleave', this.bubbleLeave) + bubbles.on('click', this.chartClick) }, // 处理label bubbleFormatterLabel (node) { @@ -206,7 +217,7 @@ export default { } if (str && valueStr) { return ` -
+

${str}

@@ -218,7 +229,7 @@ export default { ` } else if (str) { return ` -
+

${str} @@ -227,7 +238,7 @@ export default { ` } else if (valueStr) { return ` -

+

${valueStr} @@ -237,41 +248,45 @@ export default { } }, bubbleEnter (e, node) { // 移入气泡 + if (this.tooltip.dataLinkShow) { return } this.tooltip.title = node.data.alias - this.tooltip.value = node.data.showValue + this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue this.tooltip.mapping = node.data.mapping this.tooltip.show = true this.setPosition(e) }, bubbleMove (e) { // 气泡内移动 - if (this.tooltip.show) { - this.setPosition(e) - } + if (this.tooltip.dataLinkShow) { return } + this.tooltip.show = true + this.setPosition(e) }, bubbleLeave () { // 移出气泡 + if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) - if (box) { - const boxWidth = box.offsetWidth - const boxHeight = box.offsetHeight - if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = e.pageX + 15 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } } else { - this.tooltip.x = e.pageX - boxWidth - 15 - } - if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 this.tooltip.y = e.pageY + 15 - } else { - this.tooltip.y = e.pageY - boxHeight - 10 + this.tooltip.x = e.pageX + 15 } - } else { - this.tooltip.y = e.pageY + 15 - this.tooltip.x = e.pageX + 15 - } + }) }, resize () { setTimeout(() => { @@ -283,9 +298,26 @@ export default { this.svg.selectAll('.bubble').on('mouseenter', null) this.svg.selectAll('.bubble').on('mousemove', null) this.svg.selectAll('.bubble').on('mouseleave', null) + this.svg.selectAll('.bubble').on('click', null) this.svg.selectAll('g').remove() this.svg = null } + }, + chartClick (e, data) { + if (this.dataLink.length) { + this.tooltip.title = data.data.alias + this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue + this.tooltip.mapping = data.data.mapping + this.tooltip.show = true + this.tooltip.dataLinkShow = true + this.setPosition(e) + } + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/chartClock.vue b/nezha-fronted/src/components/chart/chart/chartClock.vue index c2c80c7ab..a539cfe5b 100644 --- a/nezha-fronted/src/components/chart/chart/chartClock.vue +++ b/nezha-fronted/src/components/chart/chart/chartClock.vue @@ -40,7 +40,7 @@ export default { computed: { hasLegend () { try { - return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 + return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 && this.chartInfo.param.enable.legend } catch (e) { return false } diff --git a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue index fa154c030..c6d0beca3 100644 --- a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue +++ b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue @@ -4,7 +4,8 @@ ref="doughnut-chart-box" class="nz-chart__component" > -

+
+ -
+ +
{{tooltip.title}}
@@ -30,6 +32,13 @@
percent
{{tooltip.percent}}%
+ +
+
+ + {{item.title}} +
+
@@ -59,7 +68,7 @@ export default { computed: { hasLegend () { try { - return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 + return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 && this.chartInfo.param.enable.legend } catch (e) { return false } @@ -91,15 +100,16 @@ export default { y: 0, title: 0, value: 0, - percent: 0, mapping: {}, - show: false + show: false, + dataLinkShow: '' }, svg: null } }, methods: { initChart (animate) { + this.setDataLink() this.legends = [] this.initDoughnutData(this.chartInfo, this.chartData) this.selectData = this.$loadsh.cloneDeep(this.doughnutData) @@ -223,6 +233,7 @@ export default { .on('mouseenter', this.doughnutEnter) .on('mousemove', this.doughnutMove) .on('mouseleave', this.doughnutLeave) + .on('click', this.chartClick) .transition().duration(animate === true ? 600 : 0) .attrTween('d', function (d) { const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d) @@ -247,6 +258,7 @@ export default { .on('mouseenter', this.doughnutEnter) .on('mousemove', this.doughnutMove) .on('mouseleave', this.doughnutLeave) + .on('click', this.chartClick) .style('opacity', 0) .html((d) => { return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : '' @@ -305,44 +317,47 @@ export default { ` } }, - doughnutEnter (e, node) { // 移入气泡 + doughnutEnter (e, node) { + if (this.tooltip.dataLinkShow) { return } this.tooltip.title = node.data.alias - this.tooltip.value = node.data.showValue + this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue this.tooltip.percent = node.percent this.tooltip.mapping = node.data.mapping this.tooltip.show = true this.setPosition(e) }, - doughnutMove (e) { // 气泡内移动 - if (this.tooltip.show) { - this.tooltip.show = true - this.setPosition(e) - } + doughnutMove (e) { + if (this.tooltip.dataLinkShow) { return } + this.tooltip.show = true + this.setPosition(e) }, - doughnutLeave () { // 移出气泡 + doughnutLeave () { + if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) - if (box) { - const boxWidth = box.offsetWidth - const boxHeight = box.offsetHeight - if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = e.pageX + 15 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } } else { - this.tooltip.x = e.pageX - boxWidth - 15 - } - if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 this.tooltip.y = e.pageY + 15 - } else { - this.tooltip.y = e.pageY - boxHeight - 10 + this.tooltip.x = e.pageX + 15 } - } else { - this.tooltip.y = e.pageY + 15 - this.tooltip.x = e.pageX + 15 - } + }) }, clickLegendD3 (isGrey) { const data = this.doughnutData.filter((item, i) => !isGrey[i]) @@ -361,14 +376,32 @@ export default { this.svg.selectAll('path').on('mouseenter', null) this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mouseleave', null) + this.svg.selectAll('path').on('click', null) this.svg.selectAll('foreignObject').on('mouseover', null) this.svg.selectAll('foreignObject').on('mouseout', null) this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mouseleave', null) + this.svg.selectAll('foreignObject').on('click', null) this.svg.remove() this.svg = null } + }, + chartClick (e, data) { + if (this.dataLink.length) { + this.tooltip.title = data.data.alias + this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue + this.tooltip.mapping = data.data.mapping + this.tooltip.show = true + this.tooltip.dataLinkShow = true + this.setPosition(e) + } + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/chartFunnel.vue b/nezha-fronted/src/components/chart/chart/chartFunnel.vue index e69c39144..f68b05a08 100644 --- a/nezha-fronted/src/components/chart/chart/chartFunnel.vue +++ b/nezha-fronted/src/components/chart/chart/chartFunnel.vue @@ -3,8 +3,11 @@ ref="funnel-chart-box" class="nz-chart__component" > -
-
+
+ +
+ +
{{tooltip.title}}
@@ -17,18 +20,24 @@
{{tooltip.value}}
+ +
+
+ + {{item.title}} +
+
diff --git a/nezha-fronted/src/components/chart/chart/chartFunnelNew.vue b/nezha-fronted/src/components/chart/chart/chartFunnelNew.vue deleted file mode 100644 index 591fabd0a..000000000 --- a/nezha-fronted/src/components/chart/chart/chartFunnelNew.vue +++ /dev/null @@ -1,389 +0,0 @@ - - - diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index b83b0b84a..11a0ec79b 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -8,6 +8,7 @@
+
+
{{tooltip.title}}
+
+
value
+
+
+ +
+
{{tooltip.value}}
+
+
+ +
+
+ + {{item.title}} +
+
+
@@ -39,11 +59,21 @@ export default { boxHeight: 0, boxPadding: 5, chartInstances: [], - timer: null + timer: null, + tooltip: { + x: 0, + y: 0, + title: 0, + value: 0, + mapping: {}, + show: false, + dataLinkShow: '' + } } }, methods: { initChart () { + this.setDataLink() if (this.timer) { clearTimeout(this.timer) this.timer = null @@ -157,6 +187,8 @@ export default { gaugeChartInit () { this.chartInstances.forEach(item => { if (item) { + item.off('click') + item.off('mousedown') item.dispose() } }) @@ -200,6 +232,7 @@ export default { } } option.tooltip.formatter = this.formatterFunc + option.tooltip.position = this.tooltipPosition if (navigator.userAgent.match(/Mobi/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i)) { @@ -210,6 +243,15 @@ export default { // option.tooltip.position = this.formatterFunc option.series[0].min = item.max == item.min ? 0 : item.min myChart.setOption(option) + if (this.dataLink.length) { + myChart.on('click', this.chartClick) + myChart.on('mousedown', (params) => { + if (this.tooltip.show) { + const e = params.event.event + e.stopPropagation() + } + }) + } this.chartInstances.push(myChart) }) }, @@ -231,22 +273,74 @@ export default { }, formatterFunc: function (params, ticket, callback) { const self = this - return `
-
-
${params.data.alias}
-
-
value
-
-
- -
-
${params.data.showValue}
-
${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}
-
-
-
+ return ` +
${params.data.alias}
+
+
value
+
+
+ +
+
${params.data.showValue}
+
${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}
+
` + }, + setPosition (e) { + const windowWidth = window.innerWidth// 窗口宽度 + const windowHeight = window.innerHeight// 窗口高度 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } + } else { + this.tooltip.y = e.pageY + 15 + this.tooltip.x = e.pageX + 15 + } + }) + }, + chartClick (params) { + const option = { + tooltip: { + extraCssText: 'z-index:99999999;visibility:hidden;transition:none;' + } + } + this.chartInstances.forEach(item => { + item.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 + const e = params.event.event + this.setPosition(e) + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + const option = { + tooltip: { + extraCssText: 'z-index:99999999;visibility:visible;' + } + } + this.chartInstances.forEach(item => { + item.setOption(option) + }) + } } }, mounted () { @@ -257,6 +351,8 @@ export default { beforeDestroy () { this.chartInstances.forEach(item => { if (item && item.dispose) { + item.off('click') + item.off('mousedown') item.dispose() } }) diff --git a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue index 9bf075285..a24b4c0eb 100644 --- a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue +++ b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue @@ -1,7 +1,7 @@ @@ -43,7 +50,8 @@ export default { title: 0, value: 0, mapping: {}, - show: false + show: false, + dataLinkShow: '' }, svg: null, spaceBetweenHexa: 3, @@ -53,6 +61,7 @@ export default { methods: { hexbin, initChart () { + this.setDataLink() if (this.timer) { clearTimeout(this.timer) this.timer = null @@ -181,47 +190,52 @@ export default { hexa.attr('fill', color) // Paints hexagon g.on('mouseenter', self.hexagonOver.bind(self, point)) g.on('mouseleave', self.hexagonOut.bind(self, point)) + g.on('click', self.chartClick.bind(self, point)) self.drawText(this.svg, vals, point, color, hexaRadius, g) // 文本 data[i].fcolor = color } return this.svg.node() }, hexagonOver (that, e) { // 移入六边形 + if (this.tooltip.dataLinkShow) { return } this.tooltip.title = that.alias - this.tooltip.value = that.showValue + this.tooltip.value = that.mapping && that.mapping.display ? this.handleDisplay(that.mapping.display, { ...that.metrics, legend: that.alias, value: that.showValue }) : that.showValue this.tooltip.mapping = that.mapping this.tooltip.show = true this.setPosition(e) }, hexagonMove (e) { // 六边形内移动 - if (this.tooltip.show) { - this.setPosition(e) - } + if (this.tooltip.dataLinkShow) { return } + this.tooltip.show = true + this.setPosition(e) }, - hexagonOut (that) { + hexagonOut () { + if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) - if (box) { - const boxWidth = box.offsetWidth - const boxHeight = box.offsetHeight - if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = e.pageX + 15 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } } else { - this.tooltip.x = e.pageX - boxWidth - 15 - } - if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 this.tooltip.y = e.pageY + 15 - } else { - this.tooltip.y = e.pageY - boxHeight - 10 + this.tooltip.x = e.pageX + 15 } - } else { - this.tooltip.y = e.pageY + 15 - this.tooltip.x = e.pageX + 15 - } + }) }, formatStr (d) { const self = this @@ -238,6 +252,7 @@ export default { .attr('stroke-linejoin', 'round') .attr('stroke-width', 1) .attr('transform', 'translate(' + x + ',' + y + ')') + .style('cursor', this.dataLink.length ? 'pointer' : 'default') return hexagon }, drawText (svg, vals, point, color, hexbinRadius, group) { @@ -273,6 +288,7 @@ export default { .attr('alignment-baseline', 'central') .style('font-size', fontSize) .style('fill', textColor) + .style('pointer-events', 'none') const scrollDiv = fObj.append('xhtml:div') scrollDiv .html(`
${str}
`) @@ -295,6 +311,7 @@ export default { .attr('alignment-baseline', 'central') .style('font-size', fontSize) .style('fill', textColor) + .style('pointer-events', 'none') const scrollDiv2 = fObj2.append('xhtml:div') scrollDiv2 .html( @@ -315,6 +332,7 @@ export default { .attr('alignment-baseline', 'central') .style('font-size', fontSize) .style('fill', textColor) + .style('pointer-events', 'none') const scrollDiv = fObj.append('xhtml:div') scrollDiv .html( @@ -342,6 +360,7 @@ export default { .attr('alignment-baseline', 'central') .style('font-size', fontSize) .style('fill', textColor) + .style('pointer-events', 'none') const scrollDiv = fObj.append('xhtml:div') scrollDiv .html( @@ -415,6 +434,7 @@ export default { this.svg.on('mousemove', null) this.svg.selectAll('g').on('mouseenter', null) this.svg.selectAll('g').on('mouseleave', null) + this.svg.selectAll('g').on('click', null) this.svg.remove() this.svg = null } @@ -431,6 +451,22 @@ export default { }) }, 50) + }, + chartClick (data, e) { + if (this.dataLink.length) { + this.tooltip.title = data.alias + this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue + this.tooltip.mapping = data.mapping + this.tooltip.show = true + this.tooltip.dataLinkShow = true + this.setPosition(e) + } + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/chartPie.vue b/nezha-fronted/src/components/chart/chart/chartPie.vue index b937d6876..634490fd5 100644 --- a/nezha-fronted/src/components/chart/chart/chartPie.vue +++ b/nezha-fronted/src/components/chart/chart/chartPie.vue @@ -43,7 +43,7 @@ export default { computed: { hasLegend () { try { - return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 + return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 && this.chartInfo.param.enable.legend } catch (e) { return false } diff --git a/nezha-fronted/src/components/chart/chart/chartRank.vue b/nezha-fronted/src/components/chart/chart/chartRank.vue index dd8c832c5..3ae7b2553 100644 --- a/nezha-fronted/src/components/chart/chart/chartRank.vue +++ b/nezha-fronted/src/components/chart/chart/chartRank.vue @@ -3,10 +3,11 @@ ref="rank-chart-box" class="nz-chart__component" > -
+
-
+ +
{{tooltip.title}}
@@ -19,11 +20,17 @@
{{tooltip.value}}
-
rank
{{tooltip.rank+1}}
+ +
+
+ + {{item.title}} +
+
@@ -63,13 +70,15 @@ export default { value: 0, mapping: {}, rank: 0, - show: false + show: false, + dataLinkShow: '' }, svg: null } }, methods: { initChart () { + this.setDataLink() this.legends = [] this.initRankData(this.chartInfo, this.chartData) this.isNoData = !this.rankData.length @@ -171,6 +180,7 @@ export default { .on('mouseenter', this.rankEnter) .on('mousemove', this.rankMove) .on('mouseleave', this.rankLeave) + .on('click', this.chartClick) bars.exit().remove() // 文本标签 @@ -183,6 +193,7 @@ export default { .on('mouseenter', this.rankEnter) .on('mousemove', this.rankMove) .on('mouseleave', this.rankLeave) + .on('click', this.chartClick) .html((d) => { return this.rankFormatterLabel(d) }) @@ -243,44 +254,47 @@ export default { ` } }, - rankEnter (e, data) { // 移入 + if (this.tooltip.dataLinkShow) { return } this.tooltip.title = data.alias - this.tooltip.value = data.showValue + this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue this.tooltip.mapping = data.mapping this.tooltip.rank = data.rank this.tooltip.show = true this.setPosition(e) }, rankMove (e) { // 移动 - if (this.tooltip.show) { - this.setPosition(e) - } + if (this.tooltip.dataLinkShow) { return } + this.tooltip.show = true + this.setPosition(e) }, rankLeave () { // 移出 + if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) - if (box) { - const boxWidth = box.offsetWidth - const boxHeight = box.offsetHeight - if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = e.pageX + 15 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } } else { - this.tooltip.x = e.pageX - boxWidth - 15 - } - if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 this.tooltip.y = e.pageY + 15 - } else { - this.tooltip.y = e.pageY - boxHeight - 10 + this.tooltip.x = e.pageX + 15 } - } else { - this.tooltip.y = e.pageY + 15 - this.tooltip.x = e.pageX + 15 - } + }) }, resize () { setTimeout(() => { @@ -292,14 +306,31 @@ export default { this.svg.selectAll('rect').on('mouseenter', null) this.svg.selectAll('rect').on('mousemove', null) this.svg.selectAll('rect').on('mouseleave', null) + this.svg.selectAll('rect').on('click', null) this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mouseleave', null) + this.svg.selectAll('foreignObject').on('click', null) this.svg.selectAll('g').remove() this.svg = null } + }, + chartClick (e, data) { + if (this.dataLink.length) { + this.tooltip.title = data.alias + this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue + this.tooltip.mapping = data.mapping + this.tooltip.show = true + this.tooltip.dataLinkShow = true + this.setPosition(e) + } + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + } } - }, mounted () { this.colorList = initColor(20) diff --git a/nezha-fronted/src/components/chart/chart/chartRose.vue b/nezha-fronted/src/components/chart/chart/chartRose.vue index 3da00da97..0c040679c 100644 --- a/nezha-fronted/src/components/chart/chart/chartRose.vue +++ b/nezha-fronted/src/components/chart/chart/chartRose.vue @@ -4,7 +4,8 @@ ref="rose-chart-box" class="nz-chart__component" > -
+
+ -
+ +
{{tooltip.title}}
@@ -30,6 +32,13 @@
percent
{{tooltip.percent}}%
+ +
+
+ + {{item.title}} +
+
@@ -59,7 +68,7 @@ export default { computed: { hasLegend () { try { - return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 + return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 && this.chartInfo.param.enable.legend } catch (e) { return false } @@ -93,13 +102,15 @@ export default { value: 0, percent: 0, mapping: {}, - show: false + show: false, + dataLinkShow: false }, svg: null } }, methods: { initChart (animate) { + this.setDataLink() this.legends = [] this.initRoseData(this.chartInfo, this.chartData) this.selectData = this.$loadsh.cloneDeep(this.roseData) @@ -238,6 +249,7 @@ export default { .on('mouseenter', this.roseEnter) .on('mousemove', this.roseMove) .on('mouseleave', this.roseLeave) + .on('click', this.chartClick) .transition().duration(animate === true ? 600 : 0) .attrTween('d', function (d) { const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d) @@ -262,6 +274,7 @@ export default { .on('mouseenter', this.roseEnter) .on('mousemove', this.roseMove) .on('mouseleave', this.roseLeave) + .on('click', this.chartClick) .style('opacity', 0) .html((d) => { return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : '' @@ -321,43 +334,46 @@ export default { } }, roseEnter (e, node) { // 移入气泡 + if (this.tooltip.dataLinkShow) { return } this.tooltip.title = node.data.alias - this.tooltip.value = node.data.showValue + this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue this.tooltip.percent = node.percent this.tooltip.mapping = node.data.mapping this.tooltip.show = true this.setPosition(e) }, roseMove (e) { // 气泡内移动 - if (this.tooltip.show) { - this.tooltip.show = true - this.setPosition(e) - } + if (this.tooltip.dataLinkShow) { return } + this.tooltip.show = true + this.setPosition(e) }, roseLeave () { // 移出气泡 + if (this.tooltip.dataLinkShow) { return } this.tooltip.show = false }, setPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) - if (box) { - const boxWidth = box.offsetWidth - const boxHeight = box.offsetHeight - if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = e.pageX + 15 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } } else { - this.tooltip.x = e.pageX - boxWidth - 15 - } - if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 this.tooltip.y = e.pageY + 15 - } else { - this.tooltip.y = e.pageY - boxHeight - 10 + this.tooltip.x = e.pageX + 15 } - } else { - this.tooltip.y = e.pageY + 15 - this.tooltip.x = e.pageX + 15 - } + }) }, clickLegendD3 (isGrey) { const data = this.roseData.filter((item, i) => !isGrey[i]) @@ -376,14 +392,32 @@ export default { this.svg.selectAll('path').on('mouseenter', null) this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mouseleave', null) + this.svg.selectAll('path').on('click', null) this.svg.selectAll('foreignObject').on('mouseover', null) this.svg.selectAll('foreignObject').on('mouseout', null) this.svg.selectAll('foreignObject').on('mouseenter', null) this.svg.selectAll('foreignObject').on('mousemove', null) this.svg.selectAll('foreignObject').on('mouseleave', null) + this.svg.selectAll('foreignObject').on('click', null) this.svg.remove() this.svg = null } + }, + chartClick (e, data) { + if (this.dataLink.length) { + this.tooltip.title = data.data.alias + this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue + this.tooltip.mapping = data.data.mapping + this.tooltip.show = true + this.tooltip.dataLinkShow = true + this.setPosition(e) + } + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/chartSankey.vue b/nezha-fronted/src/components/chart/chart/chartSankey.vue index dd25a5391..68eb647fa 100644 --- a/nezha-fronted/src/components/chart/chart/chartSankey.vue +++ b/nezha-fronted/src/components/chart/chart/chartSankey.vue @@ -5,10 +5,11 @@ @mouseleave="mouseLeaveChart" index="300" > -
+
-
+ +
{{tooltip.title}}
@@ -21,6 +22,13 @@
{{tooltip.value}}
+ +
+
+ + {{item.title}} +
+
@@ -58,13 +66,15 @@ export default { title: 0, value: 0, mapping: {}, - show: false + show: false, + dataLinkShow: '' }, svg: null } }, methods: { initChart () { + this.setDataLink() this.linksData = this.initsankeyData(this.chartInfo, this.chartData) // 生成links this.isNoData = !this.linksData.length this.$emit('chartIsNoData', this.isNoData) @@ -73,8 +83,8 @@ export default { } // 根据link获取node this.linksData.forEach(item => { - this.nodesData.push({ node: item.source }) - this.nodesData.push({ node: item.target }) + this.nodesData.push({ node: item.source, labels: item.labels }) + this.nodesData.push({ node: item.target, labels: item.labels }) }) // 去重相同的node for (let i = 0; i < this.nodesData.length; i++) { @@ -98,13 +108,12 @@ export default { const decimals = this.chartInfo.param.decimals || 2 this.isNoData = true originalDatas.forEach((originalData) => { - originalData.forEach((data, dataIndex) => { + originalData.forEach((data) => { const value = getMetricTypeValue(data.values, chartInfo.param.statistics) const obj = { value: value, realValue: value, - labels: data.metric, - dataIndex: dataIndex + labels: data.metric } if (data.metric[chartInfo.param.sourceLabel] && data.metric[chartInfo.param.targetLabel]) { obj.source = data.metric[chartInfo.param.sourceLabel] @@ -163,7 +172,7 @@ export default { let allZero = false if (linksData.every(item => item.value == 0)) { linksData.forEach(item => { - item.value = 100 // 目的是显示图表 与值大小无关 + item.value = 100 }) allZero = true } @@ -255,13 +264,14 @@ export default { // 划过连线 chart.selectAll('path') - .on('mouseover', (e, d) => { + .on('mouseenter', (e, d) => { chart.selectAll('.node, path').style('fill-opacity', '0.1').style('stroke-opacity', '0.1') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '0.1') const hoverNodes = d3.select(e.target).style('stroke-opacity', '0.8').attr('linkNodes').split(' ') hoverNodes.forEach((index) => { chart.selectAll('[index=' + index + ']').style('fill-opacity', '1').selectAll('foreignObject').style('opacity', '1') }) + if (this.tooltip.dataLinkShow) { return } // 显示悬浮框 this.tooltip.title = d.source.node + ' ——> ' + d.target.node this.tooltip.value = d.showValue @@ -270,20 +280,22 @@ export default { this.setPosition(e) }) .on('mousemove', (e) => { - if (this.tooltip.show) { - this.setPosition(e) - } + if (this.tooltip.dataLinkShow) { return } + this.tooltip.show = true + this.setPosition(e) }) .on('mouseleave', () => { chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1') + if (this.tooltip.dataLinkShow) { return } // 隐藏悬浮框 this.tooltip.show = false }) + .on('click', this.chartClick) // 划过节点 chart.selectAll('.node') - .on('mouseover', (e, d) => { + .on('mouseenter', (e, d) => { chart.selectAll('.node, path').style('fill-opacity', '0.1').style('stroke-opacity', '0.1') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '0.1') chart.selectAll('[linkNodes~=' + 'i-' + d.index + ']') @@ -291,59 +303,62 @@ export default { .style('stroke-opacity', '0.8') .selectAll('foreignObject') .style('opacity', '1') - // 显示悬浮框 + if (this.tooltip.dataLinkShow) { return } + // 显示悬浮框 this.tooltip.title = d.node - this.tooltip.value = d.showValue + this.tooltip.value = d.mapping && d.mapping.display ? this.handleDisplay(d.mapping.display, { ...d.labels, value: d.showValue }) : d.showValue this.tooltip.mapping = d.mapping this.tooltip.show = true this.setPosition(e) }) .on('mousemove', (e) => { - if (this.tooltip.show) { - this.setPosition(e) - } + if (this.tooltip.dataLinkShow) { return } + this.tooltip.show = true + this.setPosition(e) }) .on('mouseleave', () => { chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5') chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1') + if (this.tooltip.dataLinkShow) { return } // 隐藏悬浮框 this.tooltip.show = false }) + .on('click', this.chartClick) }, - setPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) - if (box) { - const boxWidth = box.offsetWidth - const boxHeight = box.offsetHeight - if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = e.pageX + 15 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } } else { - this.tooltip.x = e.pageX - boxWidth - 15 - } - if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 this.tooltip.y = e.pageY + 15 - } else { - this.tooltip.y = e.pageY - boxHeight - 10 + this.tooltip.x = e.pageX + 15 } - } else { - this.tooltip.y = e.pageY + 15 - this.tooltip.x = e.pageX + 15 - } + }) }, - // 处理label sankeyFormatterLabel (data) { let str = '' let valueStr = '' if (this.chartInfo.param.text === 'all') { str += data.node - valueStr = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { value: data.showValue }) : data.showValue + valueStr = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue } if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) { - valueStr = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { value: data.showValue }) : data.showValue + valueStr = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue } if (this.chartInfo.param.text === 'legend') { str += data.node @@ -390,15 +405,33 @@ export default { }, dispose () { if (this.svg) { - this.svg.selectAll('path').on('mouseover', null) + this.svg.selectAll('path').on('mouseenter', null) this.svg.selectAll('path').on('mousemove', null) this.svg.selectAll('path').on('mouseleave', null) - this.svg.selectAll('.node').on('mouseover', null) + this.svg.selectAll('path').on('click', null) + this.svg.selectAll('.node').on('mouseenter', null) this.svg.selectAll('.node').on('mousemove', null) this.svg.selectAll('.node').on('mouseleave', null) + this.svg.selectAll('.node').on('click', null) this.svg.selectAll('g').remove() this.svg = null } + }, + chartClick (e, data) { + if (this.dataLink.length) { + this.tooltip.title = data.node ? data.node : data.source.node + ' ——> ' + data.target.node + this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue + this.tooltip.mapping = data.mapping + this.tooltip.show = true + this.tooltip.dataLinkShow = true + this.setPosition(e) + } + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue index 738b93f71..f3206210d 100644 --- a/nezha-fronted/src/components/chart/chart/chartStat.vue +++ b/nezha-fronted/src/components/chart/chart/chartStat.vue @@ -1,12 +1,14 @@ @@ -59,11 +77,21 @@ export default { oldTableData: [], columns: [], valueMapping: {}, - tableTimer: null + tableTimer: null, + tooltip: { + x: 0, + y: 0, + title: 0, + value: 0, + mapping: {}, + show: false, + dataLinkShow: '' + } } }, methods: { initChart () { + this.setDataLink() if (this.tableTimer) { clearTimeout(this.tableTimer) this.tableTimer = null @@ -355,6 +383,45 @@ export default { return 0 } } + }, + setPosition (e) { + const windowWidth = window.innerWidth// 窗口宽度 + const windowHeight = window.innerHeight// 窗口高度 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } + } else { + this.tooltip.y = e.pageY + 15 + this.tooltip.x = e.pageX + 15 + } + }) + }, + chartClick (e, data) { + if (this.dataLink.length) { + this.tooltip.title = data.title + this.tooltip.value = data.value + this.tooltip.show = true + this.tooltip.dataLinkShow = true + this.setPosition(e) + } + }, + clickout () { + if (this.dataLink.length) { + this.tooltip.show = false + this.tooltip.dataLinkShow = false + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 3c015e7c5..97184e5b0 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -6,7 +6,7 @@ v-my-loading="chartLoading" >
-
+

{{chartInfo.param.rightYAxis.label}} @@ -20,6 +20,16 @@ :series="series" :is-fullscreen="isFullscreen" > +

+
+ +
+
+ + {{item.title}} +
+
+
@@ -54,7 +64,18 @@ export default { stackTotalColorRight: null, isStack: false, hasRightYAxis: false, - chartLoading: false + chartLoading: false, + tooltip: { + x: 0, + y: 0, + title: 0, + value: 0, + mapping: {}, + show: false, + dataLinkShow: '', + tooltipHtml: '' + }, + tooltipHtml: '' } }, computed: { @@ -116,6 +137,7 @@ export default { }, methods: { initChart (chartOptions = this.chartOption) { + this.setDataLink() try { this.isStack = this.chartInfo.param.stack } catch (e) {} @@ -202,6 +224,15 @@ export default { }) } } + if (this.isInit && this.dataLink.length) { + myChart.on('click', this.chartClick) + myChart.on('mousedown', (params) => { + if (this.tooltip.show) { + const e = params.event.event + e.stopPropagation() + } + }) + } this.chartLoading = false this.isInit = false }, 200) @@ -479,6 +510,7 @@ export default { } str += '' + self.tooltipHtml = str return str } }, @@ -528,6 +560,66 @@ export default { if (option.yAxis[1].min && option.yAxis[1].max) { this.hasRightYAxis = true } + }, + setPosition (e) { + const windowWidth = window.innerWidth// 窗口宽度 + const windowHeight = window.innerHeight// 窗口高度 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } + } else { + this.tooltip.y = e.pageY + 15 + this.tooltip.x = e.pageX + 15 + } + }) + }, + chartClick (params) { + // 先取消多表联动 防止其它图表setOption + if (this.isConnect !== 'none') { + echarts.disconnect('timeSeriesGroup') + } + echarts.disconnect('timeSeriesGroup') + const option = { + tooltip: { + extraCssText: 'z-index:99999999;visibility:hidden;transition:none;' + } + } + getChart(this.chartId).setOption(option) + getChart(this.chartId).dispatchAction({ + type: 'hideTip' + }) + this.tooltip.tooltipHtml = this.tooltipHtml + this.tooltip.show = true + this.tooltip.dataLinkShow = true + const e = params.event.event + this.setPosition(e) + if (this.isConnect !== 'none') { + echarts.connect('timeSeriesGroup') + } + }, + 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) + } } }, mounted () { @@ -537,9 +629,6 @@ export default { this.isStack = this.chartInfo.param.stack } catch (e) {} this.chartInfo.loaded && this.initChart(this.chartOption) - }, - beforeDestroy () { - getChart(this.chartId) && getChart(this.chartId).getZr().off('mousemove') } } diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue index d6df8d4a8..65e4a5f3a 100644 --- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue +++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue @@ -5,7 +5,7 @@ class="nz-chart__component nz-chart__component--time-series" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart" > -
+
+ +
+
{{tooltip.title}}
+
+
value
+
+
+ +
+
{{tooltip.value}}
+
+
+ +
+
+ + {{item.title}} +
+
+
@@ -44,7 +64,7 @@ export default { computed: { hasLegend () { try { - return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 + return [chartLegendPlacement.bottom, chartLegendPlacement.left, chartLegendPlacement.right].indexOf(this.chartInfo.param.legend.placement) > -1 && this.chartInfo.param.enable.legend } catch (e) { return false } @@ -74,11 +94,21 @@ export default { active: '#53a3cb', inactive: '#7e7e7e' }, - chartId: '' + chartId: '', + tooltip: { + x: 0, + y: 0, + title: 0, + value: 0, + mapping: {}, + show: false, + dataLinkShow: '' + } } }, methods: { initChart (chartOption = this.chartOption) { + this.setDataLink() this.legends = [] this.series = chartOption.series = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends chartOption.tooltip.formatter = this.formatterFunc @@ -98,6 +128,15 @@ export default { } myChart.setOption(chartOption) this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿 + if (this.isInit && this.dataLink.length) { + myChart.on('click', this.chartClick) + myChart.on('mousedown', (params) => { + if (this.tooltip.show && params.dataIndex) { + const e = params.event.event + e.stopPropagation() + } + }) + } this.isInit = false }, 200) }, @@ -148,28 +187,74 @@ export default { }, formatterFunc (params, ticket, callback) { const self = this - if (!params.data) { + if (!params.data || !params.dataIndex) { return '' } return ` +
${params.data.alias}
+
+
value
-
-
${params.data.alias}
-
-
value
-
-
- -
-
${params.data.showValue}
-
- ${(params.data.mapping && params.data.mapping.display) ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : ''} -
-
-
-
+
+ +
+
${params.data.showValue}
+
${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}
+
` + }, + setPosition (e) { + const windowWidth = window.innerWidth// 窗口宽度 + const windowHeight = window.innerHeight// 窗口高度 + this.$nextTick(() => { + const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + if (box) { + const boxWidth = box.offsetWidth + const boxHeight = box.offsetHeight + if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + this.tooltip.x = e.pageX + 15 + } else { + this.tooltip.x = e.pageX - boxWidth - 15 + } + if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 + this.tooltip.y = e.pageY + 15 + } else { + this.tooltip.y = e.pageY - boxHeight - 10 + } + } else { + this.tooltip.y = e.pageY + 15 + this.tooltip.x = e.pageX + 15 + } + }) + }, + 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 + const e = params.event.event + this.setPosition(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) + } } }, mounted () { diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js index dbde1d154..10842331a 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js @@ -25,7 +25,7 @@ const chartTreemapOption = { }, series: [ { - name: 'Disk Usage', + name: 'Parent', type: 'treemap', visibleMin: 40, childrenVisibleMin: 40, diff --git a/nezha-fronted/src/components/chart/chartHeaderMixin.js b/nezha-fronted/src/components/chart/chartHeaderMixin.js index 29d585fef..7b02c1e00 100644 --- a/nezha-fronted/src/components/chart/chartHeaderMixin.js +++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js @@ -120,7 +120,7 @@ export default { str = str.replace(reg, item.checked.map(label => label.replace(/\\"/g, '"').replace(/\\'/g, "'")).join('+')) }) } - this.chartInfo.varName = str + this.chartInfo.modifiedName = str return str } }, diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue index 5c4c33464..0a57dde29 100644 --- a/nezha-fronted/src/components/chart/chartList.vue +++ b/nezha-fronted/src/components/chart/chartList.vue @@ -71,7 +71,7 @@ { this.copyDataList.forEach(item => { - if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id]) { - if (this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show) { - this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show = false - } - } + // if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id]) { + // if (this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show) { + // this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].tooltip.show = false + // } + // } if (!this.$refs['grid-item' + item.id] || !this.$refs['grid-item' + item.id][0]) { return } diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 98b86e4cf..fac4765a1 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -22,7 +22,8 @@ export default { }, chartId: '', isNoData: true, - series: [] + series: [], + dataLink: [] } }, props: { @@ -280,18 +281,6 @@ export default { return aliasExpression } }, - globalVariablesReplace (expression) { - let str = expression - if (str) { - this.globalVariables.forEach(item => { - const reg = new RegExp('{{\\' + item.name + '}}', 'g') - if (item.value != null) { - str = str.replace(reg, item.value) - } - }) - } - return str - }, selectMapping (value, valueMapping, show) { let mapping = '' if (show && valueMapping) { @@ -340,31 +329,17 @@ export default { const pointX = point[0] const pointY = point[1] // 外层div大小 - const viewWidth = size.viewSize[0] + // 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) - 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 + const chartDom = document.getElementById('chart-local-' + this.chartInfo.id) + if (chartDom) { + if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 + x = pointX + 15 } else { - x = pointX - boxWidth + x = pointX - boxWidth - 15 } if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 y = pointY + 15 @@ -453,6 +428,38 @@ export default { setTimeout(() => { getChart(this.chartId) && getChart(this.chartId).resize() }, 100) + }, + // 全局变量替换 + globalVariablesReplace (expression) { + let str = expression + if (str) { + this.globalVariables.forEach(item => { + const reg = new RegExp('{{\\' + item.name + '}}', 'g') + if (item.value != null) { + str = str.replace(reg, item.value) + } + }) + } + return str + }, + // 设置dataLink + setDataLink () { + if (this.chartInfo.param.dataLink && this.chartInfo.param.dataLink.length) { + this.dataLink = this.chartInfo.param.dataLink.map(item => { + return { + ...item, + url: this.globalVariablesReplace(item.url) + } + }) + } + }, + linkClick (data) { + if (data.openIn === 'newTab') { + window.open(data.url) + } else { + window.location.href = data.url + } + this.clickout() } }, watch: { @@ -482,6 +489,11 @@ export default { this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}` }, beforeDestroy () { + try { + getChart(this.chartId) && getChart(this.chartId).off('click') + getChart(this.chartId) && getChart(this.chartId).off('mousedown') + getChart(this.chartId) && getChart(this.chartId).getZr().off('mousemove') + } catch (error) {} getChart(this.chartId) && setChart(this.chartId, null) } } diff --git a/nezha-fronted/src/components/common/mixin/globalVariables.js b/nezha-fronted/src/components/common/mixin/globalVariables.js index e29be9b32..96547779f 100644 --- a/nezha-fronted/src/components/common/mixin/globalVariables.js +++ b/nezha-fronted/src/components/common/mixin/globalVariables.js @@ -72,7 +72,7 @@ export default { break } case '$G.chart.name': { - item.value = this.chartInfo.varName + item.value = this.chartInfo.modifiedName break } case '$G.interval.ms': { diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue index b46a5f743..a35fb5a29 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue @@ -1093,89 +1093,91 @@ -
- {{$t('dashboard.dashboard.chartForm.dataLink')}} -
- -
-
- - - - - {{item.title}} +
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue index a1068e047..60d388009 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue @@ -240,7 +240,6 @@ export default { } if (params.type === 'group') { params.height = 1 - delete params.param.dataLink } if (!params.groupId) { params.groupId = 0 @@ -396,7 +395,7 @@ export default { varValue: '', result: 'show' }, - dataLink: this.editChart.param.dataLink + dataLink: [] } } } @@ -423,7 +422,7 @@ export default { varValue: '', result: 'show' }, - dataLink: this.editChart.param.dataLink + dataLink: [] } } } @@ -465,7 +464,7 @@ export default { varValue: '', result: 'show' }, - dataLink: this.editChart.param.dataLink + dataLink: [] } } delete this.editChart.elements @@ -490,8 +489,7 @@ export default { operator: 'equal', varValue: '', result: 'show' - }, - dataLink: this.editChart.param.dataLink + } } } delete this.editChart.elements diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue index 7f152afda..693956b8e 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue @@ -289,93 +289,6 @@
- - - @@ -385,14 +298,12 @@ import publicConfig from '@/components/common/rightBox/chart/publicConfig' import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow' import diagram from '@/components/common/ChartDiagram/diagram' import richTextEditor from '@/components/chart/richTextEditor' -import draggable from 'vuedraggable' export default { name: 'otherChartConfig', mixins: [publicConfig, chartTypeShow], components: { diagram, - richTextEditor, - draggable + richTextEditor }, watch: { // 'chartConfig.param.text': { @@ -462,8 +373,7 @@ export default { }, repeat: { variable: '' - }, - dataLink: this.chartConfig.param.dataLink + } } break case 'text': @@ -479,8 +389,7 @@ export default { operator: 'equal', varValue: '', result: 'show' - }, - dataLink: this.chartConfig.param.dataLink + } } break case 'diagram': @@ -496,8 +405,7 @@ export default { operator: 'equal', varValue: '', result: 'show' - }, - dataLink: this.chartConfig.param.dataLink + } } break case 'url': @@ -513,8 +421,7 @@ export default { operator: 'equal', varValue: '', result: 'show' - }, - dataLink: this.chartConfig.param.dataLink + } } break case 'clock': @@ -530,8 +437,7 @@ export default { operator: 'equal', varValue: '', result: 'show' - }, - dataLink: this.chartConfig.param.dataLink + } } break } @@ -549,13 +455,6 @@ export default { this.chartConfig.param.text = html this.$refs.chartForm.validateField('param.text') this.change() - }, - start () { - document.body.classList.add('isDrag') - }, - onEnd () { - this.change() - document.body.classList.remove('isDrag') } }, created () {