Merge pull request #6432 from dataease/pr@dev-v2@fix_dynamic_tooltip

fix: 动态提示异常
2023-10-30 18:20:38 +08:00 · 2023-10-30 18:20:38 +08:00 · d75a5c05d5
commit d75a5c05d5
parent 14a94c0028 7136c021d6
5 changed files with 263 additions and 161 deletions
--- a/core/core-frontend/src/models/chart/editor.d.ts
+++ b/core/core-frontend/src/models/chart/editor.d.ts
@ -86,4 +86,25 @@ declare interface ChartEditorForm<T> {
   * 是否渲染图表
   */
  render: boolean
+  /**
+   * 子属性
+   */
+  prop?: string
+}
+/**
+ * 轴编辑表单
+ */
+declare interface AxisEditForm {
+  /**
+   * 轴类型
+   */
+  axisType: AxisType
+  /**
+   * 变更内容
+   */
+  axis: Axis[]
+  /**
+   * 变更类型
+   */
+  editType: 'add' | 'remove' | 'update'
 }
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
@ -7,10 +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 { differenceBy, partition } 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'

 const { t } = useI18n()

@ -34,11 +35,10 @@ const toolTip = computed(() => {
  return props.themes === 'dark' ? 'ndark' : 'dark'
 })
 const emit = defineEmits(['onTooltipChange', 'onExtTooltipChange'])
-
 const curSeriesFormatter = ref<DeepPartial<SeriesFormatter>>({})
 const quotaData = ref<Axis[]>(inject('quotaData'))
 const showSeriesTooltipFormatter = computed(() => {
-  return showProperty('seriesTooltipFormatter') && !batchOptStatus.value
+  return showProperty('seriesTooltipFormatter') && !batchOptStatus.value && props.chart.id
 })
 // 初始化系列提示
 const initSeriesTooltip = () => {
@ -90,84 +90,15 @@ const initSeriesTooltip = () => {
  }
  curSeriesFormatter.value = axisMap[curSeriesFormatter.value.seriesId]
 }
