From 14851b4e00c2737a3ca5cf32f1f3fdc0befa63e4 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Tue, 14 Oct 2025 19:57:11 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E5=9C=A8=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E4=B8=AD=EF=BC=8C=E9=9A=90=E8=97=8F=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=97=B6=EF=BC=8C=E5=B0=86=E4=B8=8D=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=9B=BE=E4=BE=8B=E3=80=81=E5=9D=90=E6=A0=87=E8=BD=B4=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E3=80=81=E5=9D=90=E6=A0=87=E8=BD=B4=E6=A0=87=E9=A2=98?= =?UTF-8?q?=E3=80=81=E6=95=B0=E6=8D=AE=E6=A0=87=E7=AD=BE=E3=80=81=E7=BC=A9?= =?UTF-8?q?=E7=95=A5=E8=BD=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core-frontend/src/models/chart/chart.d.ts | 1 + .../components/js/panel/charts/g2/bar/bar.ts | 4 +- .../panel/charts/g2/bar/bidirectional-bar.ts | 9 +- .../js/panel/charts/g2/bar/bullet-graph.ts | 6 +- .../js/panel/charts/g2/bar/progress-bar.ts | 2 + .../js/panel/charts/g2/bar/range-bar.ts | 2 + .../js/panel/charts/g2/bar/stock-line.ts | 7 +- .../js/panel/charts/g2/bar/waterfall.ts | 6 +- .../js/panel/charts/g2/distribution/radar.ts | 7 +- .../panel/charts/g2/distribution/treemap.ts | 2 + .../js/panel/charts/g2/line/area.ts | 8 +- .../js/panel/charts/g2/line/line.ts | 7 +- .../js/panel/charts/g2/mix/mix-dual-line.ts | 8 +- .../js/panel/charts/g2/mix/mix-group.ts | 8 +- .../js/panel/charts/g2/mix/mix-stack.ts | 8 +- .../components/js/panel/charts/g2/mix/mix.ts | 8 +- .../js/panel/charts/g2/numberic/gauge.ts | 6 +- .../js/panel/charts/g2/numberic/liquid.ts | 2 + .../charts/g2/relation/circle-packing.ts | 3 +- .../js/panel/charts/g2/relation/funnel.ts | 9 +- .../js/panel/charts/g2/relation/quadrant.ts | 7 +- .../js/panel/charts/g2/relation/sankey.ts | 7 +- .../js/panel/charts/g2/relation/scatter.ts | 7 +- .../components/js/panel/common/common_antv.ts | 98 +++++++++++++++++++ .../views/components/ChartComponentG2Plot.vue | 3 +- 25 files changed, 215 insertions(+), 20 deletions(-) diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts index bca4d0b0b3..ec16b22319 100644 --- a/core/core-frontend/src/models/chart/chart.d.ts +++ b/core/core-frontend/src/models/chart/chart.d.ts @@ -76,6 +76,7 @@ declare interface Chart { extColor: Axis[] fontFamily?: string + dashboardHidden?: boolean } declare type CustomAttr = DeepPartial | JSONString> declare type CustomStyle = DeepPartial | JSONString> diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts index 71c3e4a946..5294a5150a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bar.ts @@ -13,7 +13,8 @@ import { getLineDash, setGradientColor, TOOLTIP_ITEM_TPL, - TOOLTIP_TITLE_TPL + TOOLTIP_TITLE_TPL, + handleChartDashboardHidden } from '@/views/chart/components/js/panel/common/common_antv' import { DEFAULT_BASIC_STYLE, @@ -107,6 +108,7 @@ export class Bar extends G2ChartView { } const options: ViewSpec = this.setupOptions(chart, initOptions) const newChart = new G2Column({ container, autoFit: true }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('interval:click', action) configTooltip(newChart, chart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts index 4a091b845d..aee7724807 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bidirectional-bar.ts @@ -11,7 +11,12 @@ import { defaultsDeep, isEmpty, merge } from 'lodash-es' import { valueFormatter } from '@/views/chart/components/js/formatter' import { useI18n } from '@/hooks/web/useI18n' import { AxisComponent, ChartEvent, Chart as G2Chart, G2Spec } from '@antv/g2' -import { setGradientColor, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' const { t } = useI18n() @@ -229,11 +234,13 @@ export class BidirectionalHorizontalBar extends G2ChartView { } } if (reRenderMark) { + handleChartDashboardHidden(chart, newChart) newChart.render() } }) newChart.on('interval:click', action) // 开始渲染 + handleChartDashboardHidden(chart, options) newChart.options(options) return newChart } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts index 348784290b..722c1ea0e9 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/bullet-graph.ts @@ -9,7 +9,10 @@ import { useI18n } from '@/hooks/web/useI18n' import { flow, parseJson } from '@/views/chart/components/js/util' import { RuntimeOptions } from '@antv/g2/lib/api/runtime' import { valueFormatter } from '@/views/chart/components/js/formatter' -import { getLineDash } from '@/views/chart/components/js/panel/common/common_antv' +import { + getLineDash, + handleChartDashboardHidden +} from '@/views/chart/components/js/panel/common/common_antv' const { t } = useI18n() @@ -84,6 +87,7 @@ export class BulletGraph extends G2ChartView { const options = this.setupOptions(chart, initOptions) let newChart = null const { Chart: BulletClass } = await import('@antv/g2') + handleChartDashboardHidden(chart, options) newChart = new BulletClass(options) newChart.on('element:click', ev => { const pointData = ev?.data?.data diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts index 6a10f38bf9..a77aa2abc6 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/progress-bar.ts @@ -14,6 +14,7 @@ import { G2DrawOptions } from '@/views/chart/components/js/panel/types/impl/g2' import { Chart, Chart as G2Column } from '@antv/g2' import { useI18n } from '@/hooks/web/useI18n' import { + handleChartDashboardHidden, setGradientColor, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL @@ -189,6 +190,7 @@ export class ProgressBar extends HorizontalStackBar { const newChart = new G2Column({ container, autoFit: true }) const newOptions = cloneDeep(options) newOptions.children = [options.children[1], options.children[0]] + handleChartDashboardHidden(chart, newOptions) newChart.options(newOptions) newChart.on('interval:click', action) configTooltip(newChart, chart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts index 53d4c02842..c05d7ef9ad 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/range-bar.ts @@ -15,6 +15,7 @@ import { HorizontalBar } from '@/views/chart/components/js/panel/charts/g2/bar/h import { G2DrawOptions } from '@/views/chart/components/js/panel/types/impl/g2' import { cloneDeep, isEmpty } from 'lodash-es' import { + handleChartDashboardHidden, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '@/views/chart/components/js/panel/common/common_antv' @@ -114,6 +115,7 @@ export class RangeBar extends HorizontalBar { } const options: ViewSpec = this.setupOptions(chart, initOptions) const newChart = new G2Column({ container, autoFit: true }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('interval:click', action) configTooltip(newChart, chart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stock-line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stock-line.ts index e771a65d9a..a2afb83c73 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stock-line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/stock-line.ts @@ -6,7 +6,11 @@ import { LINE_EDITOR_PROPERTY_INNER } from '../line/common' import { useI18n } from '@/hooks/web/useI18n' import { ChartEvent, Chart as G2Chart, G2Spec } from '@antv/g2' import { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' -import { TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' const { t } = useI18n() const DEFAULT_DATA = [] @@ -174,6 +178,7 @@ export class StockLine extends G2ChartView { } const newChart = new G2Chart({ container }) const options = this.setupOptions(chart, initOptions) + handleChartDashboardHidden(chart, options) // 开始渲染 newChart.options(options) newChart.on(`interval:${ChartEvent.CLICK}`, evt => { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts index 821910c118..0e2ffb7864 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/waterfall.ts @@ -3,7 +3,10 @@ import { G2DrawOptions } from '@/views/chart/components/js/panel/types/impl/g2' import { useI18n } from '@/hooks/web/useI18n' import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util' import { ViewSpec, configTooltip } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil' -import { setGradientColor } from '@/views/chart/components/js/panel/common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor +} from '@/views/chart/components/js/panel/common/common_antv' import { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar' import { valueFormatter } from '@/views/chart/components/js/formatter' import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart' @@ -165,6 +168,7 @@ export class Waterfall extends Bar { } const options = this.setupOptions(chart, initOptions) const newChart = new G2Column({ container, autoFit: true }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('interval:click', action) configTooltip(newChart, chart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/radar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/radar.ts index 692dfb0758..74f0239723 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/radar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/radar.ts @@ -5,7 +5,11 @@ import { defaultsDeep, isEmpty } from 'lodash-es' import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart' import { Chart as G2Chart, G2Spec } from '@antv/g2' import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2' -import { TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' const { t } = useI18n() @@ -97,6 +101,7 @@ export class Radar extends G2ChartView { } const options = this.setupOptions(chart, baseOptions) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('point:click', action) if (options.children[0].labels?.length) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/treemap.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/treemap.ts index ce6e6c06c6..5e4a10d408 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/treemap.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/distribution/treemap.ts @@ -11,6 +11,7 @@ import { Chart as G2Chart, G2Spec } from '@antv/g2' import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2' import { getTooltipSeriesTotalMap, + handleChartDashboardHidden, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' @@ -87,6 +88,7 @@ export class Treemap extends G2ChartView { const total = data.reduce((pre, next) => pre + (next.value ?? 0), 0) const options = this.setupOptions(chart, baseOptions, { total }) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('polygon:click', action) return newChart diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts index 6069ee27e6..5b21642b4f 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/area.ts @@ -20,7 +20,12 @@ import { useI18n } from '@/hooks/web/useI18n' import { addExtremumText, extremumEvt } from '@/views/chart/components/js/extremumUitl' import { Chart as G2Chart, G2Spec } from '@antv/g2' import { DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart' -import { setGradientColor, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' const { t } = useI18n() @@ -99,6 +104,7 @@ export class Area extends G2ChartView { const newChart = new G2Chart({ container }) const options = this.setupOptions(chart, initOptions, { chartObj: newChart }) // 开始渲染 + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('point:click', action) extremumEvt(newChart, chart, options, container, scale, this.name === 'area') diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/line.ts index 29f6a412c8..0d9bde2531 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/line/line.ts @@ -18,7 +18,11 @@ import { LINE_AXIS_TYPE, LINE_EDITOR_PROPERTY, LINE_EDITOR_PROPERTY_INNER } from import { useI18n } from '@/hooks/web/useI18n' import { Chart as G2Chart, G2Spec } from '@antv/g2' import { DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart' -import { TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { extremumEvt, addExtremumText } from '@/views/chart/components/js/extremumUitl' import { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' @@ -97,6 +101,7 @@ export class Line extends G2ChartView { const options = this.setupOptions(chart, initOptions) // 开始渲染 const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('point:click', action) extremumEvt(newChart, chart, options, container, scale) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-dual-line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-dual-line.ts index e573c0c6c7..fac1bb4a1c 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-dual-line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-dual-line.ts @@ -15,7 +15,12 @@ import { DEFAULT_BASIC_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart' -import { setGradientColor, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { CHART_MIX_EDITOR_PROPERTY, CHART_MIX_EDITOR_PROPERTY_INNER } from './common' import { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' @@ -220,6 +225,7 @@ export class GroupLineMix extends G2ChartView { newChart.on('point:click', action) newChart.on('interval:click', action) + handleChartDashboardHidden(chart, options) newChart.options(options) // extremumEvt(newChart, chart, options, container) // configPlotTooltipEvent(chart, newChart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts index 1e1d4f4149..46f1f62f15 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-group.ts @@ -16,7 +16,12 @@ import { DEFAULT_BASIC_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart' -import { setGradientColor, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { CHART_MIX_EDITOR_PROPERTY, CHART_MIX_EDITOR_PROPERTY_INNER } from './common' import { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' @@ -200,6 +205,7 @@ export class GroupLineMix extends G2ChartView { newChart.on('point:click', action) newChart.on('interval:click', action) + handleChartDashboardHidden(chart, options) newChart.options(options) // extremumEvt(newChart, chart, options, container) // configPlotTooltipEvent(chart, newChart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts index 64aaf1ae62..454382098c 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix-stack.ts @@ -15,7 +15,12 @@ import { DEFAULT_BASIC_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart' -import { setGradientColor, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { CHART_MIX_EDITOR_PROPERTY, CHART_MIX_EDITOR_PROPERTY_INNER } from './common' import { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' @@ -198,6 +203,7 @@ export class StackLineMix extends G2ChartView { newChart.on('point:click', action) newChart.on('interval:click', action) + handleChartDashboardHidden(chart, options) newChart.options(options) // extremumEvt(newChart, chart, options, container) // configPlotTooltipEvent(chart, newChart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts index b9394b438b..719e77f8bd 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/mix/mix.ts @@ -15,7 +15,12 @@ import { DEFAULT_BASIC_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/components/editor/util/chart' -import { setGradientColor, TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { CHART_MIX_EDITOR_PROPERTY, CHART_MIX_EDITOR_PROPERTY_INNER } from './common' const { t } = useI18n() @@ -173,6 +178,7 @@ export class ColumnLineMix extends G2ChartView { newChart.on('point:click', action) newChart.on('interval:click', action) + handleChartDashboardHidden(chart, options) newChart.options(options) // extremumEvt(newChart, chart, options, container) // configPlotTooltipEvent(chart, newChart) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/gauge.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/gauge.ts index 975a0c1b71..bd864da2f0 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/gauge.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/gauge.ts @@ -6,7 +6,10 @@ import { getScaleValue } from '@/views/chart/components/editor/util/chart' import { valueFormatter } from '@/views/chart/components/js/formatter' -import { setGradientColor } from '@/views/chart/components/js/panel/common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor +} from '@/views/chart/components/js/panel/common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { defaultsDeep } from 'lodash-es' import { G2Spec, Chart as G2Chart } from '@antv/g2' @@ -88,6 +91,7 @@ export class Gauge extends G2ChartView { } const options = this.setupOptions(chart, initOptions, { scale }) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('afterrender', () => { action({ diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/liquid.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/liquid.ts index d8acf58c27..a29595127b 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/liquid.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/numberic/liquid.ts @@ -5,6 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2' import { Chart as G2Chart, G2Spec } from '@antv/g2' import { defaultsDeep } from 'lodash-es' +import { handleChartDashboardHidden } from '@/views/chart/components/js/panel/common/common_antv' const { t } = useI18n() const DEFAULT_LIQUID_DATA = [] @@ -68,6 +69,7 @@ export class Liquid extends G2ChartView { } const options = this.setupOptions(chart, initOptions, context) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('afterrender', () => { action({ diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/circle-packing.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/circle-packing.ts index 98d0e56b71..720983c9a0 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/circle-packing.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/circle-packing.ts @@ -4,7 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { cloneDeep, defaultsDeep } from 'lodash-es' import { Chart as G2Chart, G2Spec } from '@antv/g2' import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2' -import { TOOLTIP_ITEM_TPL } from '../../../common/common_antv' +import { handleChartDashboardHidden, TOOLTIP_ITEM_TPL } from '../../../common/common_antv' const { t } = useI18n() const DEFAULT_DATA = [] @@ -81,6 +81,7 @@ export class CirclePacking extends G2ChartView { } const options = this.setupOptions(chart, initOptions) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('element:click', param => { const pointData = param?.data?.data diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/funnel.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/funnel.ts index 3a22ccea83..a35adcc2f5 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/funnel.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/funnel.ts @@ -5,7 +5,11 @@ import { parseJson, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util' -import { TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { valueFormatter } from '@/views/chart/components/js/formatter' import { defaultsDeep, isEmpty } from 'lodash-es' @@ -81,6 +85,7 @@ export class Funnel extends G2ChartView { } const options = this.setupOptions(chart, baseOptions) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('interval:click', action) return newChart @@ -330,7 +335,7 @@ export class Funnel extends G2ChartView { this.configLabel, this.configTooltip, this.configLegend - )(chart, options) + )(chart, options, {}, this) } constructor() { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/quadrant.ts index 8f435997db..f99df03553 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/quadrant.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/quadrant.ts @@ -5,7 +5,11 @@ import { parseJson, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util' -import { TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { defaultsDeep, isEmpty } from 'lodash-es' import { ChartEvent, Chart as G2Chart, G2Spec } from '@antv/g2' @@ -155,6 +159,7 @@ export class Quadrant extends G2ChartView { chart.container = container const options: G2Spec = this.setupOptions(chart, baseOptions, {}) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on(`point:${ChartEvent.CLICK}`, action) newChart.on(`plot:${ChartEvent.CLICK}`, () => quadrantDefaultBaseline(defaultBaselineQuadrant)) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/sankey.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/sankey.ts index 090466fab7..d149ad92fd 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/sankey.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/sankey.ts @@ -1,6 +1,10 @@ import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2' import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util' -import { setGradientColor, TOOLTIP_ITEM_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + setGradientColor, + TOOLTIP_ITEM_TPL +} from '../../../common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { defaultsDeep } from 'lodash-es' import { Chart as G2Chart, G2Spec } from '@antv/g2' @@ -150,6 +154,7 @@ export class G2ChartBar extends G2ChartView { const options: G2Spec = this.setupOptions(chart, initOptions) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('edge:click', action) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/scatter.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/scatter.ts index 8e04038c25..5e63860acf 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/scatter.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/g2/relation/scatter.ts @@ -1,6 +1,10 @@ import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2' import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util' -import { TOOLTIP_ITEM_TPL, TOOLTIP_TITLE_TPL } from '../../../common/common_antv' +import { + handleChartDashboardHidden, + TOOLTIP_ITEM_TPL, + TOOLTIP_TITLE_TPL +} from '../../../common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { defaultsDeep, isEmpty, toString } from 'lodash-es' import { ChartEvent, Chart as G2Chart, G2Spec } from '@antv/g2' @@ -111,6 +115,7 @@ export class Scatter extends G2ChartView { } const options: G2Spec = this.setupOptions(chart, baseOptions) const newChart = new G2Chart({ container }) + handleChartDashboardHidden(chart, options) newChart.options(options) newChart.on('point:click', action) if (options.labels) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index db3ff1eb45..ca7e736ee4 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -2552,3 +2552,101 @@ export const TOOLTIP_ITEM_TPL = ` ` export const TOOLTIP_TITLE_TPL = `
{title}
` + +/** + * 辅助函数：隐藏子组件的文本标签 + * 包含 图例、坐标轴标签、坐标轴标题、数据标签、缩略轴 + * @param child + */ +function hideChildrenLabels(child) { + child.labels?.length && (child.labels = []) + ;['x', 'y'].forEach( + axis => child.axis?.[axis] && Object.assign(child.axis[axis], { label: false, title: false }) + ) + child.legend && (child.legend = false) + child.slider && Object.assign(child.slider, { x: false, y: false }) +} + +/** + * 处理图表隐藏时的图表配置项 + * 当隐藏图表示，对应的图表文本配置项也隐藏 + * 包括 图例、坐标轴标签、坐标轴标题、数据标签、缩略轴 + * @param chart + * @param options + */ +export function handleChartDashboardHidden(chart: Chart, options) { + if (!chart.dashboardHidden) return + const { type } = chart + const hasChildren = options.children && options.children.length > 0 + // 辅助函数：批量隐藏 legend 和 axis + const hideLegendAndAxis = opt => { + opt.legend = false + opt.axis?.x && Object.assign(opt.axis.x, { label: false, title: false }) + opt.axis?.y && Object.assign(opt.axis.y, { label: false, title: false }) + } + if (hasChildren && type !== 'gauge' && type !== 'liquid') { + switch (type) { + case 'stock-line': + hideLegendAndAxis(options) + options.children?.[1] && (options.children[1].slider = false) + break + case 'bullet-graph': + hideLegendAndAxis(options) + options.children?.[1] && (options.children[1].labels = []) + break + default: + if (type.indexOf('-mix') > -1) { + if (options.type === 'view') { + hideLegendAndAxis(options) + options.children?.forEach(hideChildrenLabels) + } else { + options.children.forEach(child => { + if (child.type === 'view') { + hideLegendAndAxis(child) + child.children?.forEach(hideChildrenLabels) + } else { + child.scale ? (child.scale.color = false) : (child.color = false) + } + }) + } + } else { + if (options.type === 'view') { + options.legend = false + const radar = type === 'radar' + const axisOpt = radar + ? { labelFormatter: () => '', title: false } + : { label: false, title: false } + options.axis?.x && Object.assign(options.axis.x, axisOpt) + options.axis?.y && Object.assign(options.axis.y, axisOpt) + } + options.children.forEach(child => + type === 'bidirectional-bar' + ? child.children?.forEach(c => hideChildrenLabels(c.value || c)) + : hideChildrenLabels(child) + ) + } + } + } else { + switch (type) { + case 'gauge': + const setGaugeStyle = c => { + c.style.text = () => '' + c.style.textContent = () => '' + c.axis?.y && (c.axis.y.labelFormatter = () => '') + } + hasChildren ? options.children.forEach(setGaugeStyle) : setGaugeStyle(options) + break + case 'liquid': + options.style.contentText = '' + break + case 'treemap': + case 'sankey': + case 'circle-packing': + options.style.labelText = () => '' + break + default: + if (type === 'funnel') options.paddingRight = 0 + hideChildrenLabels(options) + } + } +} diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue index da9a7fe32c..148f8d2726 100644 --- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue +++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue @@ -354,10 +354,11 @@ const renderG2 = async (chart, chartView: G2PlotChartView) => { // 在这里清理掉之前图表的空dom configEmptyDataStyle([1], containerId) myChart?.destroy() + const dashboardHidden = props.element.dashboardHidden myChart = await chartView.drawChart({ chartObj: myChart, container: containerId, - chart: { ...chart, container: containerId }, + chart: { ...chart, container: containerId, dashboardHidden }, scale: scale.value, action, quadrantDefaultBaseline