fix(图表): 修复混合图空值处理无效

2026-06-18 05:18:07 +08:00 · 2025-09-25 16:43:17 +08:00
parent a52c7483db
commit 967b419c0a
4 changed files with 190 additions and 12 deletions
--- 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
@@ -1,5 +1,12 @@
 import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2'
-import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
+import {
+  flow,
+  handleBreakLineMultiDimension,
+  handleSetZeroMultiDimension,
+  handleSetZeroSingleDimension,
+  hexColorToRGBA,
+  parseJson
+} from '@/views/chart/components/js/util'
 import { cloneDeep, defaultsDeep, isEmpty, merge } from 'lodash-es'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -153,6 +160,9 @@ export class GroupLineMix extends G2ChartView {
                  key: 'left'
                }
              },
+              style: {
+                stroke: 'white'
+              },
              tooltip: false
            },
            {
@@ -192,6 +202,9 @@ export class GroupLineMix extends G2ChartView {
                  key: 'right'
                }
              },
+              style: {
+                stroke: 'white'
+              },
              tooltip: false
            }
          ]
@@ -283,7 +296,7 @@ export class GroupLineMix extends G2ChartView {
        opacity: basicStyle.leftLineSymbolSize === 0 ? 0 : 1,
        fillOpacity: basicStyle.leftLineSymbolSize === 0 ? 0 : 1,
        strokeOpacity: basicStyle.leftLineSymbolSize === 0 ? 0 : 1,
-        lineWidth: 0
+        lineWidth: basicStyle.leftLineSymbolSize === 0 ? 0 : 1
      }
    })
    const rightCat = []
@@ -354,7 +367,7 @@ export class GroupLineMix extends G2ChartView {
        opacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        fillOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        strokeOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
-        lineWidth: 0
+        lineWidth: basicStyle.lineSymbolSize === 0 ? 0 : 1
      }
    })
    return options
@@ -959,8 +972,49 @@ export class GroupLineMix extends G2ChartView {
    return result
  }

+  protected configEmptyDataStrategy(chart: Chart, options: G2Spec): G2Spec {
+    const { functionCfg } = parseJson(chart.senior)
+    const { emptyDataStrategy } = functionCfg
+    const [leftLineMark, _, rightLineMark] = options.children[0].children
+    const leftData = leftLineMark.data?.value || []
+    const rightData = rightLineMark.data || []
+    const leftMultiDimension = chart.xAxisExt?.length > 0
+    const rightMultiDimension = chart.extBubble?.length > 0
+    switch (emptyDataStrategy) {
+      case 'breakLine': {
+        if (leftMultiDimension) {
+          handleBreakLineMultiDimension(leftData)
+          merge(leftLineMark, { style: { connect: false } })
+        }
+        if (rightMultiDimension) {
+          handleBreakLineMultiDimension(rightData)
+          merge(rightLineMark, { style: { connect: false } })
+        }
+        break
+      }
+      case 'setZero': {
+        if (leftMultiDimension) {
+          // 多维度置0
+          handleSetZeroMultiDimension(leftData)
+        } else {
+          // 单维度置0
+          handleSetZeroSingleDimension(leftData)
+        }
+        if (rightMultiDimension) {
+          // 多维度置0
+          handleSetZeroMultiDimension(rightData)
+        } else {
+          // 单维度置0
+          handleSetZeroSingleDimension(rightData)
+        }
+        break
+      }
+    }
+    return options
+  }
  protected setupOptions(chart: Chart, options: G2Spec, context: Record<string, any>): G2Spec {
    return flow(
+      this.configEmptyDataStrategy,
      this.configBasicStyle,
      this.configLegend,
      this.configLabel,
--- 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,13 @@
 import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2'
-import { flow, hexColorToRGBA, parseJson, randomString } from '@/views/chart/components/js/util'
+import {
+  flow,
+  handleBreakLineMultiDimension,
+  handleSetZeroMultiDimension,
+  handleSetZeroSingleDimension,
+  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'
@@ -174,6 +182,9 @@ export class GroupLineMix extends G2ChartView {
                  key: 'right'
                }
              },
+              style: {
+                stroke: 'white'
+              },
              tooltip: false
            }
          ]
@@ -344,7 +355,7 @@ export class GroupLineMix extends G2ChartView {
        opacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        fillOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        strokeOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
-        lineWidth: 0
+        lineWidth: basicStyle.lineSymbolSize === 0 ? 0 : 1
      }
    })
    return options
@@ -861,7 +872,7 @@ export class GroupLineMix extends G2ChartView {
  }

  public setupDefaultOptions(chart: ChartObj): ChartObj {
-    const { customAttr, senior } = chart
+    const { senior } = chart
    if (
      senior.functionCfg.emptyDataStrategy == undefined ||
      senior.functionCfg.emptyDataStrategy === 'ignoreData'
@@ -937,8 +948,39 @@ export class GroupLineMix extends G2ChartView {
    return result
  }

+  protected configEmptyDataStrategy(chart: Chart, options: G2Spec): G2Spec {
+    const { functionCfg } = parseJson(chart.senior)
+    const { emptyDataStrategy } = functionCfg
+    const [intervalMark, lineMark] = options.children[0].children
+    const leftData = intervalMark.data?.value || []
+    const rightData = lineMark.data || []
+    const multiDimension = chart.extBubble?.length > 0
+    switch (emptyDataStrategy) {
+      case 'breakLine': {
+        if (multiDimension) {
+          handleBreakLineMultiDimension(rightData)
+        }
+        merge(lineMark, { style: { connect: false } })
+        break
+      }
+      case 'setZero': {
+        if (multiDimension) {
+          // 多维度置0
+          handleSetZeroMultiDimension(rightData)
+        } else {
+          // 单维度置0
+          handleSetZeroSingleDimension(rightData)
+        }
+        handleSetZeroSingleDimension(leftData)
+        break
+      }
+    }
+    return options
+  }
+
  protected setupOptions(chart: Chart, options: G2Spec, context: Record<string, any>): G2Spec {
    return flow(
+      this.configEmptyDataStrategy,
      this.configBasicStyle,
      this.configLegend,
      this.configLabel,
--- 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
@@ -1,5 +1,12 @@
 import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2'
-import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
+import {
+  flow,
+  handleBreakLineMultiDimension,
+  handleSetZeroMultiDimension,
+  handleSetZeroSingleDimension,
+  hexColorToRGBA,
+  parseJson
+} 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'
@@ -173,6 +180,9 @@ export class StackLineMix extends G2ChartView {
                  key: 'right'
                }
              },
+              style: {
+                stroke: 'white'
+              },
              tooltip: false
            }
          ]
@@ -343,7 +353,7 @@ export class StackLineMix extends G2ChartView {
        opacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        fillOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        strokeOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
-        lineWidth: 0
+        lineWidth: basicStyle.lineSymbolSize === 0 ? 0 : 1
      }
    })
    return options
