Merge pull request #9920 from dataease/pr@dev-v2@fix_multi_series_tooltip

fix(图表): 多系列提示显示错误

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

@@ -7,12 +7,11 @@ import cloneDeep from 'lodash-es/cloneDeep'
 import defaultsDeep from 'lodash-es/defaultsDeep'
 import { formatterType, unitType } from '../../../js/formatter'
 import { fieldType } from '@/utils/attr'
-import { partition, uniqWith, isEqual } from 'lodash-es'
+import { partition } from 'lodash-es'
 import chartViewManager from '../../../js/panel'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { useEmitt } from '@/hooks/web/useEmitt'
-import { deepCopy } from '@/utils/utils'
 
 const { t } = useI18n()
 
@@ -41,55 +40,54 @@ const quotaData = ref<Axis[]>(inject('quotaData'))
 const showSeriesTooltipFormatter = computed(() => {
   return showProperty('seriesTooltipFormatter') && !batchOptStatus.value && props.chart.id
 })
-// 初始化系列提示
+// 切换图表类型直接重置为默认
-const initSeriesTooltip = () => {
+const changeChartType = () => {
   if (!showSeriesTooltipFormatter.value) {
     return
   }
+  curSeriesFormatter.value = {}
   const formatter = state.tooltipForm.seriesTooltipFormatter
-  const seriesAxisMap = formatter.reduce((pre, next) => {
-    next.seriesId = next.seriesId ?? next.id
-    pre[next.seriesId] = next
-    return pre
-  }, {})
-  // 新增图表
-  if (!quotaAxis.value?.length) {
-    if (!formatter.length) {
-      quotaData.value?.forEach(i => formatter.push({ ...i, seriesId: i.id, show: false }))
-    }
-    curSeriesFormatter.value = {}
-    return
-  }
   formatter.splice(0, formatter.length)
-  const axisIds = quotaAxis.value?.map(i => i.id)
+  const axisIds = []
-  const allQuotaAxis = quotaAxis.value?.concat(
+  quotaAxis.value.forEach(axis => {
-    quotaData.value?.filter(ele => !axisIds.includes(ele.id))
+    formatter.push({
-  )
+      ...axis,
-  const axisMap = allQuotaAxis.reduce((pre, next, index) => {
+      show: true
-    let tmp = {
+    })
-      ...next,
+    axisIds.push(axis.id)
-      seriesId: next.seriesId ?? next.id,
+  })
-      show: index <= quotaAxis.value.length - 1,
+  quotaData.value.forEach(quotaAxis => {
-      summary: COUNT_DE_TYPE.includes(next.deType) ? 'count' : 'sum'
+    if (!axisIds.includes(quotaAxis.id)) {
-    } as SeriesFormatter
+      formatter.push({
-    if (seriesAxisMap[tmp.seriesId]) {
+        ...quotaAxis,
-      tmp = {
+        seriesId: quotaAxis.id,
-        ...tmp,
+        show: false
-        formatterCfg: seriesAxisMap[tmp.seriesId].formatterCfg,
+      })
-        show: seriesAxisMap[tmp.seriesId].show,
+    }
-        summary: seriesAxisMap[tmp.seriesId].summary,
+  })
-        chartShowName: seriesAxisMap[tmp.seriesId].chartShowName
+  emit('onTooltipChange', { data: state.tooltipForm, render: false }, 'seriesTooltipFormatter')
-      }
+  emit('onExtTooltipChange', extTooltip.value)
+}
+// 切换数据集
+const changeDataset = () => {
+  curSeriesFormatter.value = {}
+  const formatter = state.tooltipForm.seriesTooltipFormatter
+  const quotaIds = quotaData.value.map(i => i.id)
+  for (let i = formatter.length - 1; i >= 0; i--) {
+    if (!quotaIds.includes(formatter[i].id)) {
+      formatter.splice(i, 1)
     }
-    formatter.push(tmp)
-    pre[tmp.seriesId] = tmp
-    return pre
-  }, {})
-  if (!curSeriesFormatter.value || !axisMap[curSeriesFormatter.value.seriesId]) {
-    curSeriesFormatter.value = axisMap[formatter[0].seriesId]
-    return
   }
-  curSeriesFormatter.value = axisMap[curSeriesFormatter.value.seriesId]
+  const formatterIds = formatter.map(i => i.id)
+  quotaData.value.forEach(axis => {
+    if (!formatterIds.includes(axis.id)) {
+      formatter.push({
+        ...axis,
+        seriesId: axis.id,
+        show: false
+      })
+    }
+  })
 }
 const AXIS_PROP: AxisType[] = ['yAxis', 'yAxisExt', 'extBubble']
 const quotaAxis = computed(() => {
@@ -173,16 +171,6 @@ watch(
   },
   { deep: false }
 )
-watch(
-  [quotaData, () => props.chart.type],
-  newVal => {
-    if (!newVal?.[0]?.length) {
-      return
-    }
-    initSeriesTooltip()
-  },
-  { deep: false }
-)
 
 const state = reactive({
   tooltipForm: {
@@ -373,6 +361,8 @@ onMounted(() => {
   useEmitt({ name: 'addAxis', callback: updateSeriesTooltipFormatter })
   useEmitt({ name: 'removeAxis', callback: updateSeriesTooltipFormatter })
   useEmitt({ name: 'updateAxis', callback: updateSeriesTooltipFormatter })
+  useEmitt({ name: 'chart-type-change', callback: changeChartType })
+  useEmitt({ name: 'dataset-change', callback: changeDataset })
 })
 </script>
 

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

@@ -211,6 +211,7 @@ const getFields = (id, chartId) => {
         state.quota = (res.quotaList as unknown as Field[]) || []
         state.dimensionData = JSON.parse(JSON.stringify(state.dimension))
         state.quotaData = JSON.parse(JSON.stringify(state.quota))
+        emitter.emit('dataset-change')
       })
       .catch(() => {
         state.dimension = []
@@ -739,6 +740,7 @@ const onAreaChange = val => {
 const onTypeChange = (render, type) => {
   view.value.render = render
   view.value.type = type
+  emitter.emit('chart-type-change')
   // 处理配置项默认值，不同图表的同一配置项默认值不同
   const chartViewInstance = chartViewManager.getChartView(view.value.render, view.value.type)
   if (chartViewInstance) {