diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue index be2a4bb9f6..2a5990a9b2 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue @@ -346,8 +346,8 @@ watch( v-if="showProperties('label-selector')" v-model="chart.customAttr.label.show" :change-model="chart.customAttr.label" - @modelChange="val => onLabelChange(val, 'show')" - :title="$t('chart.label')" + @modelChange="val => onLabelChange({ data: val }, 'show')" + :title="t('chart.label')" name="label" > { } const onLabelChange = (val, prop) => { - batchOptChange('customAttr', 'label', val, prop) + batchOptChange('customAttr', 'label', val.data, prop) } const onTooltipChange = (val, prop) => { batchOptChange('customAttr', 'tooltip', val.data, prop) 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 993b5c3065..855ed8f04a 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 @@ -84,6 +84,7 @@ const initSeriesLabel = () => { curSeriesFormatter.value = {} return } + let initFlag = false const axisMap = yAxis.value.reduce((pre, next) => { let tmp = { ...next, @@ -101,14 +102,16 @@ const initSeriesLabel = () => { fontSize: seriesAxisMap[next.id].fontSize, showExtremum: seriesAxisMap[next.id].showExtremum } + } else { + initFlag = true } formatter.push(tmp) pre[next.id] = tmp return pre }, {}) // 初始化一下序列数组,用于主题适配 - if (!props.chart.customAttr.label.seriesLabelFormatter?.length) { - changeLabelAttr('seriesLabelFormatter') + if (initFlag) { + changeLabelAttr('seriesLabelFormatter', false) } if (!curSeriesFormatter.value || !axisMap[curSeriesFormatter.value.id]) { curSeriesFormatter.value = axisMap[formatter[0].id] @@ -170,8 +173,8 @@ const state = reactive<{ labelForm: ChartLabelAttr | any }>({ }) const emit = defineEmits(['onLabelChange']) -const changeLabelAttr = prop => { - emit('onLabelChange', state.labelForm, prop) +const changeLabelAttr = (prop: string, render = true) => { + emit('onLabelChange', { data: state.labelForm, render }, prop) } const init = () => { diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue index 22daf42a6a..9339bc4ffd 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -904,9 +904,22 @@ const onMiscChange = val => { } } -const onLabelChange = val => { - view.value.customAttr.label = val - renderChart(view.value) +const onLabelChange = (chartForm: ChartEditorForm, prop: string) => { + const { data, requestData, render } = chartForm + let labelObj = data + if (!data) { + labelObj = chartForm as unknown as ChartLabelAttr + } + if (prop) { + const val = get(labelObj, prop) + set(view.value.customAttr.label, prop, val) + } else { + view.value.customAttr.label = labelObj + } + // for compatibility + if (render !== false) { + renderChart(view.value) + } } const onIndicatorChange = (val, prop) => {