@@ -870,7 +880,7 @@ export class StackLineMix extends G2ChartView {
  }

  public setupDefaultOptions(chart: ChartObj): ChartObj {
-    const { customAttr, senior } = chart
+    const { senior } = chart
    if (
      senior.functionCfg.emptyDataStrategy == undefined ||
      senior.functionCfg.emptyDataStrategy === 'ignoreData'
@@ -946,8 +956,39 @@ export class StackLineMix extends G2ChartView {
    return result
  }

+  protected configEmptyDataStrategy(chart: Chart, options: G2Spec): G2Spec {
+    const { functionCfg } = parseJson(chart.senior)
+    const { emptyDataStrategy } = functionCfg
+    const [intervalMark, lineMark] = options.children[0].children
+    const leftData = intervalMark.data?.value || []
+    const rightData = lineMark.data || []
+    const multiDimension = chart.extBubble?.length > 0
+    switch (emptyDataStrategy) {
+      case 'breakLine': {
+        if (multiDimension) {
+          handleBreakLineMultiDimension(rightData)
+        }
+        merge(lineMark, { style: { connect: false } })
+        break
+      }
+      case 'setZero': {
+        if (multiDimension) {
+          // 多维度置0
+          handleSetZeroMultiDimension(rightData)
+        } else {
+          // 单维度置0
+          handleSetZeroSingleDimension(rightData)
+        }
+        handleSetZeroSingleDimension(leftData)
+        break
+      }
+    }
+    return options
+  }
+
  protected setupOptions(chart: Chart, options: G2Spec, context: Record<string, any>): G2Spec {
    return flow(
+      this.configEmptyDataStrategy,
      this.configBasicStyle,
      this.configLegend,
      this.configLabel,
--- 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
@@ -1,5 +1,12 @@
 import { G2ChartView, G2DrawOptions } from '../../../types/impl/g2'
-import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
+import {
+  flow,
+  handleBreakLineMultiDimension,
+  handleSetZeroMultiDimension,
+  handleSetZeroSingleDimension,
+  hexColorToRGBA,
+  parseJson
+} from '@/views/chart/components/js/util'
 import { cloneDeep, defaultsDeep, isEmpty, merge } from 'lodash-es'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -154,6 +161,9 @@ export class ColumnLineMix extends G2ChartView {
              key: 'right'
            }
          },
+          style: {
+            stroke: 'white'
+          },
          tooltip: false
        }
      ]
@@ -262,7 +272,7 @@ export class ColumnLineMix extends G2ChartView {
        opacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        fillOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
        strokeOpacity: basicStyle.lineSymbolSize === 0 ? 0 : 1,
-        lineWidth: 0
+        lineWidth: basicStyle.lineSymbolSize === 0 ? 0 : 1
      }
    })
    return options
@@ -673,7 +683,7 @@ export class ColumnLineMix extends G2ChartView {
  }

  public setupDefaultOptions(chart: ChartObj): ChartObj {
-    const { customAttr, senior } = chart
+    const { senior } = chart
    if (
      senior.functionCfg.emptyDataStrategy == undefined ||
      senior.functionCfg.emptyDataStrategy === 'ignoreData'
@@ -716,8 +726,39 @@ export class ColumnLineMix extends G2ChartView {
    return result
  }

+  protected configEmptyDataStrategy(chart: Chart, options: G2Spec): G2Spec {
+    const { functionCfg } = parseJson(chart.senior)
+    const { emptyDataStrategy } = functionCfg
+    const [intervalMark, lineMark] = options.children
+    const leftData = intervalMark.data?.value || []
+    const rightData = lineMark.data || []
+    const multiDimension = chart.extBubble?.length > 0
+    switch (emptyDataStrategy) {
+      case 'breakLine': {
+        if (multiDimension) {
+          handleBreakLineMultiDimension(rightData)
+        }
+        merge(lineMark, { style: { connect: false } })
+        break
+      }
+      case 'setZero': {
+        if (multiDimension) {
+          // 多维度置0
+          handleSetZeroMultiDimension(rightData)
+        } else {
+          // 单维度置0
+          handleSetZeroSingleDimension(rightData)
+        }
+        handleSetZeroSingleDimension(leftData)
+        break
+      }
+    }
+    return options
+  }
+
  protected setupOptions(chart: Chart, options: G2Spec, context: Record<string, any>): G2Spec {
    return flow(
+      this.configEmptyDataStrategy,
      this.configBasicStyle,
      this.configLegend,
      this.configLabel,