From 99c8bf53c12ea02d794b181d1bda79c41adc3f97 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Tue, 16 Sep 2025 17:31:06 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E7=BA=BF=E9=9D=A2=E5=9B=BE=E8=BE=85=E5=8A=A9=E7=BA=BF=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/g2/line/area.ts | 50 ++++++++++-------- .../js/panel/charts/g2/line/line.ts | 51 +++++++++++-------- .../js/panel/charts/g2/mix/mix-group.ts | 14 +---- .../src/views/chart/components/js/util.ts | 10 ++++ 4 files changed, 71 insertions(+), 54 deletions(-) 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 10009e7592..74494c8f1b 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 @@ -5,10 +5,11 @@ import { getLineLabelColorByCondition, hexColorToRGBA, parseJson, + randomString, setUpGroupSeriesColor, setUpStackSeriesColor } from '@/views/chart/components/js/util' -import { cloneDeep, defaultsDeep, isEmpty } from 'lodash-es' +import { cloneDeep, defaultsDeep, isEmpty, merge } from 'lodash-es' import { valueFormatter } from '@/views/chart/components/js/formatter' import { LINE_AXIS_TYPE, LINE_EDITOR_PROPERTY, LINE_EDITOR_PROPERTY_INNER } from './common' import { useI18n } from '@/hooks/web/useI18n' @@ -16,6 +17,7 @@ import { addExtremumText, extremumEvt } from '@/views/chart/components/js/extrem 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 { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' const { t } = useI18n() const DEFAULT_DATA = [] @@ -74,6 +76,7 @@ export class Area extends G2ChartView { { type: 'point', tooltip: false, zIndex: 2 } ] } + EMPTY_MARKER = () => [] async drawChart(drawOptions: G2DrawOptions): Promise { const { chart, action, container, scale } = drawOptions @@ -480,31 +483,14 @@ export class Area extends G2ChartView { }) chart.data.dynamicAssistLines?.forEach(item => { if (dynamicFields.includes(item.fieldId)) { - lineData.push(item) - } - }) - let max, min - options.data.value.forEach(item => { - const value = item.value - if (value === null || value === undefined) { - return - } - if (max === undefined || value > max) { - max = value - } - if (min === undefined || value < min) { - min = value + lineData.push({ ...item, value: parseFloat(item.value) }) } }) if (lineData.length) { + const randomAssistColorScale = randomString(6) const assistLineMark: G2Spec = { type: 'lineY', - encode: { y: 'value' }, - scale: { - y: { - domain: [min, max] - } - }, + encode: { y: 'value', color: () => randomAssistColorScale }, data: lineData, style: { stroke: d => d.color, @@ -530,6 +516,27 @@ export class Area extends G2ChartView { ] } options.children.push(assistLineMark) + if (options.legend?.color) { + const colorLegend = options.legend.color + if (!Symbols.has('empty')) { + registerSymbol('empty', this.EMPTY_MARKER) + } + const originMarker = colorLegend.itemMarker + merge(colorLegend, { + itemMarker: d => { + if (d === randomAssistColorScale || d.id === randomAssistColorScale) { + return 'empty' + } + return originMarker + }, + itemLabelText: d => { + if (d.id === randomAssistColorScale) { + return '' + } + return d.id + } + }) + } } return options } @@ -667,6 +674,7 @@ export class Area extends G2ChartView { constructor(name = 'area') { super(name, DEFAULT_DATA) + this.EMPTY_MARKER.style = [] } } 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 e4bd2da212..c5874bdd62 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 @@ -5,9 +5,10 @@ import { getLineLabelColorByCondition, hexColorToRGBA, parseJson, + randomString, setUpGroupSeriesColor } from '@/views/chart/components/js/util' -import { cloneDeep, defaultsDeep, isEmpty } from 'lodash-es' +import { cloneDeep, defaultsDeep, isEmpty, merge } from 'lodash-es' import { valueFormatter } from '@/views/chart/components/js/formatter' import { LINE_AXIS_TYPE, LINE_EDITOR_PROPERTY, LINE_EDITOR_PROPERTY_INNER } from './common' import { useI18n } from '@/hooks/web/useI18n' @@ -15,6 +16,7 @@ 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 { extremumEvt, addExtremumText } from '@/views/chart/components/js/extremumUitl' +import { registerSymbol, Symbols } from '@antv/g2/esm/utils/marker' const { t } = useI18n() const DEFAULT_DATA = [] @@ -54,6 +56,8 @@ export class Line extends G2ChartView { } } + EMPTY_MARKER = () => [] + async drawChart(drawOptions: G2DrawOptions): Promise { const { chart, action, container, scale } = drawOptions chart.container = container @@ -553,31 +557,14 @@ export class Line extends G2ChartView { }) chart.data.dynamicAssistLines?.forEach(item => { if (dynamicFields.includes(item.fieldId)) { - lineData.push(item) - } - }) - let max, min - options.data.value.forEach(item => { - const value = item.value - if (value === null || value === undefined) { - return - } - if (max === undefined || value > max) { - max = value - } - if (min === undefined || value < min) { - min = value + lineData.push({ ...item, value: parseFloat(item.value) }) } }) if (lineData.length) { + const randomAssistColorScale = randomString(6) const assistLineMark: G2Spec = { type: 'lineY', - encode: { y: 'value' }, - scale: { - y: { - domain: [min, max] - } - }, + encode: { y: 'value', color: () => randomAssistColorScale }, data: lineData, style: { stroke: d => d.color, @@ -603,6 +590,27 @@ export class Line extends G2ChartView { ] } options.children.push(assistLineMark) + if (options.legend?.color) { + const colorLegend = options.legend.color + if (!Symbols.has('empty')) { + registerSymbol('empty', this.EMPTY_MARKER) + } + const originMarker = colorLegend.itemMarker + merge(colorLegend, { + itemMarker: d => { + if (d === randomAssistColorScale || d.id === randomAssistColorScale) { + return 'empty' + } + return originMarker + }, + itemLabelText: d => { + if (d.id === randomAssistColorScale) { + return '' + } + return d.id + } + }) + } } return options } @@ -740,5 +748,6 @@ export class Line extends G2ChartView { constructor(name = 'line') { super(name, DEFAULT_DATA) + this.EMPTY_MARKER.style = [] } } 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 13f3572a37..df843ba208 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 @@ -1,5 +1,5 @@ import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2' -import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util' +import { flow, hexColorToRGBA, parseJson, randomString } from '@/views/chart/components/js/util' import { cloneDeep, defaultsDeep, isEmpty, merge, random } from 'lodash-es' import { valueFormatter } from '@/views/chart/components/js/formatter' import { useI18n } from '@/hooks/web/useI18n' @@ -748,16 +748,6 @@ export class GroupLineMix extends G2ChartView { return options } - private randomString(length: number): string { - const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' - let result = '' - for (let i = 0; i < length; i++) { - const randomIndex = Math.floor(Math.random() * chars.length) - result += chars[randomIndex] - } - return result - } - protected configAssistLine(chart: Chart, options: G2Spec): G2Spec { const { assistLineCfg } = parseJson(chart.senior) if (!assistLineCfg.enable || !assistLineCfg.assistLine?.length) { @@ -792,7 +782,7 @@ export class GroupLineMix extends G2ChartView { const yAxisExtFormatterCfg = yAxisExt.axisLabelFormatter ?? DEFAULT_YAXIS_STYLE.axisLabelFormatter const view = options.children.find(c => c.key === 'chart') - const randomAssistColorScale = this.randomString(6) + const randomAssistColorScale = randomString(6) splitLineData.forEach((lineData, index) => { if (lineData.length) { const assistLineMark: G2Spec = { diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts index 4974b225b5..3122c69c7d 100644 --- a/core/core-frontend/src/views/chart/components/js/util.ts +++ b/core/core-frontend/src/views/chart/components/js/util.ts @@ -1246,3 +1246,13 @@ export const hexToRgba = (hex, alpha = 1) => { // 返回 RGBA 格式 return `rgba(${r}, ${g}, ${b}, ${a})` } + +export const randomString = (length: number): string => { + const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' + let result = '' + for (let i = 0; i < length; i++) { + const randomIndex = Math.floor(Math.random() * chars.length) + result += chars[randomIndex] + } + return result +}