From c1bcd393cc2b5f28714f33f50b2b6ff5d1a6e093 Mon Sep 17 00:00:00 2001 From: wisonic-s <51065359+wisonic-s@users.noreply.github.com> Date: Wed, 9 Apr 2025 17:11:47 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E6=9D=A1=E5=BD=A2=E5=9B=BE=EF=BC=8C=E5=8C=BA=E9=97=B4?= =?UTF-8?q?=E6=9D=A1=E5=BD=A2=E5=9B=BE=EF=BC=8C=E6=95=A3=E7=82=B9=E5=9B=BE?= =?UTF-8?q?=E7=9A=84=E7=82=B9=E5=87=BB=E6=95=88=E6=9E=9C=EF=BC=8C=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E6=A0=87=E7=AD=BE=E5=8F=AF=E7=9B=B4=E6=8E=A5=E8=B7=B3?= =?UTF-8?q?=E8=BD=AC=20#11355=20#12727?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/bar/horizontal-bar.ts | 58 +++++++++++++++++-- .../js/panel/charts/bar/range-bar.ts | 29 +++++++++- .../js/panel/charts/others/scatter.ts | 48 +++++++++++++++ 3 files changed, 128 insertions(+), 7 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts index ae7d2e2fbc..78455b1689 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts @@ -101,6 +101,17 @@ export class HorizontalBar extends G2PlotChartView { const newChart = new Bar(container, options) newChart.on('interval:click', action) + if (options.label) { + newChart.on('label:click', e => { + action({ + x: e.x, + y: e.y, + data: { + data: e.target.attrs.data + } + }) + }) + } configPlotTooltipEvent(chart, newChart) configAxisLabelLengthLimit(chart, newChart) return newChart @@ -237,6 +248,7 @@ export class HorizontalBar extends G2PlotChartView { attrs: { x: 0, y: 0, + data, text: value, textAlign: 'start', textBaseline: 'top', @@ -319,8 +331,24 @@ export class HorizontalStackBar extends HorizontalBar { baseOptions.label.style.fill = labelAttr.color const label = { ...baseOptions.label, - formatter: function (param: Datum) { - return valueFormatter(param.value, labelAttr.labelFormatter) + formatter: function (data: Datum) { + const value = valueFormatter(data.value, labelAttr.formatter) + const group = new Group({}) + group.addShape({ + type: 'text', + attrs: { + x: 0, + y: 0, + data, + text: value, + textAlign: 'start', + textBaseline: 'top', + fontSize: labelAttr.fontSize, + fontFamily: chart.fontFamily, + fill: labelAttr.color + } + }) + return group } } return { @@ -438,11 +466,29 @@ export class HorizontalPercentageStackBar extends HorizontalStackBar { const l = parseJson(customAttr).label const label = { ...baseOptions.label, - formatter: function (param: Datum) { - if (!param.value) { - return '0%' + formatter: function (data: Datum) { + let value = data.value + if (value) { + value = (Math.round(value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%' + } else { + value = '0%' } - return (Math.round(param.value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%' + const group = new Group({}) + group.addShape({ + type: 'text', + attrs: { + x: 0, + y: 0, + data, + text: value, + textAlign: 'start', + textBaseline: 'top', + fontSize: l.fontSize, + fontFamily: chart.fontFamily, + fill: l.color + } + }) + return group } } return { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts index d2e103ffa4..784fcd68a8 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts @@ -22,6 +22,7 @@ import { import { Datum } from '@antv/g2plot/esm/types/common' import { useI18n } from '@/hooks/web/useI18n' import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart' +import { Group } from '@antv/g-canvas' const { t } = useI18n() const DEFAULT_DATA = [] @@ -170,6 +171,17 @@ export class RangeBar extends G2PlotChartView { const newChart = new BarClass(container, options) newChart.on('interval:click', action) + if (options.label) { + newChart.on('label:click', e => { + action({ + x: e.x, + y: e.y, + data: { + data: e.target.attrs.data + } + }) + }) + } configPlotTooltipEvent(chart, newChart) configAxisLabelLengthLimit(chart, newChart) return newChart @@ -391,7 +403,22 @@ export class RangeBar extends G2PlotChartView { valueFormatter(param.values[1], labelAttr.labelFormatter) } } - return res + const group = new Group({}) + group.addShape({ + type: 'text', + attrs: { + x: 0, + y: 0, + data: param, + text: res, + textAlign: 'start', + textBaseline: 'top', + fontSize: labelAttr.fontSize, + fontFamily: chart.fontFamily, + fill: labelAttr.color + } + }) + return group } } return { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts index ea449732f3..639da81395 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts @@ -14,6 +14,8 @@ import { import { useI18n } from '@/hooks/web/useI18n' import { defaults, isEmpty } from 'lodash-es' import { DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart' +import { type Datum } from '@antv/g2plot/esm' +import { Group } from '@antv/g-canvas' const { t } = useI18n() /** @@ -144,6 +146,17 @@ export class Scatter extends G2PlotChartView { const { Scatter: G2Scatter } = await import('@antv/g2plot/esm/plots/scatter') const newChart = new G2Scatter(container, options) newChart.on('point:click', action) + if (options.label) { + newChart.on('label:click', e => { + action({ + x: e.x, + y: e.y, + data: { + data: e.target.attrs.data + } + }) + }) + } configPlotTooltipEvent(chart, newChart) return newChart } @@ -277,6 +290,41 @@ export class Scatter extends G2PlotChartView { return optionTmp } + protected configLabel(chart: Chart, options: ScatterOptions): ScatterOptions { + const tmpOption = super.configLabel(chart, options) + if (!tmpOption.label) { + return options + } + const { label: labelAttr } = parseJson(chart.customAttr) + tmpOption.label.style.fill = labelAttr.color + const label = { + ...tmpOption.label, + formatter: function (data: Datum) { + const value = valueFormatter(data.value, labelAttr.formatter) + const group = new Group({}) + group.addShape({ + type: 'text', + attrs: { + x: 0, + y: 0, + data, + text: value, + textAlign: 'start', + textBaseline: 'top', + fontSize: labelAttr.fontSize, + fontFamily: chart.fontFamily, + fill: labelAttr.color + } + }) + return group + } + } + return { + ...tmpOption, + label + } + } + protected setupOptions(chart: Chart, options: ScatterOptions) { return flow( this.configTheme,