diff --git a/core/core-frontend/src/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts
index 3fde51f928..74d63c7833 100644
--- 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'
 }
diff --git 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
index a20a6ae292..2b74219b3b 100644
--- 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>
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 88f0b63bce..f578dc4317 100644
--- 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"
diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts
index 17611d6aa6..59ed01a9b3 100644
--- 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) {
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 7a46020a24..7ccbb8de87 100644
--- 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