From c3baf983fc13901633df8baf9c9ce2b4e040ff74 Mon Sep 17 00:00:00 2001 From: ulleo Date: Wed, 31 Jul 2024 16:41:32 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=8F=8C=E8=BD=B4=E5=9B=BE=E5=B7=A6=E5=8F=B3=E8=BD=B4=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E7=9B=B8=E5=90=8C=E6=8C=87=E6=A0=87=E6=98=AF=EF=BC=8C?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=85=8D=E7=BD=AE=E4=B8=8D=E8=83=BD=E5=88=86?= =?UTF-8?q?=E5=88=AB=E9=85=8D=E7=BD=AE=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #10841 --- .../core-frontend/src/models/chart/chart.d.ts | 3 + .../editor-style/components/LabelSelector.vue | 100 ++++++++++++------ .../js/panel/charts/others/chart-mix.ts | 94 +++++++++------- 3 files changed, 127 insertions(+), 70 deletions(-) diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts index 071d1470af..8d65b4bec5 100644 --- a/core/core-frontend/src/models/chart/chart.d.ts +++ b/core/core-frontend/src/models/chart/chart.d.ts @@ -134,6 +134,9 @@ declare interface SeriesFormatter extends Axis { * 显示极值 */ showExtremum?: boolean + + optionLabel?: string + optionShowName?: string } declare interface Axis extends ChartViewField { diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue index ba2fdc43e1..1748929e71 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue @@ -4,7 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { COLOR_PANEL, DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart' import { ElIcon, ElSpace } from 'element-plus-secondary' import { formatterType, unitType } from '../../../js/formatter' -import { defaultsDeep, cloneDeep, intersection, union, defaultTo } from 'lodash-es' +import { defaultsDeep, cloneDeep, intersection, union, defaultTo, map } from 'lodash-es' import { includesAny } from '../../util/StringUtils' import { fieldType } from '@/utils/attr' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' @@ -51,18 +51,44 @@ const changeDataset = () => { } const { batchOptStatus } = storeToRefs(dvMainStore) watch( - () => props.chart.customAttr.label, + [() => props.chart.customAttr.label, () => props.chart.customAttr.label.show], () => { init() }, - { deep: true } + { deep: false } ) const yAxis = computed(() => { - return union(defaultTo(props.chart.yAxis, []), defaultTo(props.chart.yAxisExt, [])) + if (props.chart.type.includes('chart-mix')) { + return union( + defaultTo( + map(props.chart.yAxis, y => { + return { ...y, axisType: 'yAxis', seriesId: y.id + '-yAxis' } + }), + [] + ), + defaultTo( + map(props.chart.yAxisExt, y => { + return { ...y, axisType: 'yAxisExt', seriesId: y.id + '-yAxisExt' } + }), + [] + ) + ) + } else { + return defaultTo( + map(props.chart.yAxis, y => { + return { ...y, axisType: 'yAxis', seriesId: y.id + '-yAxis' } + }), + [] + ) + } +}) + +const yAxisIds = computed(() => { + return map(yAxis.value, y => y.seriesId) }) watch( - [() => yAxis.value, () => props.chart.type], + [() => yAxisIds.value, () => props.chart.type], () => { initSeriesLabel() }, @@ -94,14 +120,34 @@ const initSeriesLabel = () => { let initFlag = false const themeColor = dvMainStore.canvasStyleData.dashboard.themeColor const axisMap = yAxis.value.reduce((pre, next) => { + const optionLabel: string = `${next.chartShowName ?? next.name}${ + next.summary !== '' ? '(' + t('chart.' + next.summary) + ')' : '' + }${ + props.chart.type.includes('chart-mix') + ? next.axisType === 'yAxis' + ? '(左轴)' + : '(右轴)' + : '' + }` as string + const optionShowName: string = `${next.chartShowName ?? next.name}${ + next.summary !== '' ? '(' + t('chart.' + next.summary) + ')' : '' + }${ + props.chart.type.includes('chart-mix') + ? next.axisType === 'yAxis' + ? '(左轴)' + : '(右轴)' + : '' + }` as string let tmp = { ...next, + optionLabel: optionLabel, + optionShowName: optionShowName, show: true, color: themeColor === 'dark' ? '#fff' : '#000', fontSize: COMPUTED_DEFAULT_LABEL.value.fontSize, showExtremum: false } as SeriesFormatter - if (seriesAxisMap[next.id]) { + if (seriesAxisMap[next.seriesId]) { tmp = { ...tmp, formatterCfg: seriesAxisMap[next.id].formatterCfg, @@ -114,18 +160,19 @@ const initSeriesLabel = () => { initFlag = true } formatter.push(tmp) - pre[next.id] = tmp + next.seriesId = next.seriesId ?? next.id + pre[next.seriesId] = tmp return pre }, {}) // 初始化一下序列数组，用于主题适配 if (initFlag) { changeLabelAttr('seriesLabelFormatter', false) } - if (!curSeriesFormatter.value || !axisMap[curSeriesFormatter.value.id]) { - curSeriesFormatter.value = axisMap[formatter[0].id] + if (!curSeriesFormatter.value || !axisMap[curSeriesFormatter.value.seriesId]) { + curSeriesFormatter.value = axisMap[formatter[0].seriesId] return } - curSeriesFormatter.value = axisMap[curSeriesFormatter.value.id] + curSeriesFormatter.value = axisMap[curSeriesFormatter.value.seriesId] } const labelPositionR = [ @@ -785,36 +832,29 @@ const isGroupBar = computed(() => { :teleported="false" :disabled="!formatterEditable" ref="formatterSelector" - value-key="id" + value-key="seriesId" class="series-select" size="small" > - - - - - {{ item.chartShowName ?? item.name }} - {{ item.summary !== '' ? '(' + t('chart.' + item.summary) + ')' : '' }} - +