fix(图表): 修复线面图辅助线导致显示异常

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<G2Chart>): Promise<G2Chart> {
     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 = []
   }
 }
 

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<G2Chart>): Promise<G2Chart> {
     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 = []
   }
 }

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 = {

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
+}