Merge pull request #11091 from dataease/pr@dev-v2@refactor_chart_series_label_font_color

refactor(图表): 多系列标签字体颜色适配主题

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')"
+            @modelChange="val => onLabelChange({ data: val }, 'show')"
-            :title="$t('chart.label')"
+            :title="t('chart.label')"
             name="label"
           >
             <label-selector
@@ -364,7 +364,7 @@ watch(
             v-model="chart.customAttr.tooltip.show"
             :themes="themes"
             :change-model="chart.customAttr.tooltip"
-            :title="$t('chart.tooltip')"
+            :title="t('chart.tooltip')"
             :show-switch="propertyInnerAll['tooltip-selector'].includes('show')"
             name="tooltip"
             @modelChange="val => onTooltipChange({ data: val }, 'show')"

core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue

@@ -65,7 +65,7 @@ const onMiscChange = (val, prop) => {
 }
 
 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)

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) {
+  if (initFlag) {
-    changeLabelAttr('seriesLabelFormatter')
+    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 => {
+const changeLabelAttr = (prop: string, render = true) => {
-  emit('onLabelChange', state.labelForm, prop)
+  emit('onLabelChange', { data: state.labelForm, render }, prop)
 }
 
 const init = () => {

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -904,9 +904,22 @@ const onMiscChange = val => {
   }
 }
 
-const onLabelChange = val => {
+const onLabelChange = (chartForm: ChartEditorForm<ChartLabelAttr>, prop: string) => {
-  view.value.customAttr.label = val
+  const { data, requestData, render } = chartForm
-  renderChart(view.value)
+  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) => {