Merge pull request #13570 from ulleo/dev-v2

feat(仪表板，大屏): 增加图例中图标的大小设置项
2025-02-24 19:42:56 +08:00 · 2024-11-26 16:34:04 +08:00 · 2024-11-26 16:34:04 +08:00 · f1463d94e1
commit f1463d94e1
parent 56b69c378b 522081b030
10 changed files with 131 additions and 40 deletions
--- a/core/core-frontend/src/models/chart/chart-style.d.ts
+++ b/core/core-frontend/src/models/chart/chart-style.d.ts
@ -122,6 +122,7 @@ declare interface ChartLegendStyle {
   * 字体大小
   */
  fontSize: number
+  size: number
 }

 /**
--- a/core/core-frontend/src/utils/sizeAdaptor.ts
+++ b/core/core-frontend/src/utils/sizeAdaptor.ts
@ -29,7 +29,7 @@ export const customAttrTrans = {
 export const customStyleTrans = {
  text: ['fontSize'],
  legend: {
-    textStyle: ['fontSize']
+    textStyle: ['fontSize', 'size']
  },
  xAxis: {
    nameTextStyle: ['fontSize'],
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
@ -74,6 +74,17 @@ const fontSizeList = computed(() => {
  return arr
 })

+const sizeList = computed(() => {
+  const arr = []
+  for (let i = 4; i <= 20; i = i + 2) {
+    arr.push({
+      name: i + '',
+      value: i
+    })
+  }
+  return arr
+})
+
 const changeLegendStyle = prop => {
  emit('onLegendChange', state.legendForm, prop)
 }
@ -219,26 +230,49 @@ onMounted(() => {
    :model="state.legendForm"
    label-position="top"
  >
-    <el-form-item
-      :label="t('chart.icon')"
-      class="form-item"
-      :class="'form-item-' + themes"
-      v-if="showProperty('icon')"
-    >
-      <el-select
-        :effect="themes"
-        v-model="state.legendForm.icon"
-        :placeholder="t('chart.icon')"
-        @change="changeLegendStyle('icon')"
-      >
-        <el-option
-          v-for="item in iconSymbolOptions"
-          :key="item.value"
-          :label="item.name"
-          :value="item.value"
-        />
-      </el-select>
-    </el-form-item>
+    <el-row :gutter="8">
+      <el-col :span="12">
+        <el-form-item
+          :label="t('chart.icon')"
+          class="form-item"
+          :class="'form-item-' + themes"
+          v-if="showProperty('icon')"
+        >
+          <el-select
+            :effect="themes"
+            v-model="state.legendForm.icon"
+            :placeholder="t('chart.icon')"
+            @change="changeLegendStyle('icon')"
+          >
+            <el-option
+              v-for="item in iconSymbolOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('icon')">
+          <template #label>&nbsp;</template>
+          <el-select
+            :effect="themes"
+            v-model="state.legendForm.size"
+            size="small"
+            @change="changeLegendStyle('size')"
+          >
+            <el-option
+              v-for="option in sizeList"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>

    <el-space>
      <el-form-item
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@ -529,7 +529,8 @@ export const DEFAULT_LEGEND_STYLE: ChartLegendStyle = {
  orient: 'horizontal',
  icon: 'circle',
  color: '#333333',
-  fontSize: 12
+  fontSize: 12,
+  size: 4
 }

 export const DEFAULT_LEGEND_STYLE_BASE: ChartLegendStyle = {
@ -539,7 +540,8 @@ export const DEFAULT_LEGEND_STYLE_BASE: ChartLegendStyle = {
  orient: 'horizontal',
  icon: 'circle',
  color: '#333333',
-  fontSize: 12
+  fontSize: 12,
+  size: 4
 }

 export const DEFAULT_LEGEND_STYLE_LIGHT: ChartLegendStyle = {
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts
@ -17,7 +17,7 @@ import {
  parseJson,
  setUpGroupSeriesColor
 } from '@/views/chart/components/js/util'
-import { cloneDeep, isEmpty } from 'lodash-es'
+import { cloneDeep, defaults, isEmpty } from 'lodash-es'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import {
  LINE_AXIS_TYPE,
@ -26,7 +26,7 @@ import {
 } from '@/views/chart/components/js/panel/charts/line/common'
 import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
-import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
+import { DEFAULT_LABEL, DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart'
 import { clearExtremum, extremumEvt } from '@/views/chart/components/js/extremumUitl'
 import { Group } from '@antv/g-canvas'

@ -343,12 +343,22 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
        legend
      }
    }
+
+    const customStyle = parseJson(chart.customStyle)
+    let size
+    if (customStyle && customStyle.legend) {
+      size = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE).size
+    } else {
+      size = DEFAULT_LEGEND_STYLE.size
+    }
+
    optionTmp.legend.marker.style = style => {
      return {
-        r: 4,
+        r: size,
        fill: style.stroke
      }
    }
+    console.log(optionTmp)
    return optionTmp
  }
  protected setupOptions(chart: Chart, options: LineOptions): LineOptions {
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
@ -15,7 +15,16 @@ import {
  TOOLTIP_TPL
 } from '../../common/common_antv'
 import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
-import { cloneDeep, isEmpty, defaultTo, map, filter, union, defaultsDeep } from 'lodash-es'
+import {
+  cloneDeep,
+  isEmpty,
+  defaultTo,
+  map,
+  filter,
+  union,
+  defaultsDeep,
+  defaults
+} from 'lodash-es'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import {
  CHART_MIX_AXIS_TYPE,
@ -26,7 +35,7 @@ import {
 } from './chart-mix-common'
 import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
-import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
+import { DEFAULT_LABEL, DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart'
 import type { Options } from '@antv/g2plot/esm'
 import { Group } from '@antv/g-canvas'

@ -580,11 +589,19 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
          }
        }
      }
-      const size = Math.sqrt(o.legend.pageNavigator?.text?.style?.fontSize ?? 16)
+
+      const customStyle = parseJson(chart.customStyle)
+      let size
+      if (customStyle && customStyle.legend) {
+        size = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE).size
+      } else {
+        size = DEFAULT_LEGEND_STYLE.size
+      }
+
      o.legend.marker.style = style => {
        const fill = style.fill ?? style.stroke
        return {
-          r: size < 4 ? 4 : size,
+          r: size,
          fill
        }
      }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts
@ -6,9 +6,10 @@ import type { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plot
 import { flow, parseJson, setUpSingleDimensionSeriesColor } from '../../../util'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { useI18n } from '@/hooks/web/useI18n'
-import { isEmpty, map } from 'lodash-es'
+import { defaults, isEmpty, map } from 'lodash-es'
 import { cloneDeep, defaultTo } from 'lodash-es'
 import { configPlotTooltipEvent, getTooltipContainer, TOOLTIP_TPL } from '../../common/common_antv'
+import { DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart'

 const { t } = useI18n()
 /**
@ -434,9 +435,16 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
    if (!optionTmp.legend) {
      return optionTmp
    }
+    const customStyle = parseJson(chart.customStyle)
+    let size
+    if (customStyle && customStyle.legend) {
+      size = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE).size
+    } else {
+      size = DEFAULT_LEGEND_STYLE.size
+    }
    optionTmp.legend.marker.style = style => {
      return {
-        r: 4,
+        r: size,
        fill: style.fill
      }
    }
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts
@ -5,8 +5,9 @@ import { configPlotTooltipEvent, getPadding } from '../../common/common_antv'
 import { valueFormatter } from '../../../formatter'
 import type { Datum } from '@antv/g2plot/esm/types/common'
 import { useI18n } from '@/hooks/web/useI18n'
-import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart'
+import { DEFAULT_LABEL, DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart'
 import { Group } from '@antv/g-canvas'
+import { defaults } from 'lodash-es'

 const { t } = useI18n()

@ -242,9 +243,16 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
    if (!optionTmp.legend) {
      return optionTmp
    }
+    const customStyle = parseJson(chart.customStyle)
+    let size
+    if (customStyle && customStyle.legend) {
+      size = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE).size
+    } else {
+      size = DEFAULT_LEGEND_STYLE.size
+    }
    optionTmp.legend.marker.style = style => {
      return {
-        r: 4,
+        r: size,
        fill: style.stroke
      }
    }
--- 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
@ -12,7 +12,8 @@ import {
  TOOLTIP_TPL
 } from '../../common/common_antv'
 import { useI18n } from '@/hooks/web/useI18n'
-import { isEmpty } from 'lodash-es'
+import { defaults, isEmpty } from 'lodash-es'
+import { DEFAULT_LEGEND_STYLE } from '@/views/chart/components/editor/util/chart'

 const { t } = useI18n()
 /**
@ -255,9 +256,16 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
    if (!optionTmp.legend) {
      return optionTmp
    }
+    const customStyle = parseJson(chart.customStyle)
+    let size
+    if (customStyle && customStyle.legend) {
+      size = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE).size
+    } else {
+      size = DEFAULT_LEGEND_STYLE.size
+    }
    optionTmp.legend.marker.style = style => {
      return {
-        r: 4,
+        r: size,
        fill: style.fill
      }
    }
--- 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
@ -1,6 +1,7 @@
 import { hexColorToRGBA, isAlphaColor, isTransparent, parseJson } from '../../util'
 import {
  DEFAULT_BASIC_STYLE,
+  DEFAULT_LEGEND_STYLE,
  DEFAULT_XAXIS_STYLE,
  DEFAULT_YAXIS_EXT_STYLE,
  DEFAULT_YAXIS_STYLE
@ -32,6 +33,7 @@ import { PositionType } from '@antv/l7-core'
 import { centroid } from '@turf/centroid'
 import type { Plot } from '@antv/g2plot'
 import type { PickOptions } from '@antv/g2plot/lib/core/plot'
+import { defaults } from 'lodash-es'

 export function getPadding(chart: Chart): number[] {
  if (chart.drill) {
@ -281,7 +283,7 @@ export function getLegend(chart: Chart) {
    customStyle = parseJson(chart.customStyle)
    // legend
    if (customStyle.legend) {
-      const l = JSON.parse(JSON.stringify(customStyle.legend))
+      const l = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE)
      if (l.show) {
        let offsetX, offsetY, position
        const orient = l.orient
@ -345,16 +347,17 @@ export function getLegend(chart: Chart) {
          marker: {
            symbol: legendSymbol,
            style: {
-              r: 4
+              r: l.size
            }
          },
-          itemHeight: l.fontSize + 4,
+          itemHeight: (l.fontSize > l.size * 2 ? l.fontSize : l.size * 2) + 4,
          radio: false,
          pageNavigator: {
            marker: {
              style: {
                fill: 'rgba(0,0,0,0.65)',
-                stroke: 'rgba(192,192,192,0.52)'
+                stroke: 'rgba(192,192,192,0.52)',
+                size: l.size * 2
              }
            },
            text: {