From 522081b03099a0faa2c90d7dcd2de0e9151d1e29 Mon Sep 17 00:00:00 2001 From: ulleo Date: Tue, 26 Nov 2024 16:32:22 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF=EF=BC=8C?= =?UTF-8?q?=E5=A4=A7=E5=B1=8F):=20=E5=A2=9E=E5=8A=A0=E5=9B=BE=E4=BE=8B?= =?UTF-8?q?=E4=B8=AD=E5=9B=BE=E6=A0=87=E7=9A=84=E5=A4=A7=E5=B0=8F=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #12114 --- .../src/models/chart/chart-style.d.ts | 1 + core/core-frontend/src/utils/sizeAdaptor.ts | 2 +- .../components/LegendSelector.vue | 74 ++++++++++++++----- .../chart/components/editor/util/chart.ts | 6 +- .../components/js/panel/charts/line/line.ts | 16 +++- .../js/panel/charts/others/chart-mix.ts | 25 ++++++- .../js/panel/charts/others/quadrant.ts | 12 ++- .../js/panel/charts/others/radar.ts | 12 ++- .../js/panel/charts/others/scatter.ts | 12 ++- .../components/js/panel/common/common_antv.ts | 11 ++- 10 files changed, 131 insertions(+), 40 deletions(-) diff --git a/core/core-frontend/src/models/chart/chart-style.d.ts b/core/core-frontend/src/models/chart/chart-style.d.ts index 44aca1b55f..d5ca0c820d 100644 --- 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 } /** diff --git a/core/core-frontend/src/utils/sizeAdaptor.ts b/core/core-frontend/src/utils/sizeAdaptor.ts index 250dc6b7f8..a54f210c0c 100644 --- 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'], diff --git 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 index fc8f8845ab..cb00e5d8fa 100644 --- 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" > - - - - - + + + + + + + + + + + + + + + + + + { 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 { diff --git 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 index e573c0dc5b..3846e06c7c 100644 --- 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 { } } } - 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 } } diff --git 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 index d755dcfdbd..22aed77516 100644 --- 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 { 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 } } diff --git 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 index a89771c516..4580c1f634 100644 --- 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 { 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 } } 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 c9be7c9522..9eda92c8b3 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 @@ -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 { 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 } } diff --git 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 index 63543558bf..1a7ce94e0b 100644 --- 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: {