-// 更新系列提示
-const updateSeriesTooltip = (newAxis?: SeriesFormatter[], oldAxis?: SeriesFormatter[]) => {
-  if (
-    !showSeriesTooltipFormatter.value ||
-    !state.tooltipForm.seriesTooltipFormatter.length ||
-    !quotaData.value?.length
-  ) {
-    return
-  }
-  const axisMap: Record<string, Axis> = newAxis?.reduce((pre, next) => {
-    pre[next.seriesId] = next
-    return pre
-  }, {})
-  // 新增
-  const addedAxisMap = differenceBy(newAxis, oldAxis, 'seriesId').reduce((pre, next) => {
-    pre[next.id] = next
-    return pre
-  }, {}) as Record<string, SeriesFormatter>
-  // 删除
-  const removedAxisMap = differenceBy(oldAxis, newAxis, 'seriesId').reduce((pre, next) => {
-    pre[next.seriesId] = next
-    return pre
-  }, {}) as Record<string, SeriesFormatter>
-  const quotaIds = quotaData.value?.map(i => i.id)
-  state.tooltipForm.seriesTooltipFormatter = state.tooltipForm.seriesTooltipFormatter?.filter(i =>
-    quotaIds?.includes(i.id)
-  )
-  const dupAxis: SeriesFormatter[] = []
-  state.tooltipForm.seriesTooltipFormatter?.forEach(ele => {
-    if (addedAxisMap[ele.id]) {
-      // 数据集中的字段
-      ele.show = true
-      if (ele.seriesId === ele.id) {
-        ele.seriesId = addedAxisMap[ele.id].seriesId
-        ele.axisType = addedAxisMap[ele.id].axisType
-      } else {
-        // 其他轴已有的字段
-        const tmp = cloneDeep(addedAxisMap[ele.id])
-        tmp.show = true
-        dupAxis.push(tmp)
-      }
-    }
-    if (removedAxisMap[ele.seriesId]) {
-      ele.show = false
-      ele.seriesId = ele.id
-    }
-    ele.chartShowName = axisMap[ele.seriesId]?.chartShowName
-    ele.summary = axisMap[ele.seriesId]?.summary ?? ele.summary
-  })
-  // 重新排序
-  state.tooltipForm.seriesTooltipFormatter =
-    state.tooltipForm.seriesTooltipFormatter.concat(dupAxis)
-  state.tooltipForm.seriesTooltipFormatter = partition(
-    state.tooltipForm.seriesTooltipFormatter,
-    ele => axisMap[ele.seriesId]
-  ).flat()
-  if (removedAxisMap[curSeriesFormatter.value?.seriesId]) {
-    curSeriesFormatter.value = state.tooltipForm.seriesTooltipFormatter?.[0]
-  }
-  if (!newAxis.length) {
-    curSeriesFormatter.value = {}
-  }
-  emit('onTooltipChange', { data: state.tooltipForm, render: false })
-  emit('onExtTooltipChange', extTooltip.value)
-}
+const AXIS_PROP: AxisType[] = ['yAxis', 'yAxisExt', 'extBubble']
 const quotaAxis = computed(() => {
  let result = []
-  const axisProp: AxisType[] = ['yAxis', 'yAxisExt', 'extBubble']
-  axisProp.forEach(prop => {
+  AXIS_PROP.forEach(prop => {
    if (!chartViewInstance.value?.axis?.includes(prop)) {
      return
    }
    const axis = props.chart[prop]
-    axis?.forEach(item => {
-      item.axisType = prop
-      item.seriesId = `${item.id}-${prop}`
-      result.push(item)
-    })
+    axis?.forEach(item => result.push(item))
  })
  return result
 })
@ -205,13 +136,6 @@ const AGGREGATION_TYPE = [
  { name: t('chart.count'), value: 'count' },
  { name: t('chart.count_distinct'), value: 'count_distinct' }
 ]
-watch(
-  () => cloneDeep(quotaAxis.value),
-  (newVal, oldVal) => {
-    updateSeriesTooltip(newVal, oldVal)
-  },
-  { deep: true }
-)
 watch(
  [() => props.chart.customAttr.tooltip, () => props.chart.customAttr.tooltip.show],
  () => {
@ -262,7 +186,15 @@ const init = () => {
    if (customAttr.tooltip) {
      state.tooltipForm = defaultsDeep(customAttr.tooltip, cloneDeep(DEFAULT_TOOLTIP))
      formatterSelector.value?.blur()
+      // 新增视图
      const formatter = state.tooltipForm.seriesTooltipFormatter
+      if (!quotaAxis.value?.length) {
+        if (!formatter.length) {
+          quotaData.value?.forEach(i => formatter.push({ ...i, seriesId: i.id, show: false }))
+        }
+        curSeriesFormatter.value = {}
+        return
+      }
      const seriesAxisMap = formatter.reduce((pre, next) => {
        next.seriesId = next.seriesId ?? next.id
        pre[next.seriesId] = next
@ -278,9 +210,131 @@ const init = () => {
 }

 const showProperty = prop => props.propertyInner?.includes(prop)
-
+const updateSeriesTooltipFormatter = (form: AxisEditForm) => {
+  const { axisType, editType } = form
+  if (
+    !showSeriesTooltipFormatter.value ||
+    !state.tooltipForm.seriesTooltipFormatter.length ||
+    !quotaData.value?.length ||
+    !AXIS_PROP.includes(axisType)
+  ) {
+    return
+  }
+  switch (editType) {
+    case 'add':
+      addAxis(form)
+      break
+    case 'remove':
+      removeAxis(form)
+      break
+    case 'update':
+      updateAxis(form)
+      break
+    default:
+      break
+  }
+  emit('onTooltipChange', { data: state.tooltipForm, render: false }, 'seriesTooltipFormatter')
+  emit('onExtTooltipChange', extTooltip.value)
+}
+const addAxis = (form: AxisEditForm) => {
+  const { axis, axisType } = form
+  const axisMap = axis.reduce((pre, next) => {
+    next.axisType = axisType
+    next.seriesId = `${next.id}-${axisType}`
+    pre[next.id] = next
+    return pre
+  }, {})
+  const dupAxis = []
+  state.tooltipForm.seriesTooltipFormatter.forEach(ele => {
+    if (axisMap[ele.id]) {
+      // 数据集中的字段
+      ele.show = true
+      if (ele.seriesId === ele.id) {
+        ele.seriesId = axisMap[ele.id].seriesId
+        ele.axisType = axisMap[ele.id].axisType
+        ele.summary = axisMap[ele.id].summary
+        ele.chartShowName = axisMap[ele.id].chartShowName
+      } else {
+        // 其他轴已有的字段
+        const tmp = cloneDeep(axisMap[ele.id])
+        tmp.show = true
+        dupAxis.push(tmp)
+      }
+    }
+  })
+  state.tooltipForm.seriesTooltipFormatter =
+    state.tooltipForm.seriesTooltipFormatter.concat(dupAxis)
+  state.tooltipForm.seriesTooltipFormatter = partition(
+    state.tooltipForm.seriesTooltipFormatter,
+    ele => quotaAxis.value.findIndex(item => item.id === ele.id) !== -1
+  ).flat()
+}
+const removeAxis = (form: AxisEditForm) => {
+  const { axis, axisType } = form
+  const axisMap = axis.reduce((pre, next) => {
+    if (!next) {
+      return pre
+    }
+    next.axisType = axisType
+    next.seriesId = `${next.id}-${axisType}`
+    pre[next.seriesId] = next
+    return pre
+  }, {})
+  const quotaIds = quotaData.value?.map(i => i.id)
+  const formatterDupMap = state.tooltipForm.seriesTooltipFormatter.reduce((pre, next) => {
+    if (pre[next.id] !== undefined) {
+      pre[`${next.id}-${axisType}`] = true
+    } else {
+      pre[next.id] = false
+    }
+    return pre
+  }, {})
+  state.tooltipForm.seriesTooltipFormatter = state.tooltipForm.seriesTooltipFormatter?.filter(
+    i => quotaIds?.includes(i.id) && !formatterDupMap[i.seriesId]
+  )
+  state.tooltipForm.seriesTooltipFormatter.forEach(ele => {
+    if (axisMap[ele.seriesId]) {
+      // 数据集中的字段
+      ele.show = false
+      ele.seriesId = ele.id
+      ele.summary = 'sum'
+    }
+  })
+  state.tooltipForm.seriesTooltipFormatter = partition(
+    state.tooltipForm.seriesTooltipFormatter,
+    ele => quotaAxis.value.findIndex(item => item.id === ele.id) !== -1
+  ).flat()
+  if (!quotaAxis.value?.length) {
+    curSeriesFormatter.value = {}
+    return
+  }
+  if (axisMap[curSeriesFormatter.value?.seriesId]) {
+    curSeriesFormatter.value = state.tooltipForm.seriesTooltipFormatter?.[0]
+  }
+}
+const updateAxis = (form: AxisEditForm) => {
+  const { axis, axisType } = form
+  const axisMap = axis.reduce((pre, next) => {
+    if (!next) {
+      return pre
+    }
+    next.axisType = axisType
+    next.seriesId = `${next.id}-${axisType}`
+    pre[next.seriesId] = next
+    return pre
+  }, {})
+  state.tooltipForm.seriesTooltipFormatter.forEach(ele => {
+    if (axisMap[ele.seriesId]) {
+      ele.chartShowName = axisMap[ele.seriesId]?.chartShowName
+      ele.summary = axisMap[ele.seriesId]?.summary ?? ele.summary
+    }
+  })
+}
 onMounted(() => {
  init()
+  useEmitt({ name: 'addAxis', callback: updateSeriesTooltipFormatter })
+  useEmitt({ name: 'removeAxis', callback: updateSeriesTooltipFormatter })
+  useEmitt({ name: 'updateAxis', callback: updateSeriesTooltipFormatter })
 })
 </script>

@ -482,10 +536,11 @@ onMounted(() => {
      <template v-if="curSeriesFormatter?.seriesId">
        <el-form-item class="form-item form-item-checkbox" :class="'form-item-' + themes">
          <el-checkbox
-            size="small"
-            @change="changeTooltipAttr('seriesTooltipFormatter', true)"
+            :disabled="!formatterEditable"
            v-model="curSeriesFormatter.show"
+            size="small"
            label="quota"
+            @change="changeTooltipAttr('seriesTooltipFormatter', true)"
          >
            {{ t('chart.show') }}
          </el-checkbox>
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@ -15,7 +15,6 @@ import {
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import type { FormInstance, FormRules } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Field, getFieldByDQ } from '@/api/chart'
 import { Tree } from '../../../visualized/data/dataset/form/CreatDsGroup.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { ElMessage, ElTreeSelect } from 'element-plus-secondary'
@ -43,13 +42,13 @@ import CustomSortEdit from '@/views/chart/components/editor/drag-item/components
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import CalcFieldEdit from '@/views/visualized/data/dataset/form/CalcFieldEdit.vue'
 import { getFieldName, guid } from '@/views/visualized/data/dataset/form/util'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, get } from 'lodash-es'
 import { deleteField, saveField } from '@/api/dataset'
 import { getWorldTree } from '@/api/map'
 import chartViewManager from '@/views/chart/components/js/panel'
 import DatasetSelect from '@/views/chart/components/editor/dataset-select/DatasetSelect.vue'
 import { useDraggable } from '@vueuse/core'
-import _ from 'lodash'
+import { set, concat, keys } from 'lodash-es'

 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@ -63,7 +62,7 @@ const tabActiveVQuery = ref('style')
 const datasetSelector = ref(null)
 const curDatasetWeight = ref(0)
 const renameForm = ref<FormInstance>()
-
+const { emitter } = useEmitt()
 const props = defineProps({
  view: {
    type: Object as PropType<ChartObj>,
@ -144,14 +143,6 @@ const state = reactive({
  useless: null
 })

-watch(
-  [() => props.view.tableId],
-  () => {
-    getFields(props.view.tableId, props.view.id)
-  },
-  { deep: true }
-)
-
 watch(
  [() => view.value['tableId']],
  () => {
@ -222,31 +213,8 @@ const filterNode = (value, data) => {
  return data.name?.includes(value)
 }

-const getFields = (id, chartId) => {
-  if (id && chartId) {
-    getFieldByDQ(id, chartId)
-      .then(res => {
-        state.dimension = (res.dimensionList as unknown as Field[]) || []
-        state.quota = (res.quotaList as unknown as Field[]) || []
-        state.dimensionData = JSON.parse(JSON.stringify(state.dimension))
-        state.quotaData = JSON.parse(JSON.stringify(state.quota))
-      })
-      .catch(() => {
-        state.dimension = []
-        state.quota = []
-        state.dimensionData = []
-        state.quotaData = []
-      })
-  } else {
-    state.dimension = []
-    state.quota = []
-    state.dimensionData = []
-    state.quotaData = []
-  }
-}
-
 const allFields = computed(() => {
-  return _.concat(state.quotaData, state.dimensionData)
+  return concat(state.quotaData, state.dimensionData)
 })

 const queryList = computed(() => {
@ -266,9 +234,9 @@ const queryList = computed(() => {

 const quotaData = computed(() => {
  if (view.value?.type === 'table-info') {
-    return state.quotaData?.filter(item => item.id !== '-1')
+    return state.quota?.filter(item => item.id !== '-1')
  }
-  return state.quotaData
+  return state.quota
 })
 provide('quotaData', quotaData)

@ -313,23 +281,29 @@ const dimensionItemRemove = item => {
  }
 }

-const quotaItemChange = () => {
+const quotaItemChange = (axis: Axis, axisType: AxisType) => {
  recordSnapshotInfo('calcData')
  // do quotaItemChange
+  emitter.emit('updateAxis', { axisType, axis: [axis], editType: 'update' })
 }
 const quotaItemRemove = item => {
  recordSnapshotInfo('calcData')
+  let axisType: AxisType = item.removeType
+  let axis
  if (item.removeType === 'quota') {
-    view.value.yAxis.splice(item.index, 1)
+    axisType = 'yAxis'
+    axis = view.value.yAxis.splice(item.index, 1)
  } else if (item.removeType === 'quotaExt') {
-    view.value.yAxisExt.splice(item.index, 1)
+    axisType = 'yAxisExt'
+    axis = view.value.yAxisExt.splice(item.index, 1)
  } else if (item.removeType === 'extLabel') {
-    view.value.extLabel.splice(item.index, 1)
+    axis = view.value.extLabel.splice(item.index, 1)
  } else if (item.removeType === 'extTooltip') {
-    view.value.extTooltip.splice(item.index, 1)
+    axis = view.value.extTooltip.splice(item.index, 1)
  } else if (item.removeType === 'extBubble') {
-    view.value.extBubble.splice(item.index, 1)
+    axis = view.value.extBubble.splice(item.index, 1)
  }
+  useEmitt().emitter.emit('removeAxis', { axisType, axis, editType: 'remove' })
 }
 const arrowIcon = () => {
  return h(Icon, { name: 'icon_down_outlined-1' })
@ -394,7 +368,7 @@ const onMove = e => {
 // drag
 const dragCheckType = (list, type) => {
  if (list && list.length > 0) {
-    var valid = true
+    let valid = true
    for (let i = 0; i < list.length; i++) {
      if (list[i].groupType !== type) {
        list.splice(i, 1)
@ -407,6 +381,7 @@ const dragCheckType = (list, type) => {
        type: 'warning'
      })
    }
+    return valid
  }
 }
 const dragMoveDuplicate = (list, e, mode) => {
@ -418,6 +393,7 @@ const dragMoveDuplicate = (list, e, mode) => {
    })
    if (dup && dup.length > 1) {
      list.splice(e.newDraggableIndex, 1)
+      return dup
    }
  }
 }
@ -439,14 +415,37 @@ const addAxis = (e, axis: AxisType) => {
    return
  }
  const { type, limit, duplicate } = axisSpec
+  let typeValid, dup
  if (type) {
-    dragCheckType(view.value[axis], type)
+    typeValid = dragCheckType(view.value[axis], type)
  }
  if (!duplicate) {
-    dragMoveDuplicate(view.value[axis], e, 'chart')
+    dup = dragMoveDuplicate(view.value[axis], e, 'chart')
  }
-  if (limit) {
-    view.value[axis] = view.value[axis].splice(0, limit)
+  if (view.value[axis].length > limit) {
+    const removedAxis = view.value[axis].splice(limit)
+    if (e.newDraggableIndex + 1 <= limit) {
+      emitter.emit('removeAxis', { axisType: axis, axis: removedAxis, editType: 'remove' })
+      emitter.emit('addAxis', {
+        axisType: axis,
+        axis: [view.value[axis][e.newDraggableIndex]],
+        editType: 'add'
+      })
+    }
+  } else {
+    if (!dup && typeValid) {
+      emitter.emit('addAxis', {
+        axisType: axis,
+        axis: [view.value[axis][e.newDraggableIndex]],
+        editType: 'add'
+      })
+    }
+  }
+  if (view.value.type === 'line') {
+    if (view.value?.xAxisExt?.length && view.value?.yAxis?.length > 1) {
+      const axis = view.value.yAxis.splice(1)
+      emitter.emit('removeAxis', { axisType: 'yAxis', axis, editType: 'remove' })
+    }
  }
 }

@ -505,6 +504,13 @@ const moveToQuota = e => {
  dragMoveDuplicate(state.quotaData, e, 'ds')
 }

+const onAxisChange = (e, axis: AxisType) => {
+  if (e.removed) {
+    const { element } = e.removed
+    emitter.emit('removeAxis', { axisType: axis, axis: [element], editType: 'remove' })
+  }
+}
+
 const calcData = (view, resetDrill = false, updateQuery = '') => {
  if (
    view.refreshTime === '' ||
@ -551,26 +557,36 @@ const onTypeChange = (render, type) => {
    view.value = chartViewInstance.setupDefaultOptions(view.value) as unknown as ChartObj
    // 处理轴
    const axisConfig = chartViewInstance.axisConfig
-    _.keys(axisConfig).forEach((axis: AxisType) => {
+    keys(axisConfig).forEach((axis: AxisType) => {
      const axisArr = view.value[axis] as Axis[]
      if (!axisArr?.length) {
        return
      }
      const axisSpec = axisConfig[axis]
      const { type, limit } = axisSpec
+      const removedAxis = []
      // check type
      if (type) {
        for (let i = axisArr.length - 1; i >= 0; i--) {
          if (axisArr[i].groupType !== type) {
-            axisArr.splice(i, 1)
+            const [axis] = axisArr.splice(i, 1)
+            removedAxis.push(axis)
          }
        }
      }
      // check limit
-      if (limit && axisArr.length) {
-        axisArr.splice(0, axisArr.length - limit)
+      if (limit && limit < axisArr.length) {
+        axisArr.splice(limit).forEach(i => removedAxis.push(i))
      }
+      removedAxis.length &&
+        emitter.emit('removeAxis', { axisType: axis, axis: removedAxis, editType: 'remove' })
    })
+    if (view.value.type === 'line') {
+      if (view.value?.xAxisExt?.length && view.value?.yAxis?.length > 1) {
+        const axis = view.value.yAxis.splice(1)
+        emitter.emit('removeAxis', { axisType: 'yAxis', axis, editType: 'remove' })
+      }
+    }
  }
  curComponent.value.innerType = type
  calcData(view.value, true)
@ -617,23 +633,22 @@ const onLabelChange = val => {
  view.value.customAttr.label = val
  renderChart(view.value)
 }
-watch([() => view.value.xAxisExt?.length, () => view.value.yAxis?.length], () => {
-  if (view.value.type === 'line') {
-    if (view.value?.xAxisExt?.length && view.value?.yAxis?.length > 1) {
-      view.value.yAxis.splice(1)
-    }
-  }
-})

-const onTooltipChange = (chartForm: ChartEditorForm<ChartTooltipAttr>) => {
+const onTooltipChange = (chartForm: ChartEditorForm<ChartTooltipAttr>, prop: string) => {
  const { data, requestData, render } = chartForm
+  let tooltipObj = data
  if (!data) {
-    view.value.customAttr.tooltip = chartForm as unknown as ChartTooltipAttr
+    tooltipObj = chartForm as unknown as ChartTooltipAttr
+  }
+  if (prop) {
+    const val = get(tooltipObj, prop)
+    set(view.value.customAttr.tooltip, prop, val)
  } else {
-    view.value.customAttr.tooltip = data
+    view.value.customAttr.tooltip = tooltipObj
  }
  if (requestData) {
    calcData(view.value)
+    return
  }
  // for compatibility
  if (render !== false) {
@ -716,29 +731,31 @@ const removeItems = (
  _type: 'xAxis' | 'xAxisExt' | 'extStack' | 'yAxis' | 'extBubble' | 'customFilter' | 'drillFields'
 ) => {
  recordSnapshotInfo('calcData')
+  let axis = []
  switch (_type) {
    case 'xAxis':
-      view.value.xAxis = []
+      axis = view.value.xAxis?.splice(0)
      break
    case 'xAxisExt':
-      view.value.xAxisExt = []
+      axis = view.value.xAxisExt?.splice(0)
      break
    case 'extStack':
-      view.value.extStack = []
+      axis = view.value.extStack?.splice(0)
      break
    case 'yAxis':
-      view.value.yAxis = []
+      axis = view.value.yAxis?.splice(0)
      break
    case 'extBubble':
-      view.value.extBubble = []
+      axis = view.value.extBubble?.splice(0)
      break
    case 'customFilter':
-      view.value.customFilter = []
+      axis = view.value.customFilter?.splice(0)
      break
    case 'drillFields':
-      view.value.drillFields = []
+      axis = view.value.drillFields?.splice(0)
      break
  }
+  axis?.length && emitter.emit('removeAxis', { axisType: _type, axis, editType: 'remove' })
 }

 const saveRename = ref => {
@ -746,14 +763,19 @@ const saveRename = ref => {
  ref.validate(valid => {
    if (valid) {
      const { renameType, index, chartShowName } = state.itemForm
+      let axisType, axis
      switch (renameType) {
        case 'quota':
+          axisType = 'yAxis'
+          axis = view.value.yAxis[index]
          view.value.yAxis[index].chartShowName = chartShowName
          break
        case 'dimension':
          view.value.xAxis[index].chartShowName = chartShowName
          break
        case 'quotaExt':
+          axisType = 'yAxisExt'
+          axis = view.value.yAxisExt[index]
          view.value.yAxisExt[index].chartShowName = chartShowName
          break
        case 'dimensionExt':
@ -763,6 +785,8 @@ const saveRename = ref => {
          view.value.extStack[index].chartShowName = chartShowName
          break
        case 'extBubble':
+          axisType = 'extBubble'
+          axis = view.value.extBubble[index]
          view.value.extBubble[index].chartShowName = chartShowName
          break
        case 'extLabel':
@ -774,6 +798,7 @@ const saveRename = ref => {
        default:
          break
      }
+      axisType && emitter.emit('updateAxis', { axisType, axis: [axis], editType: 'update' })
      closeRename()
    } else {
      return false
@ -1356,6 +1381,7 @@ const onRefreshChange = val => {
                        class="drag-block-style"
                        :class="{ dark: themes === 'dark' }"
                        @add="addYaxis"
+                        @change="e => onAxisChange(e, 'yAxis')"
                      >
                        <template #item="{ element, index }">
                          <quota-item
@ -1366,7 +1392,7 @@ const onRefreshChange = val => {
                            :index="index"
                            type="quota"
                            :themes="props.themes"
-                            @onQuotaItemChange="quotaItemChange"
+                            @onQuotaItemChange="item => quotaItemChange(item, 'yAxis')"
                            @onQuotaItemRemove="quotaItemRemove"
                            @onNameEdit="showRename"
                            @editItemFilter="showQuotaEditFilter"
@ -1403,6 +1429,7 @@ const onRefreshChange = val => {
                        class="drag-block-style"
                        :class="{ dark: themes === 'dark' }"
                        @add="addExtBubble"
+                        @change="e => onAxisChange(e, 'extBubble')"
                      >
                        <template #item="{ element, index }">
                          <quota-item
@ -1413,7 +1440,7 @@ const onRefreshChange = val => {
                            :index="index"
                            type="extBubble"
                            :themes="props.themes"
-                            @onQuotaItemChange="quotaItemChange"
+                            @onQuotaItemChange="item => quotaItemChange(item, 'extBubble')"
                            @onQuotaItemRemove="quotaItemRemove"
                            @onNameEdit="showRename"
                            @editItemFilter="showQuotaEditFilter"
--- a/core/core-frontend/src/views/chart/components/js/util.ts
+++ b/core/core-frontend/src/views/chart/components/js/util.ts
@ -253,9 +253,8 @@ export function handleEmptyDataStrategy<O extends PickOptions>(chart: Chart, opt
    handleIgnoreData(data)
    return options
  }
-  const yAxis = JSON.parse(JSON.stringify(chart.yAxis))
-  const extAxis = JSON.parse(JSON.stringify(chart.xAxisExt))
-  const multiDimension = yAxis?.length >= 2 || extAxis?.length > 0
+  const { yAxis, xAxisExt, extStack } = chart
+  const multiDimension = yAxis?.length >= 2 || xAxisExt?.length > 0 || extStack?.length > 0
  switch (strategy) {
    case 'breakLine': {
      if (multiDimension) {
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@ -434,7 +434,7 @@ onMounted(() => {
    }
  })
  useEmitt({
-    name: 'calc-data-' + view.value.id,
+    name: 'calcData-' + view.value.id,
    callback: function (val) {
      if (!state.initReady) {
        return