diff --git a/core/core-frontend/src/api/setting/sysParameter.ts b/core/core-frontend/src/api/setting/sysParameter.ts
index 0e61578..63112f9 100644
--- a/core/core-frontend/src/api/setting/sysParameter.ts
+++ b/core/core-frontend/src/api/setting/sysParameter.ts
@@ -3,4 +3,6 @@ import request from '@/config/axios'
 export const queryMapKeyApi = () => request.get({ url: '/sysParameter/queryOnlineMap' })
 export const queryMapKeyApiByType = (type: string) =>
   request.get({ url: `/sysParameter/queryOnlineMap/${type}` })
+export const getMapServer = (id: string) =>
+  request.get({ url: `/dataVisualization/getMapServer/${id}` })
 export const saveMapKeyApi = data => request.post({ url: '/sysParameter/saveOnlineMap', data })
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 26ade8f..6b1a685 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -387,7 +387,7 @@ const boardMoveActive = computed(() => {
     'heat-map',
     't-heatmap',
     'circle-packing',
-    'three-map'
+    'three-map',
   ]
   return element.value.isPlugin || CHARTS.includes(element.value.innerType)
 })
diff --git a/core/core-frontend/src/components/visualization/SettingMenu.vue b/core/core-frontend/src/components/visualization/SettingMenu.vue
index 9138e07..f48a45c 100644
--- a/core/core-frontend/src/components/visualization/SettingMenu.vue
+++ b/core/core-frontend/src/components/visualization/SettingMenu.vue
@@ -177,7 +177,7 @@ const state = reactive({
     'flow-map',
     'bidirectional-bar',
     'symbolic-map',
-    'three-map'
+    'three-map',
   ],
   linkageExcludeViewType: [
     'richTextView',
@@ -189,7 +189,7 @@ const state = reactive({
     'flow-map',
     'bidirectional-bar',
     'symbolic-map',
-    'three-map'
+    'three-map',
   ],
   copyData: null,
   hyperlinksSetVisible: false,
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 8f64bfe..6f2c6c6 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -1528,6 +1528,7 @@ export default {
     export_details: 'Export details',
     chart_data: 'Data',
     chart_style: 'Style',
+    chart_base:'base map',
     drag_block_type_axis: 'Category axis',
     drag_block_type_axis_left: 'Left subcategory',
     drag_block_type_axis_right: 'Right subcategory',
@@ -1968,6 +1969,9 @@ export default {
     hide: 'Hide',
     show_label: 'Show label',
     security_code: 'Security key',
+    map_interface:'url',
+    layer_name:'Layer Name',
+    update_base:'Update base map',
     auto_fit: 'Adaptive zoom',
     zoom_level: 'Zoom level',
     central_point: 'Center point',
@@ -2078,6 +2082,7 @@ export default {
     no_data_or_not_positive: 'No data available, or all data are not positive, unable to plot',
     map_type: 'Map Provider',
     map_type_gaode: 'Gaode Map',
+    map_type_customize:'Geoserver',
     map_type_tianditu: 'Tianditu',
     map_type_baidu: 'Baidu Map',
     map_type_tencent: 'Tencent Map',
@@ -4609,6 +4614,7 @@ export default {
     answer: 'Answering',
     example: 'You can ask me: Pie chart of sales share of each sales department in 2020',
     switch_chart: 'Switch chart type',
+    switch_base:'Switch base map',
     switch_table: 'Switch to detailed table',
     download: 'Download'
   },
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index ee26a80..ab2c015 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -1488,6 +1488,7 @@ export default {
     export_details: '導出明細',
     chart_data: '資料',
     chart_style: '樣式',
+    chart_base:'底圖',
     drag_block_type_axis: '類別軸',
     drag_block_type_axis_left: '左子類別',
     drag_block_type_axis_right: '右子類別',
@@ -1861,6 +1862,7 @@ export default {
     enable_view_loading: '圖表載入提示',
     minute: '分',
     switch_chart: '切換圖表',
+    switch_base:'切換底圖',
     update_chart_data: '更新圖表資料',
     second: '秒',
     more_settings: '更多設定',
@@ -1917,6 +1919,9 @@ export default {
     hide: '隱藏',
     show_label: '顯示標籤',
     security_code: '安全金鑰',
+    map_interface:'url',
+    layer_name:'圖層名稱',
+    update_base:'更新底圖',
     auto_fit: '自適應縮放',
     zoom_level: '縮放等級',
     central_point: '中心點',
@@ -2019,6 +2024,7 @@ export default {
     no_data_or_not_positive: '暫無數據，或數據均不是正數，無法繪製',
     map_type: '地圖提供商',
     map_type_gaode: '高德地圖',
+    map_type_customize:'geoserver服務',
     map_type_tianditu: '天地圖',
     map_type_baidu: '百度地圖',
     map_type_tencent: '騰訊地圖',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 7ba761e..3e5ad41 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -1493,6 +1493,7 @@ export default {
     export_details: '导出明細',
     chart_data: '数据',
     chart_style: '样式',
+    chart_base:'底图',
     drag_block_type_axis: '类别轴',
     drag_block_type_axis_left: '左子类别',
     drag_block_type_axis_right: '右子类别',
@@ -1866,6 +1867,7 @@ export default {
     enable_view_loading: '图表加载提示',
     minute: '分',
     switch_chart: '切换图表',
+    switch_base:'切换底图',
     update_chart_data: '更新图表数据',
     second: '秒',
     more_settings: '更多设置',
@@ -1922,6 +1924,9 @@ export default {
     hide: '隐藏',
     show_label: '显示标签',
     security_code: '安全密钥',
+    map_interface:'url',
+    layer_name:'图层名称',
+    update_base:'更新底图',
     auto_fit: '自适应缩放',
     zoom_level: '缩放等级',
     central_point: '中心点',
@@ -2025,6 +2030,7 @@ export default {
     no_data_or_not_positive: '暂无数据，或数据均不是正数，无法绘制',
     map_type: '地图提供商',
     map_type_gaode: '高德地图',
+    map_type_customize:'geoserver服务',
     map_type_tianditu: '天地图',
     map_type_baidu: '百度地图',
     map_type_tencent: '腾讯地图',
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 bc08bb2..31ed3e5 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -130,7 +130,41 @@ const editCalcField = ref(false)
 const isCalcFieldAdd = ref(true)
 const calcEdit = ref()
 const route = useRoute()
-
+const mapList = ref([
+  {
+    type: 'tianditu',
+    title: t('chart.map_type_tianditu'),
+  },
+  {
+    type: 'gaode',
+    title: t('chart.map_type_gaode'),
+  },
+  {
+    type: 'zidingyi',
+    title: t('chart.map_type_customize'),
+  },
+])
+const mapServer: any = ref([
+  {
+    mapType: 'tianditu',
+    key: 'f55afadf5ef52c1c479d1776e135c4f3',
+    securityCode: '',
+    status: true,
+  },
+  {
+    mapType: 'gaode',
+    key: '',
+    securityCode: '',
+    status: false,
+  },
+  {
+    mapType: 'zidingyi',
+    url: '',
+    layers: '',
+    status: false,
+  },
+])
+const mapSelect: any = ref({})
 const onComponentNameChange = () => {
   snapshotStore.recordSnapshotCache('onComponentNameChange')
 }
@@ -330,6 +364,13 @@ const expandKeys = ref([])
 watch(
   () => [view.value.type, view.value],
   newVal => {
+    if (curComponent.value && curComponent.value.mapServer) {
+      mapServer.value = JSON.parse(JSON.stringify(curComponent.value.mapServer))
+      mapSelect.value = JSON.parse(JSON.stringify(mapServer.value.find(server => server.status === true))) ;
+    } else {
+      mapSelect.value =JSON.parse(JSON.stringify(mapServer.value.find(server => server.status === true)));
+    }
+    // debugger
     if (showAxis('area')) {
       if (!state.worldTree?.length) {
         getWorldTree().then(async res => {
@@ -948,7 +989,54 @@ const updateChartData = view => {
   useEmitt().emitter.emit('checkShowEmpty', { allFields: allFields.value, view: view })
   calcData(view, true, 'updateQuery')
 }
-
+const changestatus = () => {
+ 
+  mapServer.value.forEach((item: any) => {
+    if (item.mapType == mapSelect.value.mapType) {
+      item.status = true
+      mapSelect.value=JSON.parse(JSON.stringify(item))
+    } else {
+      item.status = false
+    }
+  })
+  console.log(mapServer.value)
+  console.log(mapSelect.value)
+  // mapSelect.value = mapServer.value.find(server => server.status === true);
+}
+const updatamap = () => {
+  const updatedServers = [...mapServer.value];
+  
+  // 1. 先将所有对象的 status 设为 false
+  updatedServers.forEach(server => {
+    server.status = false;
+  });
+  
+  // 2. 找到匹配的索引并替换对象，同时设置 status 为 true
+  const index = updatedServers.findIndex(s => s.mapType === mapSelect.value.mapType);
+  if (index !== -1) {
+    updatedServers[index] = {
+      ...mapSelect.value,
+      status: true  // 确保替换后的对象 status 为 true
+    };
+  }
+  
+  // 3. 更新响应式数据
+  mapServer.value = updatedServers;
+  console.log(mapServer.value)
+  curComponent.value['mapServer'] = mapServer.value
+  snapshotStore.recordSnapshotCacheToMobile('mapServer')
+  batchOptChange('mapServer')
+  calcData(view.value, true)
+}
+const batchOptChange = (custom: any, property, value, subProp?) => {
+  dvMainStore.setChangeProperties({
+    custom: custom,
+    property: property,
+    value: value,
+    subProp: subProp
+  })
+  snapshotStore.recordSnapshotCache('renderChart')
+}
 const renderChart = view => {
   if (mobileInPc.value) {
     //移动端设计
@@ -1976,61 +2064,28 @@ const deleteChartFieldItem = id => {
     <template v-if="mobileInPc">
       <el-container direction="vertical">
         <el-scrollbar class="drag_main_area">
-          <VQueryChartStyle
-            v-if="view.type === 'VQuery' && curComponent"
-            :element="curComponent"
-            :common-background-pop="curComponent?.commonBackground"
-            :chart="view"
-            :themes="themes"
-          />
+          <VQueryChartStyle v-if="view.type === 'VQuery' && curComponent" :element="curComponent"
+            :common-background-pop="curComponent?.commonBackground" :chart="view" :themes="themes" />
           <template v-else-if="view.plugin?.isPlugin">
-            <plugin-component
-              :jsname="view.plugin.staticMap['editor-style']"
-              :view="view"
-              :dimension="state.dimension"
-              :quota="state.quota"
-              :themes="themes"
-              :emitter="emitter"
-            />
+            <plugin-component :jsname="view.plugin.staticMap['editor-style']" :view="view" :dimension="state.dimension"
+              :quota="state.quota" :themes="themes" :emitter="emitter" />
           </template>
           <template v-else>
-            <chart-style
-              v-if="chartStyleShow"
-              :properties="chartViewInstance.properties"
-              :property-inner-all="chartViewInstance.propertyInner"
-              :selector-spec="chartViewInstance.selectorSpec"
-              :common-background-pop="curComponent?.commonBackground"
-              :common-border-pop="curComponent?.style"
-              :event-info="curComponent?.events"
-              :chart="view"
-              :themes="themes"
-              :dimension-data="state.dimension"
-              :quota-data="state.quota"
-              :all-fields="allFields"
-              @onColorChange="onColorChange"
-              @onMiscChange="onMiscChange"
-              @onLabelChange="onLabelChange"
-              @onTooltipChange="onTooltipChange"
-              @onChangeXAxisForm="onChangeXAxisForm"
-              @onChangeYAxisForm="onChangeYAxisForm"
-              @onChangeYAxisExtForm="onChangeYAxisExtForm"
-              @onTextChange="onTextChange"
-              @onGraphicTextChange="onGraphicTextChange"
-              @onIndicatorChange="onIndicatorChange"
-              @onIndicatorNameChange="onIndicatorNameChange"
-              @onLegendChange="onLegendChange"
-              @onBackgroundChange="onBackgroundChange"
-              @onStyleAttrChange="onStyleAttrChange"
-              @onBasicStyleChange="onBasicStyleChange"
-              @onTableHeaderChange="onTableHeaderChange"
-              @onTableCellChange="onTableCellChange"
-              @onTableTotalChange="onTableTotalChange"
-              @onChangeMiscStyleForm="onChangeMiscStyleForm"
-              @onExtTooltipChange="onExtTooltipChange"
-              @onChangeQuadrantForm="onChangeQuadrantForm"
-              @onChangeFlowMapLineForm="onChangeFlowMapLineForm"
-              @onChangeFlowMapPointForm="onChangeFlowMapPointForm"
-            />
+            <chart-style v-if="chartStyleShow" :properties="chartViewInstance.properties"
+              :property-inner-all="chartViewInstance.propertyInner" :selector-spec="chartViewInstance.selectorSpec"
+              :common-background-pop="curComponent?.commonBackground" :common-border-pop="curComponent?.style"
+              :event-info="curComponent?.events" :chart="view" :themes="themes" :dimension-data="state.dimension"
+              :quota-data="state.quota" :all-fields="allFields" @onColorChange="onColorChange"
+              @onMiscChange="onMiscChange" @onLabelChange="onLabelChange" @onTooltipChange="onTooltipChange"
+              @onChangeXAxisForm="onChangeXAxisForm" @onChangeYAxisForm="onChangeYAxisForm"
+              @onChangeYAxisExtForm="onChangeYAxisExtForm" @onTextChange="onTextChange"
+              @onIndicatorChange="onIndicatorChange" @onIndicatorNameChange="onIndicatorNameChange"
+              @onLegendChange="onLegendChange" @onBackgroundChange="onBackgroundChange"
+              @onStyleAttrChange="onStyleAttrChange" @onBasicStyleChange="onBasicStyleChange"
+              @onTableHeaderChange="onTableHeaderChange" @onTableCellChange="onTableCellChange"
+              @onTableTotalChange="onTableTotalChange" @onChangeMiscStyleForm="onChangeMiscStyleForm"
+              @onExtTooltipChange="onExtTooltipChange" @onChangeQuadrantForm="onChangeQuadrantForm"
+              @onChangeFlowMapLineForm="onChangeFlowMapLineForm" @onChangeFlowMapPointForm="onChangeFlowMapPointForm" />
           </template>
         </el-scrollbar>
       </el-container>
@@ -2039,19 +2094,11 @@ const deleteChartFieldItem = id => {
     <!--pc端设计使用-->
     <template v-if="!mobileInPc">
       <el-row v-loading="loading" class="de-chart-editor">
-        <div
-          class="content-area"
-          :class="{
-            'content-area-close': canvasCollapse.chartAreaCollapse,
-            'content-area-left-open': !canvasCollapse.chartAreaCollapse
-          }"
-        >
-          <el-icon
-            :title="view.title"
-            class="custom-icon"
-            size="20px"
-            @click="collapseChange('chartAreaCollapse')"
-          >
+        <div class="content-area" :class="{
+          'content-area-close': canvasCollapse.chartAreaCollapse,
+          'content-area-left-open': !canvasCollapse.chartAreaCollapse
+        }">
+          <el-icon :title="view.title" class="custom-icon" size="20px" @click="collapseChange('chartAreaCollapse')">
             <Fold v-if="canvasCollapse.chartAreaCollapse" class="collapse-icon" />
             <Expand v-else class="collapse-icon" />
           </el-icon>
@@ -2061,21 +2108,19 @@ const deleteChartFieldItem = id => {
           <div v-if="!canvasCollapse.chartAreaCollapse" style="width: 240px" class="view-panel-row">
             <el-row class="editor-title">
               <div style="display: flex; align-items: center; width: calc(100% - 24px)">
-                <div
-                  id="component-name"
-                  class="name-area"
+                <div id="component-name" class="name-area"
                   style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
                   :style="{ width: componentNameEdit ? '300px' : 'auto' }"
-                  :class="{ 'component-name-dark': themes === 'dark' }"
-                  @dblclick="editComponentName"
-                >
+                  :class="{ 'component-name-dark': themes === 'dark' }" @dblclick="editComponentName">
                   {{ view.title }}
                 </div>
                 <el-popover show-arrow :offset="8" placement="bottom" width="200" trigger="click">
                   <template #reference>
-                    <el-icon style="margin-left: 4px; cursor: pointer"
-                      ><Icon><dvInfoSvg class="svg-icon" /></Icon
-                    ></el-icon>
+                    <el-icon style="margin-left: 4px; cursor: pointer">
+                      <Icon>
+                        <dvInfoSvg class="svg-icon" />
+                      </Icon>
+                    </el-icon>
                   </template>
                   <div style="margin-bottom: 4px; font-size: 14px; color: #646a73">
                     {{ t('visualization.view_id') }}
@@ -2091,21 +2136,12 @@ const deleteChartFieldItem = id => {
               <el-scrollbar v-if="view.type === 'VQuery' && curComponent">
                 <div class="query-style-tab">
                   <div style="padding-top: 1px">
-                    <VQueryChartStyle
-                      :element="curComponent"
-                      :common-background-pop="curComponent?.commonBackground"
-                      :chart="view"
-                      :themes="themes"
-                    />
+                    <VQueryChartStyle :element="curComponent" :common-background-pop="curComponent?.commonBackground"
+                      :chart="view" :themes="themes" />
                   </div>
                 </div>
               </el-scrollbar>
-              <el-tabs
-                v-else
-                v-model="tabActive"
-                class="tab-header"
-                :class="{ dark: themes === 'dark' }"
-              >
+              <el-tabs v-else v-model="tabActive" class="tab-header" :class="{ dark: themes === 'dark' }">
                 <el-tab-pane name="data" :label="t('chart.chart_data')" class="padding-tab">
                   <el-container direction="vertical">
                     <el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
@@ -2114,70 +2150,38 @@ const deleteChartFieldItem = id => {
                         class="drag-data padding-lr"
                       >
                         <span class="data-area-label">{{ t('chart.switch_chart') }}</span>
-                        <el-popover
-                          :offset="4"
-                          placement="bottom-end"
-                          width="434"
-                          trigger="click"
-                          :append-to-body="true"
-                          :popper-class="'chart-type-style-' + themes"
-                          :persistent="false"
-                        >
+                        <el-popover :offset="4" placement="bottom-end" width="434" trigger="click"
+                          :append-to-body="true" :popper-class="'chart-type-style-' + themes" :persistent="false">
                           <template #reference>
-                            <el-select
-                              v-model="state.useless"
-                              popper-class="chart-type-hide-options"
-                              class="chart-type-select"
-                              :suffix-icon="icon_down_outlined1"
-                              :effect="themes"
-                              size="small"
-                            >
+                            <el-select v-model="state.useless" popper-class="chart-type-hide-options"
+                              class="chart-type-select" :suffix-icon="icon_down_outlined1" :effect="themes"
+                              size="small">
                               <template #prefix>
-                                <Icon
-                                  class-name="chart-type-select-icon"
-                                  v-if="state.chartTypeOptions[0]?.isPlugin"
-                                  :static-content="state.chartTypeOptions[0]?.icon"
-                                />
+                                <Icon class-name="chart-type-select-icon" v-if="state.chartTypeOptions[0]?.isPlugin"
+                                  :static-content="state.chartTypeOptions[0]?.icon" />
                                 <Icon v-else class-name="chart-type-select-icon">
-                                  <component
-                                    class="svg-icon chart-type-select-icon"
-                                    :is="iconChartMap[state.chartTypeOptions[0].icon]"
-                                  ></component>
+                                  <component class="svg-icon chart-type-select-icon"
+                                    :is="iconChartMap[state.chartTypeOptions[0].icon]"></component>
                                 </Icon>
                               </template>
                               <template #default>
-                                <el-option
-                                  v-for="item in state.chartTypeOptions"
-                                  :key="item.value"
-                                  :label="item.title"
-                                  :value="item.value"
-                                />
+                                <el-option v-for="item in state.chartTypeOptions" :key="item.value" :label="item.title"
+                                  :value="item.value" />
                               </template>
                             </el-select>
                           </template>
                           <template #default>
-                            <chart-type
-                              :themes="themes"
-                              :type="view.type"
-                              @on-type-change="onTypeChange"
-                            />
+                            <chart-type :themes="themes" :type="view.type" @on-type-change="onTypeChange" />
                           </template>
                         </el-popover>
+
                       </el-row>
+
                       <template v-if="view.plugin?.isPlugin">
-                        <plugin-component
-                          :jsname="view.plugin.staticMap['editor-data']"
-                          :view="view"
-                          :dimension="state.dimension"
-                          :quota="state.quota"
-                          :themes="themes"
-                          :emitter="emitter"
-                          @onDimensionItemChange="dimensionItemChange"
-                          @onDimensionItemRemove="dimensionItemRemove"
-                          @onNameEdit="showRename"
-                          @onCustomSort="onCustomSort"
-                          @valueFormatter="valueFormatter"
-                        />
+                        <plugin-component :jsname="view.plugin.staticMap['editor-data']" :view="view"
+                          :dimension="state.dimension" :quota="state.quota" :themes="themes" :emitter="emitter"
+                          @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove"
+                          @onNameEdit="showRename" @onCustomSort="onCustomSort" @valueFormatter="valueFormatter" />
                       </template>
                       <template v-else>
                         <!--area-->
@@ -2187,22 +2191,10 @@ const deleteChartFieldItem = id => {
                             <i class="required"></i>
                           </span>
                           <div class="area-tree-select">
-                            <el-tree-select
-                              ref="areaSelect"
-                              v-model="state.areaId"
-                              :effect="themes"
-                              :data="state.worldTree"
-                              :props="treeProps"
-                              :filterNodeMethod="filterNode"
-                              :current-node-key="state.areaId"
-                              :teleported="false"
-                              :default-expanded-keys="expandKeys"
-                              empty-text="请选择区域"
-                              node-key="id"
-                              check-strictly
-                              filterable
-                              @node-click="onAreaChange"
-                            />
+                            <el-tree-select ref="areaSelect" v-model="state.areaId" :effect="themes"
+                              :data="state.worldTree" :props="treeProps" :filterNodeMethod="filterNode"
+                              :current-node-key="state.areaId" :teleported="false" :default-expanded-keys="expandKeys"
+                              empty-text="请选择区域" node-key="id" check-strictly filterable @node-click="onAreaChange" />
                           </div>
                         </el-row>
                         <!--xAxis-->
@@ -2210,61 +2202,28 @@ const deleteChartFieldItem = id => {
                           <div class="form-draggable-title">
                             <span>
                               {{ chartViewInstance.axisConfig.xAxis.name }}
-                              <i
-                                v-if="!chartViewInstance.axisConfig.xAxis?.allowEmpty"
-                                class="required"
-                              ></i>
+                              <i v-if="!chartViewInstance.axisConfig.xAxis?.allowEmpty" class="required"></i>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('xAxis')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('xAxis')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            class="qw"
-                            @drop="$event => drop($event)"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.xAxis"
-                              :move="onMove"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addXaxis"
-                            >
+                          <div class="qw" @drop="$event => drop($event)" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.xAxis" :move="onMove" item-key="id" group="drag" animation="300"
+                              class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addXaxis">
                               <template #item="{ element, index }">
-                                <dimension-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :chart="view"
-                                  :item="element"
-                                  :index="index"
-                                  :themes="props.themes"
-                                  type="dimension"
+                                <dimension-item :dimension-data="state.dimension" :quota-data="state.quota"
+                                  :chart="view" :item="element" :index="index" :themes="props.themes" type="dimension"
                                   @onDimensionItemChange="dimensionItemChange"
-                                  @onDimensionItemRemove="dimensionItemRemove"
-                                  @onNameEdit="showRename"
-                                  @onCustomSort="onCustomSort"
-                                  @valueFormatter="valueFormatter"
-                                  @onToggleHide="onToggleHide"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                  @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                  @onCustomSort="onCustomSort" @valueFormatter="valueFormatter"
+                                  @onToggleHide="onToggleHide" @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :themes="themes" :drag-list="view.xAxis" />
@@ -2276,58 +2235,27 @@ const deleteChartFieldItem = id => {
                           <div class="form-draggable-title">
                             <span>
                               {{ chartViewInstance.axisConfig.xAxisExt.name }}
-                              <i
-                                v-if="!chartViewInstance.axisConfig.xAxisExt?.allowEmpty"
-                                class="required"
-                              ></i>
+                              <i v-if="!chartViewInstance.axisConfig.xAxisExt?.allowEmpty" class="required"></i>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('xAxisExt')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('xAxisExt')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            @drop="$event => drop($event, 'xAxisExt')"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.xAxisExt"
-                              :move="onMove"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addXaxisExt"
-                            >
+                          <div @drop="$event => drop($event, 'xAxisExt')" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.xAxisExt" :move="onMove" item-key="id" group="drag" animation="300"
+                              class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addXaxisExt">
                               <template #item="{ element, index }">
-                                <dimension-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :chart="view"
-                                  :item="element"
-                                  :index="index"
-                                  :themes="props.themes"
-                                  type="dimensionExt"
-                                  @onDimensionItemChange="dimensionItemChange"
-                                  @onDimensionItemRemove="dimensionItemRemove"
-                                  @onNameEdit="showRename"
-                                  @onCustomSort="onExtCustomSort"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                <dimension-item :dimension-data="state.dimension" :quota-data="state.quota"
+                                  :chart="view" :item="element" :index="index" :themes="props.themes"
+                                  type="dimensionExt" @onDimensionItemChange="dimensionItemChange"
+                                  @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                  @onCustomSort="onExtCustomSort" @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :drag-list="view.xAxisExt" />
@@ -2339,60 +2267,29 @@ const deleteChartFieldItem = id => {
                           <div class="form-draggable-title">
                             <span>
                               {{ chartViewInstance.axisConfig.flowMapStartName.name }}
-                              <i
-                                v-if="!chartViewInstance.axisConfig.flowMapStartName?.allowEmpty"
-                                class="required"
-                              ></i>
+                              <i v-if="!chartViewInstance.axisConfig.flowMapStartName?.allowEmpty" class="required"></i>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('flowMapStartName')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('flowMapStartName')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            class="qw"
-                            @drop="$event => drop($event, 'flowMapStartName')"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.flowMapStartName"
-                              :move="onMove"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addFlowMapStartName"
-                            >
+                          <div class="qw" @drop="$event => drop($event, 'flowMapStartName')" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.flowMapStartName" :move="onMove" item-key="id" group="drag"
+                              animation="300" class="drag-block-style" :class="{ dark: themes === 'dark' }"
+                              @add="addFlowMapStartName">
                               <template #item="{ element, index }">
-                                <dimension-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :chart="view"
-                                  :item="element"
-                                  :index="index"
-                                  :themes="props.themes"
-                                  type="flowMapStartName"
-                                  @onDimensionItemChange="dimensionItemChange"
-                                  @onDimensionItemRemove="dimensionItemRemove"
-                                  @onNameEdit="showRename"
-                                  @onCustomSort="onCustomFlowMapStartNameSort"
-                                  @valueFormatter="valueFormatter"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                <dimension-item :dimension-data="state.dimension" :quota-data="state.quota"
+                                  :chart="view" :item="element" :index="index" :themes="props.themes"
+                                  type="flowMapStartName" @onDimensionItemChange="dimensionItemChange"
+                                  @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                  @onCustomSort="onCustomFlowMapStartNameSort" @valueFormatter="valueFormatter"
+                                  @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :themes="themes" :drag-list="view.flowMapStartName" />
@@ -2404,60 +2301,29 @@ const deleteChartFieldItem = id => {
                           <div class="form-draggable-title">
                             <span>
                               {{ chartViewInstance.axisConfig.flowMapEndName.name }}
-                              <i
-                                v-if="!chartViewInstance.axisConfig.flowMapEndName?.allowEmpty"
-                                class="required"
-                              ></i>
+                              <i v-if="!chartViewInstance.axisConfig.flowMapEndName?.allowEmpty" class="required"></i>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('flowMapEndName')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('flowMapEndName')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            class="qw"
-                            @drop="$event => drop($event, 'flowMapEndName')"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.flowMapEndName"
-                              :move="onMove"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addFlowMapEndName"
-                            >
+                          <div class="qw" @drop="$event => drop($event, 'flowMapEndName')" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.flowMapEndName" :move="onMove" item-key="id" group="drag"
+                              animation="300" class="drag-block-style" :class="{ dark: themes === 'dark' }"
+                              @add="addFlowMapEndName">
                               <template #item="{ element, index }">
-                                <dimension-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :chart="view"
-                                  :item="element"
-                                  :index="index"
-                                  :themes="props.themes"
-                                  type="flowMapEndName"
-                                  @onDimensionItemChange="dimensionItemChange"
-                                  @onDimensionItemRemove="dimensionItemRemove"
-                                  @onNameEdit="showRename"
-                                  @onCustomSort="onCustomFlowMapEndNameSort"
-                                  @valueFormatter="valueFormatter"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                <dimension-item :dimension-data="state.dimension" :quota-data="state.quota"
+                                  :chart="view" :item="element" :index="index" :themes="props.themes"
+                                  type="flowMapEndName" @onDimensionItemChange="dimensionItemChange"
+                                  @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                  @onCustomSort="onCustomFlowMapEndNameSort" @valueFormatter="valueFormatter"
+                                  @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :themes="themes" :drag-list="view.flowMapEndName" />
@@ -2469,58 +2335,27 @@ const deleteChartFieldItem = id => {
                           <div class="form-draggable-title">
                             <span>
                               {{ chartViewInstance.axisConfig.extStack.name }}
-                              <i
-                                v-if="!chartViewInstance.axisConfig.extStack?.allowEmpty"
-                                class="required"
-                              ></i>
+                              <i v-if="!chartViewInstance.axisConfig.extStack?.allowEmpty" class="required"></i>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('extStack')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('extStack')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            @drop="$event => drop($event, 'extStack')"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.extStack"
-                              :move="onMove"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addExtStack"
-                            >
+                          <div @drop="$event => drop($event, 'extStack')" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.extStack" :move="onMove" item-key="id" group="drag" animation="300"
+                              class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addExtStack">
                               <template #item="{ element, index }">
-                                <dimension-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :chart="view"
-                                  :item="element"
-                                  :index="index"
-                                  :themes="props.themes"
-                                  type="dimensionStack"
-                                  @onDimensionItemChange="dimensionItemChange"
-                                  @onDimensionItemRemove="dimensionItemRemove"
-                                  @onNameEdit="showRename"
-                                  @onCustomSort="onStackCustomSort"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                <dimension-item :dimension-data="state.dimension" :quota-data="state.quota"
+                                  :chart="view" :item="element" :index="index" :themes="props.themes"
+                                  type="dimensionStack" @onDimensionItemChange="dimensionItemChange"
+                                  @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                  @onCustomSort="onStackCustomSort" @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :drag-list="view.extStack" />
@@ -2531,61 +2366,29 @@ const deleteChartFieldItem = id => {
                           <div class="form-draggable-title">
                             <span>
                               {{ chartViewInstance.axisConfig.extColor.name }}
-                              <i
-                                v-if="!chartViewInstance.axisConfig.extColor?.allowEmpty"
-                                class="required"
-                              ></i>
+                              <i v-if="!chartViewInstance.axisConfig.extColor?.allowEmpty" class="required"></i>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('extColor')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('extColor')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            class="qw"
-                            @drop="$event => drop($event, 'extColor')"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.extColor"
-                              :move="onMove"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addExtColor"
-                              @change="e => onAxisChange(e, 'extColor')"
-                            >
+                          <div class="qw" @drop="$event => drop($event, 'extColor')" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.extColor" :move="onMove" item-key="id" group="drag" animation="300"
+                              class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addExtColor"
+                              @change="e => onAxisChange(e, 'extColor')">
                               <template #item="{ element, index }">
-                                <dimension-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :chart="view"
-                                  :item="element"
-                                  :index="index"
-                                  :themes="props.themes"
-                                  type="extColor"
+                                <dimension-item :dimension-data="state.dimension" :quota-data="state.quota"
+                                  :chart="view" :item="element" :index="index" :themes="props.themes" type="extColor"
                                   @onDimensionItemChange="dimensionItemChange"
-                                  @onDimensionItemRemove="dimensionItemRemove"
-                                  @onNameEdit="showRename"
-                                  @onCustomSort="onCustomExtColorSort"
-                                  @valueFormatter="valueFormatter"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                  @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                  @onCustomSort="onCustomExtColorSort" @valueFormatter="valueFormatter"
+                                  @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :themes="themes" :drag-list="view.extColor" />
@@ -2599,87 +2402,46 @@ const deleteChartFieldItem = id => {
                               <span class="data-area-label">
                                 <span style="margin-right: 4px">
                                   {{ chartViewInstance.axisConfig.yAxis.name }}
-                                  <i
-                                    v-if="!chartViewInstance.axisConfig.yAxis?.allowEmpty"
-                                    class="required"
-                                  ></i>
+                                  <i v-if="!chartViewInstance.axisConfig.yAxis?.allowEmpty" class="required"></i>
                                 </span>
-                                <el-tooltip
-                                  v-if="chartViewInstance.axisConfig.yAxis.tooltip"
-                                  class="item"
-                                  :effect="toolTip"
-                                  placement="top"
-                                >
+                                <el-tooltip v-if="chartViewInstance.axisConfig.yAxis.tooltip" class="item"
+                                  :effect="toolTip" placement="top">
                                   <template #content>
                                     <span> {{ chartViewInstance.axisConfig.yAxis.tooltip }}</span>
                                   </template>
-                                  <el-icon
-                                    class="hint-icon"
-                                    :class="{ 'hint-icon--dark': themes === 'dark' }"
-                                  >
-                                    <Icon name="icon_info_outlined"
-                                      ><icon_info_outlined class="svg-icon"
-                                    /></Icon>
+                                  <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+                                    <Icon name="icon_info_outlined">
+                                      <icon_info_outlined class="svg-icon" />
+                                    </Icon>
                                   </el-icon>
                                 </el-tooltip>
                               </span>
-                              <el-tooltip
-                                :effect="toolTip"
-                                placement="top"
-                                :content="t('common.delete')"
-                              >
-                                <el-icon
-                                  class="remove-icon"
-                                  :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                  size="14px"
-                                  @click="removeItems('yAxis')"
-                                >
-                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                    ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                  /></Icon>
+                              <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                                <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                  size="14px" @click="removeItems('yAxis')">
+                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                    <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                  </Icon>
                                 </el-icon>
                               </el-tooltip>
                             </div>
-                            <div
-                              @drop="$event => drop($event, 'yAxis')"
-                              @dragenter="dragEnter"
-                              @dragover="$event => dragOver($event)"
-                            >
-                              <draggable
-                                :list="view.yAxis"
-                                :move="onMove"
-                                item-key="id"
-                                group="drag"
-                                animation="300"
-                                class="drag-block-style"
-                                :class="{ dark: themes === 'dark' }"
-                                @add="addYaxis"
-                                @change="e => onAxisChange(e, 'yAxis')"
-                              >
+                            <div @drop="$event => drop($event, 'yAxis')" @dragenter="dragEnter"
+                              @dragover="$event => dragOver($event)">
+                              <draggable :list="view.yAxis" :move="onMove" item-key="id" group="drag" animation="300"
+                                class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addYaxis"
+                                @change="e => onAxisChange(e, 'yAxis')">
                                 <template #item="{ element, index }">
-                                  <quota-item
-                                    :dimension-data="state.dimension"
-                                    :quota-data="state.quota"
-                                    :chart="view"
-                                    :item="element"
-                                    :index="index"
-                                    type="quota"
-                                    :themes="props.themes"
+                                  <quota-item :dimension-data="state.dimension" :quota-data="state.quota" :chart="view"
+                                    :item="element" :index="index" type="quota" :themes="props.themes"
                                     @onQuotaItemChange="item => quotaItemChange(item, 'yAxis')"
-                                    @onQuotaItemRemove="quotaItemRemove"
-                                    @onNameEdit="showRename"
-                                    @editItemFilter="showQuotaEditFilter"
-                                    @editItemCompare="showQuotaEditCompare"
-                                    @valueFormatter="valueFormatter"
-                                    @onToggleHide="onToggleHide"
-                                    @editSortPriority="editSortPriority"
-                                  />
+                                    @onQuotaItemRemove="quotaItemRemove" @onNameEdit="showRename"
+                                    @editItemFilter="showQuotaEditFilter" @editItemCompare="showQuotaEditCompare"
+                                    @valueFormatter="valueFormatter" @onToggleHide="onToggleHide"
+                                    @editSortPriority="editSortPriority" />
                                 </template>
                               </draggable>
-                              <drag-placeholder
-                                :margin-top="view.type === 'stock-line' ? '9px' : '0'"
-                                :drag-list="view.yAxis"
-                              />
+                              <drag-placeholder :margin-top="view.type === 'stock-line' ? '9px' : '0'"
+                                :drag-list="view.yAxis" />
                             </div>
                           </el-row>
                           <!-- xAxisExtRight -->
@@ -2687,59 +2449,28 @@ const deleteChartFieldItem = id => {
                             <div class="form-draggable-title">
                               <span>
                                 {{ chartViewInstance.axisConfig.extBubble.name }}
-                                <i
-                                  v-if="!chartViewInstance.axisConfig.extBubble?.allowEmpty"
-                                  class="required"
-                                ></i>
+                                <i v-if="!chartViewInstance.axisConfig.extBubble?.allowEmpty" class="required"></i>
                               </span>
-                              <el-tooltip
-                                :effect="toolTip"
-                                placement="top"
-                                :content="t('common.delete')"
-                              >
-                                <el-icon
-                                  class="remove-icon"
-                                  :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                  size="14px"
-                                  @click="removeItems('extBubble')"
-                                >
-                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                    ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                  /></Icon>
+                              <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                                <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                  size="14px" @click="removeItems('extBubble')">
+                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                    <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                  </Icon>
                                 </el-icon>
                               </el-tooltip>
                             </div>
-                            <div
-                              @drop="$event => drop($event, 'extBubble')"
-                              @dragenter="dragEnter"
-                              @dragover="$event => dragOver($event)"
-                            >
-                              <draggable
-                                :list="view.extBubble"
-                                :move="onMove"
-                                item-key="id"
-                                group="drag"
-                                animation="300"
-                                class="drag-block-style"
-                                :class="{ dark: themes === 'dark' }"
-                                @add="addExtBubble"
-                                @change="e => onAxisChange(e, 'extBubble')"
-                              >
+                            <div @drop="$event => drop($event, 'extBubble')" @dragenter="dragEnter"
+                              @dragover="$event => dragOver($event)">
+                              <draggable :list="view.extBubble" :move="onMove" item-key="id" group="drag"
+                                animation="300" class="drag-block-style" :class="{ dark: themes === 'dark' }"
+                                @add="addExtBubble" @change="e => onAxisChange(e, 'extBubble')">
                                 <template #item="{ element, index }">
-                                  <dimension-item
-                                    :dimension-data="state.dimension"
-                                    :quota-data="state.quota"
-                                    :chart="view"
-                                    :item="element"
-                                    :index="index"
-                                    :themes="props.themes"
-                                    type="xAxisExtRight"
-                                    @onDimensionItemChange="dimensionItemChange"
-                                    @onDimensionItemRemove="dimensionItemRemove"
-                                    @onNameEdit="showRename"
-                                    @onCustomSort="onExtCustomRightSort"
-                                    @editSortPriority="editSortPriority"
-                                  />
+                                  <dimension-item :dimension-data="state.dimension" :quota-data="state.quota"
+                                    :chart="view" :item="element" :index="index" :themes="props.themes"
+                                    type="xAxisExtRight" @onDimensionItemChange="dimensionItemChange"
+                                    @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                    @onCustomSort="onExtCustomRightSort" @editSortPriority="editSortPriority" />
                                 </template>
                               </draggable>
                               <drag-placeholder :drag-list="view.extBubble" />
@@ -2750,61 +2481,29 @@ const deleteChartFieldItem = id => {
                             <div class="form-draggable-title">
                               <span>
                                 {{ chartViewInstance.axisConfig.yAxisExt.name }}
-                                <i
-                                  v-if="!chartViewInstance.axisConfig.yAxisExt?.allowEmpty"
-                                  class="required"
-                                ></i>
+                                <i v-if="!chartViewInstance.axisConfig.yAxisExt?.allowEmpty" class="required"></i>
                               </span>
-                              <el-tooltip
-                                :effect="toolTip"
-                                placement="top"
-                                :content="t('common.delete')"
-                              >
-                                <el-icon
-                                  class="remove-icon"
-                                  :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                  size="14px"
-                                  @click="removeItems('yAxisExt')"
-                                >
-                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                    ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                  /></Icon>
+                              <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                                <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                  size="14px" @click="removeItems('yAxisExt')">
+                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                    <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                  </Icon>
                                 </el-icon>
                               </el-tooltip>
                             </div>
-                            <div
-                              @drop="$event => drop($event, 'yAxisExt')"
-                              @dragenter="dragEnter"
-                              @dragover="$event => dragOver($event)"
-                            >
-                              <draggable
-                                :list="view.yAxisExt"
-                                :move="onMove"
-                                item-key="id"
-                                group="drag"
-                                animation="300"
-                                class="drag-block-style"
-                                :class="{ dark: themes === 'dark' }"
-                                @add="addYaxisExt"
-                                @change="e => onAxisChange(e, 'yAxisExt')"
-                              >
+                            <div @drop="$event => drop($event, 'yAxisExt')" @dragenter="dragEnter"
+                              @dragover="$event => dragOver($event)">
+                              <draggable :list="view.yAxisExt" :move="onMove" item-key="id" group="drag" animation="300"
+                                class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addYaxisExt"
+                                @change="e => onAxisChange(e, 'yAxisExt')">
                                 <template #item="{ element, index }">
-                                  <quota-item
-                                    :dimension-data="state.dimension"
-                                    :quota-data="state.quota"
-                                    :chart="view"
-                                    :item="element"
-                                    :index="index"
-                                    type="quotaExt"
-                                    :themes="props.themes"
+                                  <quota-item :dimension-data="state.dimension" :quota-data="state.quota" :chart="view"
+                                    :item="element" :index="index" type="quotaExt" :themes="props.themes"
                                     @onQuotaItemChange="item => quotaItemChange(item, 'yAxisExt')"
-                                    @onQuotaItemRemove="quotaItemRemove"
-                                    @onNameEdit="showRename"
-                                    @editItemFilter="showQuotaEditFilter"
-                                    @editItemCompare="showQuotaEditCompare"
-                                    @valueFormatter="valueFormatter"
-                                    @editSortPriority="editSortPriority"
-                                  />
+                                    @onQuotaItemRemove="quotaItemRemove" @onNameEdit="showRename"
+                                    @editItemFilter="showQuotaEditFilter" @editItemCompare="showQuotaEditCompare"
+                                    @valueFormatter="valueFormatter" @editSortPriority="editSortPriority" />
                                 </template>
                               </draggable>
                               <drag-placeholder :drag-list="view.yAxisExt" />
@@ -2817,77 +2516,34 @@ const deleteChartFieldItem = id => {
                             <div class="form-draggable-title">
                               <span>
                                 {{ chartViewInstance.axisConfig.yAxis.name }}
-                                <i
-                                  v-if="!chartViewInstance.axisConfig.yAxis?.allowEmpty"
-                                  class="required"
-                                ></i>
+                                <i v-if="!chartViewInstance.axisConfig.yAxis?.allowEmpty" class="required"></i>
                               </span>
-                              <el-tooltip
-                                :effect="toolTip"
-                                placement="top"
-                                :content="t('common.delete')"
-                              >
-                                <el-icon
-                                  class="remove-icon"
-                                  :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                  size="14px"
-                                  @click="removeItems('yAxis')"
-                                >
-                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                    ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                  /></Icon>
+                              <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                                <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                  size="14px" @click="removeItems('yAxis')">
+                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                    <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                  </Icon>
                                 </el-icon>
                               </el-tooltip>
                             </div>
-                            <div
-                              @drop="$event => drop($event, 'yAxis')"
-                              @dragenter="dragEnter"
-                              @dragover="$event => dragOver($event)"
-                            >
-                              <draggable
-                                :list="view.yAxis"
-                                :move="onMove"
-                                item-key="id"
-                                group="drag"
-                                animation="300"
-                                class="drag-block-style"
-                                :class="{ dark: themes === 'dark' }"
-                                @add="addYaxis"
-                                @change="e => onAxisChange(e, 'yAxis')"
-                              >
+                            <div @drop="$event => drop($event, 'yAxis')" @dragenter="dragEnter"
+                              @dragover="$event => dragOver($event)">
+                              <draggable :list="view.yAxis" :move="onMove" item-key="id" group="drag" animation="300"
+                                class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addYaxis"
+                                @change="e => onAxisChange(e, 'yAxis')">
                                 <template #item="{ element, index }">
-                                  <dimension-item
-                                    v-if="element.groupType === 'd'"
-                                    :dimension-data="state.dimension"
-                                    :quota-data="state.quota"
-                                    :chart="view"
-                                    :item="element"
-                                    :index="index"
-                                    :themes="props.themes"
-                                    type="quota"
-                                    @onDimensionItemChange="dimensionItemChange"
-                                    @onDimensionItemRemove="dimensionItemRemove"
-                                    @onNameEdit="showRename"
-                                    @onCustomSort="onExtCustomSort"
-                                    @editSortPriority="editSortPriority"
-                                  />
-                                  <quota-item
-                                    v-else-if="element.groupType === 'q'"
-                                    :dimension-data="state.dimension"
-                                    :quota-data="state.quota"
-                                    :chart="view"
-                                    :item="element"
-                                    :index="index"
-                                    type="quota"
-                                    :themes="props.themes"
-                                    @onQuotaItemChange="item => quotaItemChange(item, 'yAxis')"
-                                    @onQuotaItemRemove="quotaItemRemove"
-                                    @onNameEdit="showRename"
-                                    @editItemFilter="showQuotaEditFilter"
-                                    @editItemCompare="showQuotaEditCompare"
-                                    @valueFormatter="valueFormatter"
-                                    @editSortPriority="editSortPriority"
-                                  />
+                                  <dimension-item v-if="element.groupType === 'd'" :dimension-data="state.dimension"
+                                    :quota-data="state.quota" :chart="view" :item="element" :index="index"
+                                    :themes="props.themes" type="quota" @onDimensionItemChange="dimensionItemChange"
+                                    @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                    @onCustomSort="onExtCustomSort" @editSortPriority="editSortPriority" />
+                                  <quota-item v-else-if="element.groupType === 'q'" :dimension-data="state.dimension"
+                                    :quota-data="state.quota" :chart="view" :item="element" :index="index" type="quota"
+                                    :themes="props.themes" @onQuotaItemChange="item => quotaItemChange(item, 'yAxis')"
+                                    @onQuotaItemRemove="quotaItemRemove" @onNameEdit="showRename"
+                                    @editItemFilter="showQuotaEditFilter" @editItemCompare="showQuotaEditCompare"
+                                    @valueFormatter="valueFormatter" @editSortPriority="editSortPriority" />
                                 </template>
                               </draggable>
                               <drag-placeholder :drag-list="view.yAxis" />
@@ -2898,77 +2554,35 @@ const deleteChartFieldItem = id => {
                             <div class="form-draggable-title">
                               <span>
                                 {{ chartViewInstance.axisConfig.yAxisExt.name }}
-                                <i
-                                  v-if="!chartViewInstance.axisConfig.yAxisExt?.allowEmpty"
-                                  class="required"
-                                ></i>
+                                <i v-if="!chartViewInstance.axisConfig.yAxisExt?.allowEmpty" class="required"></i>
                               </span>
-                              <el-tooltip
-                                :effect="toolTip"
-                                placement="top"
-                                :content="t('common.delete')"
-                              >
-                                <el-icon
-                                  class="remove-icon"
-                                  :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                  size="14px"
-                                  @click="removeItems('yAxisExt')"
-                                >
-                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                    ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                  /></Icon>
+                              <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                                <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                  size="14px" @click="removeItems('yAxisExt')">
+                                  <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                    <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                  </Icon>
                                 </el-icon>
                               </el-tooltip>
                             </div>
-                            <div
-                              @drop="$event => drop($event, 'yAxisExt')"
-                              @dragenter="dragEnter"
-                              @dragover="$event => dragOver($event)"
-                            >
-                              <draggable
-                                :list="view.yAxisExt"
-                                :move="onMove"
-                                item-key="id"
-                                group="drag"
-                                animation="300"
-                                class="drag-block-style"
-                                :class="{ dark: themes === 'dark' }"
-                                @add="addYaxisExt"
-                                @change="e => onAxisChange(e, 'yAxisExt')"
-                              >
+                            <div @drop="$event => drop($event, 'yAxisExt')" @dragenter="dragEnter"
+                              @dragover="$event => dragOver($event)">
+                              <draggable :list="view.yAxisExt" :move="onMove" item-key="id" group="drag" animation="300"
+                                class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addYaxisExt"
+                                @change="e => onAxisChange(e, 'yAxisExt')">
                                 <template #item="{ element, index }">
-                                  <dimension-item
-                                    v-if="element.groupType === 'd'"
-                                    :dimension-data="state.dimension"
-                                    :quota-data="state.quota"
-                                    :chart="view"
-                                    :item="element"
-                                    :index="index"
-                                    :themes="props.themes"
-                                    type="quotaExt"
-                                    @onDimensionItemChange="dimensionItemChange"
-                                    @onDimensionItemRemove="dimensionItemRemove"
-                                    @onNameEdit="showRename"
-                                    @onCustomSort="onExtCustomSort"
-                                    @editSortPriority="editSortPriority"
-                                  />
-                                  <quota-item
-                                    v-else-if="element.groupType === 'q'"
-                                    :dimension-data="state.dimension"
-                                    :quota-data="state.quota"
-                                    :chart="view"
-                                    :item="element"
-                                    :index="index"
-                                    type="quotaExt"
-                                    :themes="props.themes"
+                                  <dimension-item v-if="element.groupType === 'd'" :dimension-data="state.dimension"
+                                    :quota-data="state.quota" :chart="view" :item="element" :index="index"
+                                    :themes="props.themes" type="quotaExt" @onDimensionItemChange="dimensionItemChange"
+                                    @onDimensionItemRemove="dimensionItemRemove" @onNameEdit="showRename"
+                                    @onCustomSort="onExtCustomSort" @editSortPriority="editSortPriority" />
+                                  <quota-item v-else-if="element.groupType === 'q'" :dimension-data="state.dimension"
+                                    :quota-data="state.quota" :chart="view" :item="element" :index="index"
+                                    type="quotaExt" :themes="props.themes"
                                     @onQuotaItemChange="item => quotaItemChange(item, 'yAxisExt')"
-                                    @onQuotaItemRemove="quotaItemRemove"
-                                    @onNameEdit="showRename"
-                                    @editItemFilter="showQuotaEditFilter"
-                                    @editItemCompare="showQuotaEditCompare"
-                                    @valueFormatter="valueFormatter"
-                                    @editSortPriority="editSortPriority"
-                                  />
+                                    @onQuotaItemRemove="quotaItemRemove" @onNameEdit="showRename"
+                                    @editItemFilter="showQuotaEditFilter" @editItemCompare="showQuotaEditCompare"
+                                    @valueFormatter="valueFormatter" @editSortPriority="editSortPriority" />
                                 </template>
                               </draggable>
                               <drag-placeholder :drag-list="view.yAxisExt" />
@@ -2981,80 +2595,41 @@ const deleteChartFieldItem = id => {
                             <span class="data-area-label">
                               <span style="margin-right: 4px">
                                 {{ chartViewInstance.axisConfig.extBubble.name }}
-                                <i
-                                  v-if="!chartViewInstance.axisConfig.extBubble?.allowEmpty"
-                                  class="required"
-                                ></i>
+                                <i v-if="!chartViewInstance.axisConfig.extBubble?.allowEmpty" class="required"></i>
                               </span>
-                              <el-tooltip
-                                v-if="chartViewInstance.axisConfig.extBubble.tooltip"
-                                class="item"
-                                :effect="toolTip"
-                                placement="top"
-                              >
+                              <el-tooltip v-if="chartViewInstance.axisConfig.extBubble.tooltip" class="item"
+                                :effect="toolTip" placement="top">
                                 <template #content>
                                   <span> {{ chartViewInstance.axisConfig.extBubble.tooltip }}</span>
                                 </template>
-                                <el-icon
-                                  class="hint-icon"
-                                  :class="{ 'hint-icon--dark': themes === 'dark' }"
-                                >
-                                  <Icon name="icon_info_outlined"
-                                    ><icon_info_outlined class="svg-icon"
-                                  /></Icon>
+                                <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+                                  <Icon name="icon_info_outlined">
+                                    <icon_info_outlined class="svg-icon" />
+                                  </Icon>
                                 </el-icon>
                               </el-tooltip>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('extBubble')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('extBubble')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            @drop="$event => drop($event, 'extBubble')"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.extBubble"
-                              :move="onMove"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addExtBubble"
-                              @change="e => onAxisChange(e, 'extBubble')"
-                            >
+                          <div @drop="$event => drop($event, 'extBubble')" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.extBubble" :move="onMove" item-key="id" group="drag" animation="300"
+                              class="drag-block-style" :class="{ dark: themes === 'dark' }" @add="addExtBubble"
+                              @change="e => onAxisChange(e, 'extBubble')">
                               <template #item="{ element, index }">
-                                <quota-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :chart="view"
-                                  :item="element"
-                                  :index="index"
-                                  type="extBubble"
-                                  :themes="props.themes"
+                                <quota-item :dimension-data="state.dimension" :quota-data="state.quota" :chart="view"
+                                  :item="element" :index="index" type="extBubble" :themes="props.themes"
                                   @onQuotaItemChange="item => quotaItemChange(item, 'extBubble')"
-                                  @onQuotaItemRemove="quotaItemRemove"
-                                  @onNameEdit="showRename"
-                                  @editItemFilter="showQuotaEditFilter"
-                                  @editItemCompare="showQuotaEditCompare"
-                                  @valueFormatter="valueFormatter"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                  @onQuotaItemRemove="quotaItemRemove" @onNameEdit="showRename"
+                                  @editItemFilter="showQuotaEditFilter" @editItemCompare="showQuotaEditCompare"
+                                  @valueFormatter="valueFormatter" @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :drag-list="view.extBubble" />
@@ -3072,63 +2647,33 @@ const deleteChartFieldItem = id => {
                                 <template #content>
                                   <span> {{ t('chart.drill_dimension_tip') }}</span>
                                 </template>
-                                <el-icon
-                                  class="hint-icon"
-                                  :class="{ 'hint-icon--dark': themes === 'dark' }"
-                                >
-                                  <Icon name="icon_info_outlined"
-                                    ><icon_info_outlined class="svg-icon"
-                                  /></Icon>
+                                <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+                                  <Icon name="icon_info_outlined">
+                                    <icon_info_outlined class="svg-icon" />
+                                  </Icon>
                                 </el-icon>
                               </el-tooltip>
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('drillFields')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('drillFields')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
-                          <div
-                            @drop="$event => drop($event, 'drillFields')"
-                            @dragenter="dragEnter"
-                            @dragover="$event => dragOver($event)"
-                          >
-                            <draggable
-                              :list="view.drillFields"
-                              item-key="id"
-                              group="drag"
-                              animation="300"
-                              :move="onMove"
-                              class="drag-block-style"
-                              :class="{ dark: themes === 'dark' }"
-                              @add="addDrill"
-                            >
+                          <div @drop="$event => drop($event, 'drillFields')" @dragenter="dragEnter"
+                            @dragover="$event => dragOver($event)">
+                            <draggable :list="view.drillFields" item-key="id" group="drag" animation="300"
+                              :move="onMove" class="drag-block-style" :class="{ dark: themes === 'dark' }"
+                              @add="addDrill">
                               <template #item="{ element, index }">
-                                <drill-item
-                                  :key="element.id"
-                                  :index="index"
-                                  :chart="view"
-                                  :item="element"
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
-                                  :themes="props.themes"
-                                  @onDimensionItemChange="drillItemChange"
-                                  @onDimensionItemRemove="drillItemRemove"
-                                  @onNameEdit="showRename"
-                                  @onCustomSort="onDrillCustomSort"
-                                  @editSortPriority="editSortPriority"
-                                />
+                                <drill-item :key="element.id" :index="index" :chart="view" :item="element"
+                                  :dimension-data="state.dimension" :quota-data="state.quota" :themes="props.themes"
+                                  @onDimensionItemChange="drillItemChange" @onDimensionItemRemove="drillItemRemove"
+                                  @onNameEdit="showRename" @onCustomSort="onDrillCustomSort"
+                                  @editSortPriority="editSortPriority" />
                               </template>
                             </draggable>
                             <drag-placeholder :drag-list="view.drillFields" />
@@ -3136,69 +2681,49 @@ const deleteChartFieldItem = id => {
                         </el-row>
 
                         <!--filter-->
-                        <el-row v-if="view.type != 'three-map'"  class="padding-lr drag-data no-top-border no-top-padding">
+                        <el-row v-if="view.type != 'three-map'"
+                          class="padding-lr drag-data no-top-border no-top-padding">
                           <div class="form-draggable-title">
-                            <span >
+                            <span>
                               {{ t('chart.result_filter') }}
                             </span>
-                            <el-tooltip
-                              :effect="toolTip"
-                              placement="top"
-                              :content="t('common.delete')"
-                            >
-                              <el-icon
-                                class="remove-icon"
-                                :class="{ 'remove-icon--dark': themes === 'dark' }"
-                                size="14px"
-                                @click="removeItems('customFilter')"
-                              >
-                                <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                                  ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                                /></Icon>
+                            <el-tooltip :effect="toolTip" placement="top" :content="t('common.delete')">
+                              <el-icon class="remove-icon" :class="{ 'remove-icon--dark': themes === 'dark' }"
+                                size="14px" @click="removeItems('customFilter')">
+                                <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                                  <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                                </Icon>
                               </el-icon>
                             </el-tooltip>
                           </div>
 
-                          <div
-                            class="tree-btn"
-                            v-if="isFilterActive || themes === 'dark'"
+                          <div class="tree-btn" v-if="isFilterActive || themes === 'dark'"
                             :class="{ 'tree-btn--dark': themes === 'dark', active: isFilterActive }"
-                            @click="openTreeFilter"
-                          >
+                            @click="openTreeFilter">
                             <el-icon style="margin-right: 2px; font-size: 12px">
-                              <Icon class="svg-background" name="icon-filter"
-                                ><iconFilter class="svg-icon svg-background"
-                              /></Icon>
+                              <Icon class="svg-background" name="icon-filter">
+                                <iconFilter class="svg-icon svg-background" />
+                              </Icon>
                             </el-icon>
 
                             <span>{{ $t('chart.filter') }}</span>
                           </div>
-                          <el-button
-                            v-else
-                            class="tree-btn_secondary"
-                            secondary
-                            @click="openTreeFilter"
-                          >
+                          <el-button v-else class="tree-btn_secondary" secondary @click="openTreeFilter">
                             <template #icon>
-                              <Icon><iconFilter class="svg-icon svg-background" /></Icon>
+                              <Icon>
+                                <iconFilter class="svg-icon svg-background" />
+                              </Icon>
                             </template>
                             <span>{{ $t('chart.filter') }}</span>
                           </el-button>
                         </el-row>
                         <div v-if="view.type == 'three-map'">
-                          <threeDisplay  :view="view" />
+                          <threeDisplay :view="view" />
                         </div>
                         <el-row v-if="showAggregate" class="refresh-area">
-                          <el-form-item
-                            class="form-item no-margin-bottom"
-                            :class="'form-item-' + themes"
-                          >
-                            <el-checkbox
-                              v-model="view.aggregate"
-                              :effect="themes"
-                              size="small"
-                              @change="aggregateChange"
-                            >
+                          <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+                            <el-checkbox v-model="view.aggregate" :effect="themes" size="small"
+                              @change="aggregateChange">
                               {{ t('chart.aggregate_time') }}
                             </el-checkbox>
                           </el-form-item>
@@ -3207,53 +2732,22 @@ const deleteChartFieldItem = id => {
                     </el-scrollbar>
                     <el-footer :class="{ 'refresh-active-footer': view.refreshViewEnable }">
                       <el-row class="refresh-area">
-                        <el-form-item
-                          class="form-item no-margin-bottom"
-                          :class="'form-item-' + themes"
-                        >
-                          <el-checkbox
-                            v-model="view.refreshViewEnable"
-                            :effect="themes"
-                            size="small"
-                            @change="recordSnapshotInfo('render')"
-                          >
+                        <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+                          <el-checkbox v-model="view.refreshViewEnable" :effect="themes" size="small"
+                            @change="recordSnapshotInfo('render')">
                             {{ t('visualization.refresh_frequency') }}
                           </el-checkbox>
                         </el-form-item>
                         <el-row v-if="view.refreshViewEnable">
-                          <el-form-item
-                            class="form-item no-margin-bottom select-append"
-                            :class="'form-item-' + themes"
-                          >
-                            <el-input
-                              v-model.number="view.refreshTime"
-                              :effect="themes"
-                              :class="[themes === 'dark' && 'dv-dark']"
-                              size="small"
-                              :min="1"
-                              :max="3600"
-                              :disabled="!view.refreshViewEnable"
-                              @change="onRefreshChange"
-                            >
+                          <el-form-item class="form-item no-margin-bottom select-append" :class="'form-item-' + themes">
+                            <el-input v-model.number="view.refreshTime" :effect="themes"
+                              :class="[themes === 'dark' && 'dv-dark']" size="small" :min="1" :max="3600"
+                              :disabled="!view.refreshViewEnable" @change="onRefreshChange">
                               <template #append>
-                                <el-select
-                                  v-model="view.refreshUnit"
-                                  :effect="themes"
-                                  size="small"
-                                  placeholder="Select"
-                                  style="width: 80px"
-                                  @change="recordSnapshotInfo('render')"
-                                >
-                                  <el-option
-                                    :effect="themes"
-                                    :label="t('visualization.minute')"
-                                    :value="'minute'"
-                                  />
-                                  <el-option
-                                    :effect="themes"
-                                    :label="t('visualization.second')"
-                                    :value="'second'"
-                                  />
+                                <el-select v-model="view.refreshUnit" :effect="themes" size="small" placeholder="Select"
+                                  style="width: 80px" @change="recordSnapshotInfo('render')">
+                                  <el-option :effect="themes" :label="t('visualization.minute')" :value="'minute'" />
+                                  <el-option :effect="themes" :label="t('visualization.second')" :value="'second'" />
                                 </el-select>
                               </template>
                             </el-input>
@@ -3266,46 +2760,25 @@ const deleteChartFieldItem = id => {
                             {{ t('chart.result_count') }}
                           </span>
                           <span style="padding-left: 8px" v-if="view.type !== 'richTextView'">
-                            <el-radio-group
-                              v-model="view.resultMode"
-                              :effect="themes"
-                              class="radio-span"
-                              size="small"
-                              @change="recordSnapshotInfo('render')"
-                            >
+                            <el-radio-group v-model="view.resultMode" :effect="themes" class="radio-span" size="small"
+                              @change="recordSnapshotInfo('render')">
                               <el-radio class="margin20-radio" label="all" :effect="themes">
-                                <span
-                                  class="result-count-label"
-                                  :class="{ dark: themes === 'dark' }"
-                                >
+                                <span class="result-count-label" :class="{ dark: themes === 'dark' }">
                                   {{ t('chart.result_mode_all') }}
                                 </span>
                               </el-radio>
                               <el-radio label="custom" :effect="themes">
-                                <el-input-number
-                                  v-model="view.resultCount"
-                                  :min="1"
-                                  :max="1000000"
-                                  :controls="false"
-                                  :effect="themes"
-                                  :step-strictly="true"
-                                  :value-on-clear="1000"
-                                  :disabled="view.resultMode === 'all'"
-                                  class="result-count"
-                                  size="small"
-                                  @change="recordSnapshotInfo('calcData')"
-                                />
+                                <el-input-number v-model="view.resultCount" :min="1" :max="1000000" :controls="false"
+                                  :effect="themes" :step-strictly="true" :value-on-clear="1000"
+                                  :disabled="view.resultMode === 'all'" class="result-count" size="small"
+                                  @change="recordSnapshotInfo('calcData')" />
                               </el-radio>
                             </el-radio-group>
                           </span>
                         </div>
 
-                        <el-button
-                          :disabled="disableUpdate"
-                          type="primary"
-                          class="result-style-button"
-                          @click="updateChartData(view)"
-                        >
+                        <el-button :disabled="disableUpdate" type="primary" class="result-style-button"
+                          @click="updateChartData(view)">
                           <span style="font-size: 12px">
                             {{ t('chart.update_chart_data') }}
                           </span>
@@ -3313,104 +2786,83 @@ const deleteChartFieldItem = id => {
                       </el-row>
                     </el-footer>
                   </el-container>
-                </el-tab-pane>         
-
-                <el-tab-pane
-                  name="style"
-                  :label="t('chart.chart_style')"
-                  class="padding-tab"
-                  style="width: 100%"
-                >
+                </el-tab-pane>
+                <el-tab-pane v-if="view.type.includes('map')" name="base" :label="t('chart.chart_base')"
+                  class="padding-tab">
+                  <el-row class="drag-data padding-lr" style="width: 100%;">
+                    <span class="data-area-label">{{ t('chart.switch_base') }}</span>
+                    <el-select v-model="mapSelect.mapType" class="chart-type-select" size="small"
+                      @change="changestatus()">
+                      <el-option v-for="item in mapList" :key="item.type" :label="item.title" :value="item.type" />
+                    </el-select>
+                    <div v-if="mapSelect.mapType != 'zidingyi'">
+                      <span class="data-area-label" style="margin:5px;">Key</span>
+                      <el-input :effect="props.themes" v-model="mapSelect.key" size="small" clearable
+                        :placeholder="t('commons.input_content')" />
+                      <span class="data-area-label" style="margin:5px;">{{ t('chart.security_code') }}</span>
+                      <el-input :effect="props.themes" v-model="mapSelect.securityCode" size="small" clearable
+                        :placeholder="t('commons.input_content')" />
+                    </div>
+                    <div v-if="mapSelect.mapType == 'zidingyi'">
+                        <span class="data-area-label" style="margin:5px;">{{ t('chart.layer_name') }}</span>
+                      <el-input :effect="props.themes" v-model="mapSelect.layers" size="small" clearable
+                        :placeholder="t('commons.input_content')" />
+                        <span class="data-area-label" style="margin:5px;">{{ t('chart.map_interface') }}</span>
+                      <el-input :effect="props.themes" v-model="mapSelect.url" size="small" clearable
+                        :placeholder="t('commons.input_content')" />
+                    </div>
+                    <el-button type="primary" class="result-style-button" style="margin-top: 15px;" @click="updatamap">
+                      <span style="font-size: 12px">
+                        {{ t('chart.update_base') }}
+                      </span>
+                    </el-button>
+                  </el-row>
+                </el-tab-pane>
+                <el-tab-pane name="style" :label="t('chart.chart_style')" class="padding-tab" style="width: 100%">
                   <el-container direction="vertical">
                     <el-scrollbar class="drag_main_area">
                       <template v-if="view.plugin?.isPlugin">
-                        <plugin-component
-                          :jsname="view.plugin.staticMap['editor-style']"
-                          :view="view"
-                          :dimension="state.dimension"
-                          :quota="state.quota"
-                          :themes="themes"
-                          :emitter="emitter"
-                        />
+                        <plugin-component :jsname="view.plugin.staticMap['editor-style']" :view="view"
+                          :dimension="state.dimension" :quota="state.quota" :themes="themes" :emitter="emitter" />
                       </template>
                       <template v-else>
-                        <chart-style
-                          v-if="chartStyleShow"
-                          :properties="chartViewInstance.properties"
+                        <chart-style v-if="chartStyleShow" :properties="chartViewInstance.properties"
                           :property-inner-all="chartViewInstance.propertyInner"
                           :selector-spec="chartViewInstance.selectorSpec"
                           :common-background-pop="curComponent?.commonBackground"
-                          :common-border-pop="curComponent?.style"
-                          :event-info="curComponent?.events"
-                          :chart="view"
-                          :themes="themes"
-                          :dimension-data="state.dimension"
-                          :quota-data="state.quota"
-                          :all-fields="allFields"
-                          @onColorChange="onColorChange"
-                          @onMiscChange="onMiscChange"
-                          @onLabelChange="onLabelChange"
-                          @onTooltipChange="onTooltipChange"
-                          @onChangeXAxisForm="onChangeXAxisForm"
-                          @onChangeYAxisForm="onChangeYAxisForm"
-                          @onChangeYAxisExtForm="onChangeYAxisExtForm"
-                          @onTextChange="onTextChange"
-                          @onGraphicTextChange="onGraphicTextChange"
-                          @onIndicatorChange="onIndicatorChange"
-                          @onIndicatorNameChange="onIndicatorNameChange"
-                          @onLegendChange="onLegendChange"
-                          @onBackgroundChange="onBackgroundChange"
-                          @onStyleAttrChange="onStyleAttrChange"
-                          @onBasicStyleChange="onBasicStyleChange"
-                          @onTableHeaderChange="onTableHeaderChange"
-                          @onTableCellChange="onTableCellChange"
-                          @onTableTotalChange="onTableTotalChange"
-                          @onChangeMiscStyleForm="onChangeMiscStyleForm"
-                          @onExtTooltipChange="onExtTooltipChange"
-                          @onChangeQuadrantForm="onChangeQuadrantForm"
+                          :common-border-pop="curComponent?.style" :event-info="curComponent?.events" :chart="view"
+                          :themes="themes" :dimension-data="state.dimension" :quota-data="state.quota"
+                          :all-fields="allFields" @onColorChange="onColorChange" @onMiscChange="onMiscChange"
+                          @onLabelChange="onLabelChange" @onTooltipChange="onTooltipChange"
+                          @onChangeXAxisForm="onChangeXAxisForm" @onChangeYAxisForm="onChangeYAxisForm"
+                          @onChangeYAxisExtForm="onChangeYAxisExtForm" @onTextChange="onTextChange"
+                          @onIndicatorChange="onIndicatorChange" @onIndicatorNameChange="onIndicatorNameChange"
+                          @onLegendChange="onLegendChange" @onBackgroundChange="onBackgroundChange"
+                          @onStyleAttrChange="onStyleAttrChange" @onBasicStyleChange="onBasicStyleChange"
+                          @onTableHeaderChange="onTableHeaderChange" @onTableCellChange="onTableCellChange"
+                          @onTableTotalChange="onTableTotalChange" @onChangeMiscStyleForm="onChangeMiscStyleForm"
+                          @onExtTooltipChange="onExtTooltipChange" @onChangeQuadrantForm="onChangeQuadrantForm"
                           @onChangeFlowMapLineForm="onChangeFlowMapLineForm"
-                          @onChangeFlowMapPointForm="onChangeFlowMapPointForm"
-                        />
+                          @onChangeFlowMapPointForm="onChangeFlowMapPointForm" />
                       </template>
                     </el-scrollbar>
                   </el-container>
                 </el-tab-pane>
 
-                <el-tab-pane
-                  name="senior"
-                  :label="t('chart.senior')"
-                  class="padding-tab"
-                  style="width: 100%"
-                >
+                <el-tab-pane name="senior" :label="t('chart.senior')" class="padding-tab" style="width: 100%">
                   <el-container direction="vertical">
                     <el-scrollbar class="drag_main_area">
                       <template v-if="view.plugin?.isPlugin">
-                        <plugin-component
-                          :jsname="view.plugin.staticMap['editor-senior']"
-                          :view="view"
-                          :dimension="state.dimension"
-                          :quota="state.quota"
-                          :themes="themes"
-                          :emitter="emitter"
-                        />
+                        <plugin-component :jsname="view.plugin.staticMap['editor-senior']" :view="view"
+                          :dimension="state.dimension" :quota="state.quota" :themes="themes" :emitter="emitter" />
                       </template>
                       <template v-else>
-                        <senior
-                          :chart="view"
-                          :quota-data="view.yAxis"
-                          :quota-ext-data="view.yAxisExt"
-                          :fields-data="allFields"
-                          :themes="themes"
-                          :properties="chartViewInstance.properties"
-                          :property-inner-all="chartViewInstance.propertyInner"
-                          :event-info="curComponent?.events"
-                          @onFunctionCfgChange="onFunctionCfgChange"
-                          @onAssistLineChange="onAssistLineChange"
-                          @onScrollCfgChange="onScrollCfgChange"
-                          @onThresholdChange="onThresholdChange"
-                          @onMapMappingChange="onMapMappingChange"
-                          @onBubbleAnimateChange="onBubbleAnimateChange"
-                        />
+                        <senior :chart="view" :quota-data="view.yAxis" :quota-ext-data="view.yAxisExt"
+                          :fields-data="allFields" :themes="themes" :properties="chartViewInstance.properties"
+                          :property-inner-all="chartViewInstance.propertyInner" :event-info="curComponent?.events"
+                          @onFunctionCfgChange="onFunctionCfgChange" @onAssistLineChange="onAssistLineChange"
+                          @onScrollCfgChange="onScrollCfgChange" @onThresholdChange="onThresholdChange"
+                          @onMapMappingChange="onMapMappingChange" @onBubbleAnimateChange="onBubbleAnimateChange" />
                       </template>
                     </el-scrollbar>
                   </el-container>
@@ -3419,60 +2871,33 @@ const deleteChartFieldItem = id => {
             </el-row>
           </div>
         </div>
-        <div
-          class="dataset-main content-area"
-          :class="{
-            'content-area-close': canvasCollapse.datasetAreaCollapse,
-            'content-area-right-open': !canvasCollapse.datasetAreaCollapse
-          }"
-        >
-          <el-icon
-            :title="$t('visualization.dataset')"
-            class="custom-icon"
-            size="20px"
-            @click="collapseChange('datasetAreaCollapse')"
-          >
+        <div class="dataset-main content-area" :class="{
+          'content-area-close': canvasCollapse.datasetAreaCollapse,
+          'content-area-right-open': !canvasCollapse.datasetAreaCollapse
+        }">
+          <el-icon :title="$t('visualization.dataset')" class="custom-icon" size="20px"
+            @click="collapseChange('datasetAreaCollapse')">
             <Fold v-if="canvasCollapse.datasetAreaCollapse" class="collapse-icon" />
             <Expand v-else class="collapse-icon" />
           </el-icon>
           <div v-if="canvasCollapse.datasetAreaCollapse" class="collapse-title">
             <span style="font-size: 14px">{{ t('visualization.dataset') }}</span>
           </div>
-          <el-container
-            v-if="!canvasCollapse.datasetAreaCollapse"
-            direction="vertical"
-            class="dataset-area view-panel-row"
-          >
+          <el-container v-if="!canvasCollapse.datasetAreaCollapse" direction="vertical"
+            class="dataset-area view-panel-row">
             <el-header class="editor-title">
               <span style="font-size: 14px">{{ t('visualization.dataset') }}</span>
             </el-header>
             <el-main class="dataset-main-top">
               <el-row class="dataset-select">
-                <dataset-select
-                  ref="datasetSelector"
-                  v-model="view.tableId"
-                  style="flex: 1"
-                  :view-id="view.id"
-                  :state-obj="state"
-                  :themes="themes"
-                  @add-ds-window="addDsWindow"
-                  @on-dataset-change="changeDataset"
-                />
-                <el-tooltip
-                  :effect="toolTip"
-                  :content="$t('deDataset.edit_dataset')"
-                  placement="top"
-                >
-                  <el-icon
-                    v-if="curDatasetWeight >= 7 && !isDataEaseBi"
-                    class="field-search-icon-btn"
-                    :class="{ dark: themes === 'dark' }"
-                    style="margin-left: 8px"
-                    @click="editDs"
-                  >
-                    <Icon name="icon_edit_outlined" class="el-icon-arrow-down el-icon-delete"
-                      ><icon_edit_outlined class="svg-icon el-icon-arrow-down el-icon-delete"
-                    /></Icon>
+                <dataset-select ref="datasetSelector" v-model="view.tableId" style="flex: 1" :view-id="view.id"
+                  :state-obj="state" :themes="themes" @add-ds-window="addDsWindow" @on-dataset-change="changeDataset" />
+                <el-tooltip :effect="toolTip" :content="$t('deDataset.edit_dataset')" placement="top">
+                  <el-icon v-if="curDatasetWeight >= 7 && !isDataEaseBi" class="field-search-icon-btn"
+                    :class="{ dark: themes === 'dark' }" style="margin-left: 8px" @click="editDs">
+                    <Icon name="icon_edit_outlined" class="el-icon-arrow-down el-icon-delete">
+                      <icon_edit_outlined class="svg-icon el-icon-arrow-down el-icon-delete" />
+                    </Icon>
                   </el-icon>
                 </el-tooltip>
               </el-row>
@@ -3480,136 +2905,79 @@ const deleteChartFieldItem = id => {
                 <div class="dataset-search-label" :class="{ dark: themes === 'dark' }">
                   <span>{{ t('chart.field') }}</span>
                   <span>
-                    <el-tooltip
-                      :effect="toolTip"
-                      :content="$t('visualization.refresh')"
-                      placement="top"
-                    >
-                      <el-icon
-                        class="field-search-icon-btn"
-                        :class="{ dark: themes === 'dark' }"
-                        @click="getFields(view.tableId, view.id, view.type)"
-                      >
-                        <Icon name="icon_refresh_outlined" class="el-icon-arrow-down el-icon-delete"
-                          ><icon_refresh_outlined
-                            class="svg-icon el-icon-arrow-down el-icon-delete"
-                        /></Icon>
+                    <el-tooltip :effect="toolTip" :content="$t('visualization.refresh')" placement="top">
+                      <el-icon class="field-search-icon-btn" :class="{ dark: themes === 'dark' }"
+                        @click="getFields(view.tableId, view.id, view.type)">
+                        <Icon name="icon_refresh_outlined" class="el-icon-arrow-down el-icon-delete">
+                          <icon_refresh_outlined class="svg-icon el-icon-arrow-down el-icon-delete" />
+                        </Icon>
                       </el-icon>
                     </el-tooltip>
-                    <el-icon
-                      v-if="false"
-                      class="field-search-icon-btn"
-                      :class="{ dark: themes === 'dark' }"
-                      @click="addCalcField('d')"
-                    >
-                      <Icon name="icon_add_outlined" class="el-icon-arrow-down el-icon-delete"
-                        ><icon_add_outlined class="svg-icon el-icon-arrow-down el-icon-delete"
-                      /></Icon>
+                    <el-icon v-if="false" class="field-search-icon-btn" :class="{ dark: themes === 'dark' }"
+                      @click="addCalcField('d')">
+                      <Icon name="icon_add_outlined" class="el-icon-arrow-down el-icon-delete">
+                        <icon_add_outlined class="svg-icon el-icon-arrow-down el-icon-delete" />
+                      </Icon>
                     </el-icon>
                   </span>
                 </div>
-                <el-input
-                  v-model="state.searchField"
-                  size="middle"
-                  :effect="themes"
-                  class="dataset-search-input"
-                  :class="{ dark: themes === 'dark' }"
-                  :placeholder="t('chart.search') + ' ' + t('chart.field')"
-                  clearable
-                >
+                <el-input v-model="state.searchField" size="middle" :effect="themes" class="dataset-search-input"
+                  :class="{ dark: themes === 'dark' }" :placeholder="t('chart.search') + ' ' + t('chart.field')"
+                  clearable>
                   <template #prefix>
                     <el-icon class="el-input__icon">
-                      <Icon name="icon_search-outline_outlined"
-                        ><icon_searchOutline_outlined class="svg-icon"
-                      /></Icon>
+                      <Icon name="icon_search-outline_outlined">
+                        <icon_searchOutline_outlined class="svg-icon" />
+                      </Icon>
                     </el-icon>
                   </template>
                 </el-input>
               </el-row>
-              <div
-                ref="elDrag"
-                v-loading="fieldLoading && !fullscreenFlag"
-                style="height: calc(100% - 137px); min-height: 120px;margin-top: 10px;"
-              >
-                <div
-                  class="padding-lr field-height first right-dimension"
-                  :class="{ dark: themes === 'dark', 'user-select': isDragging }"
-                  :style="{
+              <div ref="elDrag" v-loading="fieldLoading && !fullscreenFlag"
+                style="height: calc(100% - 137px); min-height: 120px;margin-top: 10px;">
+                <div class="padding-lr field-height first right-dimension"
+                  :class="{ dark: themes === 'dark', 'user-select': isDragging }" :style="{
                     height: fieldDHeight + 'px'
-                  }"
-                >
+                  }">
                   <label>{{ t('chart.dimension') }}</label>
                   <el-scrollbar class="drag-list">
-                    <div
-                      v-for="element in dimensionData"
-                      :key="element.id"
-                      :draggable="true"
-                      class="item father"
-                      @click.ctrl="setActiveCtrl(element)"
-                      @click.meta="setActiveCtrl(element)"
-                      @click.exact="setActive(element)"
-                      @click.shift="setActiveShift(element)"
-                      @dragstart="$event => singleDragStartD($event, element, 'dimension')"
-                      @dragend="singleDragEnd"
-                    >
-                      <div
-                        class="items flex-align-center"
-                        :class="[
-                          'item-dimension--' + themes,
-                          isDraggingItem && 'is-dragging-item',
-                          activeDimension.map(itx => itx.id).includes(element.id) && 'active'
-                        ]"
-                      >
+                    <div v-for="element in dimensionData" :key="element.id" :draggable="true" class="item father"
+                      @click.ctrl="setActiveCtrl(element)" @click.meta="setActiveCtrl(element)"
+                      @click.exact="setActive(element)" @click.shift="setActiveShift(element)"
+                      @dragstart="$event => singleDragStartD($event, element, 'dimension')" @dragend="singleDragEnd">
+                      <div class="items flex-align-center" :class="[
+                        'item-dimension--' + themes,
+                        isDraggingItem && 'is-dragging-item',
+                        activeDimension.map(itx => itx.id).includes(element.id) && 'active'
+                      ]">
                         <el-icon>
-                          <Icon
-                            ><component
-                              class="svg-icon"
-                              :class="`field-icon-${
-                                fieldType[[2, 3].includes(element.deType) ? 2 : 0]
-                              }`"
-                              :is="getIconName(element.deType, element.extField)"
-                            ></component
-                          ></Icon>
+                          <Icon>
+                            <component class="svg-icon" :class="`field-icon-${fieldType[[2, 3].includes(element.deType) ? 2 : 0]
+                              }`" :is="getIconName(element.deType, element.extField)"></component>
+                          </Icon>
                         </el-icon>
-                        <span
-                          class="field-name ellipsis"
-                          :class="{ dark: themes === 'dark' }"
-                          :title="element.name"
-                          >{{ element.name }}</span
-                        >
-                        <el-icon
-                          v-if="element.id !== '-1' && !element.chartId"
-                          class="field-setting child"
-                          :class="{ 'remove-icon--dark': themes === 'dark' }"
-                          size="14px"
-                          @click.stop="copyChartFieldItem(element.id)"
-                        >
-                          <Icon class-name="inner-class" name="icon_copy_outlined"
-                            ><icon_copy_outlined class="svg-icon inner-class"
-                          /></Icon>
+                        <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }" :title="element.name">{{
+                          element.name }}</span>
+                        <el-icon v-if="element.id !== '-1' && !element.chartId" class="field-setting child"
+                          :class="{ 'remove-icon--dark': themes === 'dark' }" size="14px"
+                          @click.stop="copyChartFieldItem(element.id)">
+                          <Icon class-name="inner-class" name="icon_copy_outlined">
+                            <icon_copy_outlined class="svg-icon inner-class" />
+                          </Icon>
                         </el-icon>
-                        <el-icon
-                          v-if="element.id !== '-1' && element.chartId"
-                          class="field-setting child"
-                          :class="{ 'remove-icon--dark': themes === 'dark' }"
-                          size="14px"
-                          @click.stop="deleteChartFieldItem(element.id)"
-                        >
-                          <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                            ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                          /></Icon>
+                        <el-icon v-if="element.id !== '-1' && element.chartId" class="field-setting child"
+                          :class="{ 'remove-icon--dark': themes === 'dark' }" size="14px"
+                          @click.stop="deleteChartFieldItem(element.id)">
+                          <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                            <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                          </Icon>
                         </el-icon>
-                        <el-dropdown
-                          v-if="element.id !== '-1' && false"
-                          :effect="props.themes"
-                          placement="right-start"
-                          trigger="click"
-                          size="small"
-                          class="field-setting child"
-                          @command="chartFieldEdit"
-                        >
+                        <el-dropdown v-if="element.id !== '-1' && false" :effect="props.themes" placement="right-start"
+                          trigger="click" size="small" class="field-setting child" @command="chartFieldEdit">
                           <span class="el-dropdown-link">
-                            <el-icon class="icon-setting"><Setting /></el-icon>
+                            <el-icon class="icon-setting">
+                              <Setting />
+                            </el-icon>
                           </span>
                           <template #dropdown>
                             <el-dropdown-menu :effect="props.themes">
@@ -3620,9 +2988,7 @@ const deleteChartFieldItem = id => {
                                 <el-dropdown-item :command="handleChartFieldEdit(element, 'edit')">
                                   {{ t('common.edit') }}
                                 </el-dropdown-item>
-                                <el-dropdown-item
-                                  :command="handleChartFieldEdit(element, 'delete')"
-                                >
+                                <el-dropdown-item :command="handleChartFieldEdit(element, 'delete')">
                                   {{ t('common.delete') }}
                                 </el-dropdown-item>
                               </span>
@@ -3630,47 +2996,24 @@ const deleteChartFieldItem = id => {
                           </template>
                         </el-dropdown>
                       </div>
-                      <div
-                        v-if="activeDimension.map(itx => itx.id).includes(element.id)"
-                        :draggable="true"
-                        class="shadow"
-                        :class="isDraggingItem && 'is-dragging'"
-                        @dragstart="dragStartD"
-                        @dragend="dragEnd"
-                      >
+                      <div v-if="activeDimension.map(itx => itx.id).includes(element.id)" :draggable="true"
+                        class="shadow" :class="isDraggingItem && 'is-dragging'" @dragstart="dragStartD"
+                        @dragend="dragEnd">
                         <template v-if="isDrag">
-                          <div
-                            v-for="ele in activeDimension"
-                            :key="ele.id"
-                            class="items flex-align-center"
-                          >
+                          <div v-for="ele in activeDimension" :key="ele.id" class="items flex-align-center">
                             <el-icon>
-                              <Icon
-                                ><component
-                                  class="svg-icon"
-                                  :class="`field-icon-${
-                                    fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
-                                  }`"
-                                  :is="iconFieldMap[fieldType[ele.deType]]"
-                                ></component
-                              ></Icon>
+                              <Icon>
+                                <component class="svg-icon" :class="`field-icon-${fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
+                                  }`" :is="iconFieldMap[fieldType[ele.deType]]"></component>
+                              </Icon>
                             </el-icon>
-                            <span
-                              class="field-name ellipsis"
-                              :class="{ dark: themes === 'dark' }"
-                              >{{ ele.name }}</span
-                            >
-                            <el-dropdown
-                              v-if="ele.id !== '-1' && false"
-                              :effect="props.themes"
-                              placement="right-start"
-                              trigger="click"
-                              size="small"
-                              class="field-setting child"
-                              @command="chartFieldEdit"
-                            >
+                            <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }">{{ ele.name }}</span>
+                            <el-dropdown v-if="ele.id !== '-1' && false" :effect="props.themes" placement="right-start"
+                              trigger="click" size="small" class="field-setting child" @command="chartFieldEdit">
                               <span class="el-dropdown-link">
-                                <el-icon class="icon-setting"><Setting /></el-icon>
+                                <el-icon class="icon-setting">
+                                  <Setting />
+                                </el-icon>
                               </span>
                               <template #dropdown>
                                 <el-dropdown-menu :effect="props.themes">
@@ -3681,9 +3024,7 @@ const deleteChartFieldItem = id => {
                                     <el-dropdown-item :command="handleChartFieldEdit(ele, 'edit')">
                                       {{ t('common.edit') }}
                                     </el-dropdown-item>
-                                    <el-dropdown-item
-                                      :command="handleChartFieldEdit(ele, 'delete')"
-                                    >
+                                    <el-dropdown-item :command="handleChartFieldEdit(ele, 'delete')">
                                       {{ t('common.delete') }}
                                     </el-dropdown-item>
                                   </span>
@@ -3695,89 +3036,51 @@ const deleteChartFieldItem = id => {
                       </div>
                     </div>
                   </el-scrollbar>
-                  <div
-                    ref="el"
-                    :style="{
-                      top: dragVerticalTop + 'px'
-                    }"
-                    :class="['drag-vertical', isDragging && 'is-hovering']"
-                  ></div>
+                  <div ref="el" :style="{
+                    top: dragVerticalTop + 'px'
+                  }" :class="['drag-vertical', isDragging && 'is-hovering']"></div>
                 </div>
-                <div
-                  class="padding-lr field-height right-dimension"
-                  :class="{ dark: themes === 'dark' }"
-                >
+                <div class="padding-lr field-height right-dimension" :class="{ dark: themes === 'dark' }">
                   <div class="divider"></div>
                   <label>{{ t('chart.quota') }}</label>
                   <el-scrollbar class="drag-list">
-                    <div
-                      v-for="element in quotaData"
-                      :key="element.id"
-                      class="item father"
-                      :draggable="true"
-                      @click.ctrl="setActiveCtrl(element, 'quota')"
-                      @click.meta="setActiveCtrl(element, 'quota')"
-                      @click.exact="setActive(element, 'quota')"
-                      @click.shift="setActiveShift(element, 'quota')"
-                      @dragstart="$event => singleDragStart($event, element, 'quota')"
-                      @dragend="singleDragEnd"
-                    >
-                      <div
-                        class="items flex-align-center"
-                        :class="[
-                          'item-dimension--' + themes,
-                          isDraggingItem && 'is-dragging-item',
-                          activeQuota.map(itx => itx.id).includes(element.id) && 'active'
-                        ]"
-                      >
+                    <div v-for="element in quotaData" :key="element.id" class="item father" :draggable="true"
+                      @click.ctrl="setActiveCtrl(element, 'quota')" @click.meta="setActiveCtrl(element, 'quota')"
+                      @click.exact="setActive(element, 'quota')" @click.shift="setActiveShift(element, 'quota')"
+                      @dragstart="$event => singleDragStart($event, element, 'quota')" @dragend="singleDragEnd">
+                      <div class="items flex-align-center" :class="[
+                        'item-dimension--' + themes,
+                        isDraggingItem && 'is-dragging-item',
+                        activeQuota.map(itx => itx.id).includes(element.id) && 'active'
+                      ]">
                         <el-icon>
-                          <Icon :class-name="`field-icon-${fieldType[element.deType]}`"
-                            ><component
-                              class="svg-icon"
-                              :class="`field-icon-${fieldType[element.deType]}`"
-                              :is="getIconName(element.deType, element.extField, true)"
-                            ></component
-                          ></Icon>
+                          <Icon :class-name="`field-icon-${fieldType[element.deType]}`">
+                            <component class="svg-icon" :class="`field-icon-${fieldType[element.deType]}`"
+                              :is="getIconName(element.deType, element.extField, true)"></component>
+                          </Icon>
                         </el-icon>
-                        <span
-                          class="field-name ellipsis"
-                          :class="{ dark: themes === 'dark' }"
-                          :title="element.name"
-                          >{{ element.name }}</span
-                        >
-                        <el-icon
-                          v-if="element.id !== '-1' && !element.chartId"
-                          class="field-setting child"
-                          :class="{ 'remove-icon--dark': themes === 'dark' }"
-                          size="14px"
-                          @click.stop="copyChartFieldItem(element.id)"
-                        >
-                          <Icon class-name="inner-class" name="icon_copy_outlined"
-                            ><icon_copy_outlined class="svg-icon inner-class"
-                          /></Icon>
+                        <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }" :title="element.name">{{
+                          element.name }}</span>
+                        <el-icon v-if="element.id !== '-1' && !element.chartId" class="field-setting child"
+                          :class="{ 'remove-icon--dark': themes === 'dark' }" size="14px"
+                          @click.stop="copyChartFieldItem(element.id)">
+                          <Icon class-name="inner-class" name="icon_copy_outlined">
+                            <icon_copy_outlined class="svg-icon inner-class" />
+                          </Icon>
                         </el-icon>
-                        <el-icon
-                          v-if="element.id !== '-1' && element.chartId"
-                          class="field-setting child"
-                          :class="{ 'remove-icon--dark': themes === 'dark' }"
-                          size="14px"
-                          @click.stop="deleteChartFieldItem(element.id)"
-                        >
-                          <Icon class-name="inner-class" name="icon_delete-trash_outlined"
-                            ><icon_deleteTrash_outlined class="svg-icon inner-class"
-                          /></Icon>
+                        <el-icon v-if="element.id !== '-1' && element.chartId" class="field-setting child"
+                          :class="{ 'remove-icon--dark': themes === 'dark' }" size="14px"
+                          @click.stop="deleteChartFieldItem(element.id)">
+                          <Icon class-name="inner-class" name="icon_delete-trash_outlined">
+                            <icon_deleteTrash_outlined class="svg-icon inner-class" />
+                          </Icon>
                         </el-icon>
-                        <el-dropdown
-                          v-if="element.id !== '-1' && false"
-                          :effect="props.themes"
-                          placement="right-start"
-                          trigger="click"
-                          size="small"
-                          class="field-setting child"
-                          @command="chartFieldEdit"
-                        >
+                        <el-dropdown v-if="element.id !== '-1' && false" :effect="props.themes" placement="right-start"
+                          trigger="click" size="small" class="field-setting child" @command="chartFieldEdit">
                           <span class="el-dropdown-link">
-                            <el-icon class="icon-setting"><Setting /></el-icon>
+                            <el-icon class="icon-setting">
+                              <Setting />
+                            </el-icon>
                           </span>
                           <template #dropdown>
                             <el-dropdown-menu :effect="props.themes">
@@ -3788,9 +3091,7 @@ const deleteChartFieldItem = id => {
                                 <el-dropdown-item :command="handleChartFieldEdit(element, 'edit')">
                                   {{ t('common.edit') }}
                                 </el-dropdown-item>
-                                <el-dropdown-item
-                                  :command="handleChartFieldEdit(element, 'delete')"
-                                >
+                                <el-dropdown-item :command="handleChartFieldEdit(element, 'delete')">
                                   {{ t('common.delete') }}
                                 </el-dropdown-item>
                               </span>
@@ -3798,45 +3099,23 @@ const deleteChartFieldItem = id => {
                           </template>
                         </el-dropdown>
                       </div>
-                      <div
-                        v-if="activeQuota.map(itx => itx.id).includes(element.id)"
-                        :draggable="true"
-                        class="shadow"
-                        :class="isDraggingItem && 'is-dragging'"
-                        @dragstart="dragStart"
-                        @dragend="dragEnd"
-                      >
+                      <div v-if="activeQuota.map(itx => itx.id).includes(element.id)" :draggable="true" class="shadow"
+                        :class="isDraggingItem && 'is-dragging'" @dragstart="dragStart" @dragend="dragEnd">
                         <template v-if="isDrag">
-                          <div
-                            v-for="ele in activeQuota"
-                            :key="ele.id"
-                            class="items flex-align-center"
-                          >
+                          <div v-for="ele in activeQuota" :key="ele.id" class="items flex-align-center">
                             <el-icon>
-                              <Icon :class-name="`field-icon-${fieldType[ele.deType]}`"
-                                ><component
-                                  class="svg-icon"
-                                  :class-name="`field-icon-${fieldType[ele.deType]}`"
-                                  :is="iconFieldMap[fieldType[ele.deType]]"
-                                ></component
-                              ></Icon>
+                              <Icon :class-name="`field-icon-${fieldType[ele.deType]}`">
+                                <component class="svg-icon" :class-name="`field-icon-${fieldType[ele.deType]}`"
+                                  :is="iconFieldMap[fieldType[ele.deType]]"></component>
+                              </Icon>
                             </el-icon>
-                            <span
-                              class="field-name ellipsis"
-                              :class="{ dark: themes === 'dark' }"
-                              >{{ ele.name }}</span
-                            >
-                            <el-dropdown
-                              v-if="ele.id !== '-1' && false"
-                              :effect="props.themes"
-                              placement="right-start"
-                              trigger="click"
-                              size="small"
-                              class="field-setting child"
-                              @command="chartFieldEdit"
-                            >
+                            <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }">{{ ele.name }}</span>
+                            <el-dropdown v-if="ele.id !== '-1' && false" :effect="props.themes" placement="right-start"
+                              trigger="click" size="small" class="field-setting child" @command="chartFieldEdit">
                               <span class="el-dropdown-link">
-                                <el-icon class="icon-setting"><Setting /></el-icon>
+                                <el-icon class="icon-setting">
+                                  <Setting />
+                                </el-icon>
                               </span>
                               <template #dropdown>
                                 <el-dropdown-menu :effect="props.themes">
@@ -3847,9 +3126,7 @@ const deleteChartFieldItem = id => {
                                     <el-dropdown-item :command="handleChartFieldEdit(ele, 'edit')">
                                       {{ t('common.edit') }}
                                     </el-dropdown-item>
-                                    <el-dropdown-item
-                                      :command="handleChartFieldEdit(ele, 'delete')"
-                                    >
+                                    <el-dropdown-item :command="handleChartFieldEdit(ele, 'delete')">
                                       {{ t('common.delete') }}
                                     </el-dropdown-item>
                                   </span>
@@ -3870,31 +3147,15 @@ const deleteChartFieldItem = id => {
     </template>
     <chart-template-info v-if="templateStatusShow" :themes="themes"></chart-template-info>
     <!--显示名修改-->
-    <el-dialog
-      v-model="state.renameItem"
-      :title="t('chart.show_name_set')"
-      :visible="state.renameItem"
-      width="420px"
-      :close-on-click-modal="false"
-    >
+    <el-dialog v-model="state.renameItem" :title="t('chart.show_name_set')" :visible="state.renameItem" width="420px"
+      :close-on-click-modal="false">
       <div @keydown.stop @keyup.stop>
-        <el-form
-          ref="renameForm"
-          label-width="80px"
-          require-asterisk-position="right"
-          :model="state.itemForm"
-          :rules="itemFormRules"
-          label-position="top"
-          @submit.prevent
-        >
+        <el-form ref="renameForm" label-width="80px" require-asterisk-position="right" :model="state.itemForm"
+          :rules="itemFormRules" label-position="top" @submit.prevent>
           <el-form-item :label="t('dataset.field_origin_name')" class="name-edit-form">
             <span class="text">{{ state.itemForm.name }}</span>
           </el-form-item>
-          <el-form-item
-            :label="t('chart.show_name')"
-            class="name-edit-form no-margin-bottom"
-            prop="chartShowName"
-          >
+          <el-form-item :label="t('chart.show_name')" class="name-edit-form no-margin-bottom" prop="chartShowName">
             <el-input v-model="state.itemForm.chartShowName" class="text" clearable />
           </el-form-item>
         </el-form>
@@ -3902,23 +3163,15 @@ const deleteChartFieldItem = id => {
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeRename">{{ t('chart.cancel') }} </el-button>
-          <el-button type="primary" @click="saveRename(renameForm)"
-            >{{ t('chart.confirm') }}
+          <el-button type="primary" @click="saveRename(renameForm)">{{ t('chart.confirm') }}
           </el-button>
         </div>
       </template>
     </el-dialog>
 
     <!--指标过滤器-->
-    <el-dialog
-      v-if="state.quotaFilterEdit"
-      v-model="state.quotaFilterEdit"
-      :title="t('chart.add_filter')"
-      :visible="state.quotaFilterEdit"
-      :close-on-click-modal="false"
-      width="600px"
-      class="dialog-css"
-    >
+    <el-dialog v-if="state.quotaFilterEdit" v-model="state.quotaFilterEdit" :title="t('chart.add_filter')"
+      :visible="state.quotaFilterEdit" :close-on-click-modal="false" width="600px" class="dialog-css">
       <quota-filter-editor :item="state.quotaItem" />
       <template #footer>
         <div class="dialog-footer">
@@ -3927,15 +3180,8 @@ const deleteChartFieldItem = id => {
         </div>
       </template>
     </el-dialog>
-    <el-dialog
-      v-if="state.resultFilterEdit"
-      v-model="state.resultFilterEdit"
-      :title="t('chart.add_filter')"
-      :visible="state.resultFilterEdit"
-      :close-on-click-modal="false"
-      width="600px"
-      class="dialog-css"
-    >
+    <el-dialog v-if="state.resultFilterEdit" v-model="state.resultFilterEdit" :title="t('chart.add_filter')"
+      :visible="state.resultFilterEdit" :close-on-click-modal="false" width="600px" class="dialog-css">
       <result-filter-editor :chart="state.chartForFilter" :item="state.filterItem" />
       <template #footer>
         <div class="dialog-footer">
@@ -3946,21 +3192,10 @@ const deleteChartFieldItem = id => {
     </el-dialog>
 
     <!--同环比设置-->
-    <el-dialog
-      v-if="state.showEditQuotaCompare"
-      v-model="state.showEditQuotaCompare"
-      :title="t('chart.yoy_setting')"
-      :visible="state.showEditQuotaCompare"
-      :close-on-click-modal="false"
-      width="600px"
-      class="dialog-css"
-    >
-      <compare-edit
-        :compare-item="state.quotaItemCompare"
-        :chart="view"
-        :dimension-data="dimensionData"
-        :quota-data="quotaData"
-      />
+    <el-dialog v-if="state.showEditQuotaCompare" v-model="state.showEditQuotaCompare" :title="t('chart.yoy_setting')"
+      :visible="state.showEditQuotaCompare" :close-on-click-modal="false" width="600px" class="dialog-css">
+      <compare-edit :compare-item="state.quotaItemCompare" :chart="view" :dimension-data="dimensionData"
+        :quota-data="quotaData" />
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeQuotaEditCompare">{{ t('chart.cancel') }} </el-button>
@@ -3972,42 +3207,25 @@ const deleteChartFieldItem = id => {
     </el-dialog>
 
     <!--数值格式化-->
-    <el-dialog
-      v-if="state.showValueFormatter"
-      v-model="state.showValueFormatter"
-      :title="t('chart.value_formatter') + ' - ' + state.valueFormatterItem.name"
-      :visible="state.showValueFormatter"
-      :close-on-click-modal="false"
-      width="420px"
-      class="dialog-css"
-    >
+    <el-dialog v-if="state.showValueFormatter" v-model="state.showValueFormatter"
+      :title="t('chart.value_formatter') + ' - ' + state.valueFormatterItem.name" :visible="state.showValueFormatter"
+      :close-on-click-modal="false" width="420px" class="dialog-css">
       <value-formatter-edit :formatter-item="state.valueFormatterItem" :chart="view" />
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeValueFormatter">{{ t('chart.cancel') }} </el-button>
-          <el-button type="primary" @click="saveValueFormatter"
-            >{{ t('chart.confirm') }}
+          <el-button type="primary" @click="saveValueFormatter">{{ t('chart.confirm') }}
           </el-button>
         </div>
       </template>
     </el-dialog>
 
     <!--xAxis自定义排序-->
-    <el-dialog
-      v-if="state.showCustomSort"
-      v-model="state.showCustomSort"
-      :title="t('chart.custom_sort') + t('chart.sort')"
-      :visible="state.showCustomSort"
-      :close-on-click-modal="false"
-      width="372px"
-      class="dialog-css custom_sort_dialog"
-    >
-      <custom-sort-edit
-        :chart="view"
-        :field-type="customSortAxis"
-        :field="state.customSortField"
-        @on-sort-change="customSortChange"
-      />
+    <el-dialog v-if="state.showCustomSort" v-model="state.showCustomSort"
+      :title="t('chart.custom_sort') + t('chart.sort')" :visible="state.showCustomSort" :close-on-click-modal="false"
+      width="372px" class="dialog-css custom_sort_dialog">
+      <custom-sort-edit :chart="view" :field-type="customSortAxis" :field="state.customSortField"
+        @on-sort-change="customSortChange" />
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="closeCustomSort">{{ t('chart.cancel') }} </el-button>
@@ -4016,13 +3234,8 @@ const deleteChartFieldItem = id => {
       </template>
     </el-dialog>
 
-    <el-dialog
-      v-model="state.showSortPriority"
-      :close-on-click-modal="false"
-      width="372px"
-      class="dialog-css custom_sort_dialog"
-      destroy-on-close
-    >
+    <el-dialog v-model="state.showSortPriority" :close-on-click-modal="false" width="372px"
+      class="dialog-css custom_sort_dialog" destroy-on-close>
       <template #header>
         <span style="font-size: 15px; font-weight: bold; color: black">
           {{ t('chart.sort_priority') }}
@@ -4039,12 +3252,9 @@ const deleteChartFieldItem = id => {
     </el-dialog>
 
     <!--图表计算字段-->
-    <el-dialog
-      v-model="editCalcField"
-      width="1000px"
+    <el-dialog v-model="editCalcField" width="1000px"
       :title="isCalcFieldAdd ? t('dataset.add_calc_field') : t('dataset.edit_calc_field')"
-      :close-on-click-modal="false"
-    >
+      :close-on-click-modal="false">
       <calc-field-edit ref="calcEdit" />
       <template #footer>
         <el-button secondary @click="closeEditCalc()">{{ t('dataset.cancel') }} </el-button>
@@ -4055,14 +3265,8 @@ const deleteChartFieldItem = id => {
   <FilterTree ref="filterTree" @filter-data="changeFilterData" />
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
   <Teleport v-if="componentNameEdit" :to="'#component-name'">
-    <input
-      ref="componentNameInput"
-      v-model="inputComponentName.name"
-      :effect="themes"
-      width="100%"
-      @change="onComponentNameChange"
-      @blur="closeEditComponentName"
-    />
+    <input ref="componentNameInput" v-model="inputComponentName.name" :effect="themes" width="100%"
+      @change="onComponentNameChange" @blur="closeEditComponentName" />
   </Teleport>
 </template>
 
@@ -4076,7 +3280,7 @@ const deleteChartFieldItem = id => {
     position: relative;
     overflow: hidden;
 
-    & + .item {
+    &+.item {
       margin-top: 2px;
     }
 
@@ -4094,6 +3298,7 @@ const deleteChartFieldItem = id => {
       padding: 4px 10px;
       position: relative;
       cursor: pointer;
+
       &:hover {
         background: #1f23291a;
       }
@@ -4105,6 +3310,7 @@ const deleteChartFieldItem = id => {
       .ed-icon {
         font-size: 14px;
       }
+
       &.active {
         border-color: var(--ed-color-primary, #3370ff);
       }
@@ -4122,9 +3328,11 @@ const deleteChartFieldItem = id => {
       cursor: pointer;
       min-height: 100%;
       z-index: 5;
+
       .items {
         border-color: var(--ed-color-primary, #3370ff);
-        & + .items {
+
+        &+.items {
           margin-top: 2px;
         }
       }
@@ -4136,6 +3344,7 @@ const deleteChartFieldItem = id => {
     }
   }
 }
+
 .collapse-icon {
   color: @canvas-main-font-color;
 }
@@ -4152,35 +3361,44 @@ const deleteChartFieldItem = id => {
 
 .editor-light {
   border-left: solid 1px @side-outline-border-color-light !important;
-  color: @canvas-main-font-color-light!important;
+  color: @canvas-main-font-color-light !important;
+
   // background-color: @side-area-background-light!important;
   :deep(.ed-tabs__header) {
     border-top: solid 1px @side-outline-border-color-light !important;
   }
+
   :deep(.drag_main_area) {
     border-top: solid 1px @side-outline-border-color-light !important;
   }
+
   :deep(.drag-data) {
     border-top: solid 1px @side-outline-border-color-light !important;
   }
+
   :deep(.result-style) {
     border-top: 1px solid @side-outline-border-color-light !important;
   }
+
   :deep(.dataset-select) {
     border-top: 1px solid @side-outline-border-color-light !important;
   }
+
   :deep(.dataset-main) {
     border-left: 1px solid @side-outline-border-color-light !important;
   }
+
   :deep(input) {
     font-size: 12px;
     font-weight: 400;
   }
+
   :deep(.divider) {
     background-color: @side-outline-border-color-light !important;
   }
+
   :deep(.item-span-style) {
-    color: #fff!important;
+    color: #fff !important;
   }
 
   // :deep(.editor-title) {
@@ -4209,6 +3427,7 @@ const deleteChartFieldItem = id => {
     :deep(.ed-tabs__nav-wrap::after) {
       background-color: rgba(31, 35, 41, 0.15);
     }
+
     :deep(.ed-tabs__nav-scroll) {
       .ed-tabs__item {
         height: 35px;
@@ -4221,6 +3440,7 @@ const deleteChartFieldItem = id => {
       }
     }
   }
+
   .query-style-tab {
     width: 100%;
     border-top: solid 1px @side-outline-border-color-light !important;
@@ -4238,6 +3458,7 @@ const deleteChartFieldItem = id => {
     :deep(.ed-tabs__nav-wrap::after) {
       background-color: rgba(31, 35, 41, 0.15);
     }
+
     :deep(.ed-tabs__nav-scroll) {
       .ed-tabs__item {
         height: 35px;
@@ -4255,7 +3476,9 @@ const deleteChartFieldItem = id => {
 // editor form 全局样式
 .editor-dark {
   border-left: solid 1px @main-collapse-border-dark !important;
+
   .dataset-selector {
+
     :deep(.ed-input__inner),
     :deep(.ed-input__wrapper),
     :deep(.ed-input.is-disabled .ed-input__wrapper) {
@@ -4263,16 +3486,20 @@ const deleteChartFieldItem = id => {
       background-color: @side-content-background;
       border: none;
     }
+
     :deep(.ed-input__inner) {
       border: none;
     }
+
     :deep(.ed-input__wrapper) {
       box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.15) inset !important;
     }
+
     :deep(.ed-input__wrapper:hover) {
       box-shadow: 0 0 0 1px var(--ed-color-primary, #3370ff) inset !important;
     }
   }
+
   .query-style-tab {
     width: 100%;
     border-top: solid 1px @main-collapse-border-dark !important;
@@ -4290,6 +3517,7 @@ const deleteChartFieldItem = id => {
     :deep(.ed-tabs__nav-wrap::after) {
       background-color: rgba(31, 35, 41, 0.15);
     }
+
     :deep(.ed-tabs__nav-scroll) {
       .ed-tabs__item {
         height: 35px;
@@ -4311,6 +3539,7 @@ const deleteChartFieldItem = id => {
   color: white;
   background-color: @side-area-background;
 }
+
 .ed-row {
   display: block;
 }
@@ -4325,12 +3554,14 @@ span {
   width: 100%;
   display: flex;
   transition: 0.5s;
+
   .padding-lr {
     padding: 0 16px;
 
     &.no-top-border {
       border-top: none !important;
     }
+
     &.no-top-padding {
       padding-top: 0 !important;
 
@@ -4339,6 +3570,7 @@ span {
       }
     }
   }
+
   .view-title-name {
     display: -moz-inline-box;
     display: inline-block;
@@ -4372,9 +3604,11 @@ span {
     }
 
     height: 100%;
+
     :deep(.ed-tabs__header) {
       border-top: solid 1px @side-outline-border-color;
     }
+
     :deep(.ed-tabs__item) {
       font-weight: 400;
       font-size: 12px;
@@ -4504,6 +3738,7 @@ span {
 
       &.item-dimension--dark {
         background: #1a1a1a;
+
         &:hover {
           background: #1a1a1a;
         }
@@ -4573,6 +3808,7 @@ span {
     flex-direction: row;
     align-items: center;
     color: #fff;
+
     :deep(.required::after) {
       content: '*';
       color: var(--ed-color-danger);
@@ -4678,6 +3914,7 @@ span {
       cursor: pointer;
       justify-content: center;
       font-size: 12px;
+
       &.tree-btn--dark {
         background: rgba(235, 235, 235, 0.05);
         border-color: #5f5f5f;
@@ -4696,7 +3933,7 @@ span {
       height: 28px;
       font-size: 12px;
 
-      & > [class*='ed-icon'] + span {
+      &>[class*='ed-icon']+span {
         margin-left: 2px !important;
       }
     }
@@ -4704,12 +3941,15 @@ span {
     &.no-top-border {
       border-top: none !important;
     }
+
     &.no-top-padding {
       padding-top: 0 !important;
     }
+
     &:nth-child(n + 2) {
       border-top: 1px solid @side-outline-border-color;
     }
+
     &:first-child {
       border-top: none !important;
     }
@@ -4756,6 +3996,7 @@ span {
     width: 100%;
     border-top: 1px solid @side-outline-border-color;
   }
+
   .result-style-dark {
     :deep(.ed-button) {
       color: #ffffff;
@@ -4763,20 +4004,24 @@ span {
       border: none;
       border-radius: 0;
     }
+
     :deep(.ed-button:hover) {
       background-color: var(--ed-color-primary-light-3);
     }
+
     :deep(.ed-button:active) {
       background-color: var(--ed-color-primary);
     }
   }
+
   .result-style-input {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 40px;
     padding: 0 6px;
-     color: #fff;
+    color: #fff;
+
     .margin20-radio {
       margin-right: 20px;
     }
@@ -4791,6 +4036,7 @@ span {
       }
     }
   }
+
   .result-style-button {
     height: 40px;
     width: 100%;
@@ -4804,6 +4050,7 @@ span {
       border: 1px solid hsla(0, 0%, 100%, 0.15);
       border-radius: 2px;
     }
+
     :deep(.ed-button:hover) {
       border: 1px solid var(--ed-color-primary, #3370ff);
     }
@@ -4813,6 +4060,7 @@ span {
     height: 51px;
     width: 100%;
   }
+
   .dataset-search-label {
     height: 22px;
     display: flex;
@@ -4825,11 +4073,13 @@ span {
       color: #ebebeb;
     }
   }
+
   .field-search-icon-btn {
     font-size: 16px;
     color: #646a73;
     cursor: pointer;
     position: relative;
+
     &:hover {
       &::after {
         content: '';
@@ -4845,6 +4095,7 @@ span {
 
     &.dark {
       color: #a6a6a6;
+
       &:hover {
         &::after {
           background: rgba(235, 235, 235, 0.1);
@@ -4860,6 +4111,7 @@ span {
       background-color: @side-area-background-light;
       color: @canvas-main-font-color-light;
     }
+
     :deep(.ed-input__wrapper) {
       box-shadow: none !important;
       border-bottom: 1px solid rgba(31, 35, 41, 0.15);
@@ -4873,6 +4125,7 @@ span {
         background-color: @side-area-background;
         color: #ffffff;
       }
+
       :deep(.ed-input__wrapper) {
         border-bottom: 1px solid hsla(0, 0%, 100%, 0.15);
         background-color: @side-area-background;
@@ -4891,9 +4144,11 @@ span {
   border-top: 1px solid @side-outline-border-color;
   overflow: auto;
   height: calc(100% - 1px);
+
   :deep(.is-horizontal) {
     display: none !important;
   }
+
   :deep(.ed-scrollbar__wrap) {
     overflow-x: hidden;
   }
@@ -4905,6 +4160,7 @@ span {
   text-align: center;
   padding: 5px;
   margin-top: 35px;
+
   span {
     writing-mode: vertical-rl;
     text-orientation: mixed;
@@ -4918,19 +4174,23 @@ span {
   cursor: pointer;
   z-index: 2;
 }
+
 :deep(.ed-collapse) {
   width: 100%;
   border-top: unset;
 }
+
 :deep(.ed-form-item) {
   .ed-radio.ed-radio--small .ed-radio__inner {
     width: 14px;
     height: 14px;
   }
+
   .ed-input__inner {
     font-size: 12px;
     font-weight: 400;
   }
+
   .ed-input {
     --ed-input-height: 28px;
 
@@ -4938,12 +4198,14 @@ span {
       height: 26px;
     }
   }
+
   .ed-input-number {
     width: 100%;
 
     .ed-input-number__decrease {
       --ed-input-number-controls-height: 13px;
     }
+
     .ed-input-number__increase {
       --ed-input-number-controls-height: 13px;
     }
@@ -4952,25 +4214,31 @@ span {
       text-align: start;
     }
   }
+
   .ed-select {
     width: 100%;
+
     .ed-input__inner {
       height: 26px;
     }
   }
+
   .ed-checkbox {
     .ed-checkbox__label {
       font-size: 12px;
     }
   }
+
   .ed-color-picker {
     .ed-color-picker__mask {
       height: 26px;
       width: calc(100% - 2px) !important;
     }
   }
+
   .ed-radio {
     height: 20px;
+
     .ed-radio__label {
       font-size: 12px;
       font-style: normal;
@@ -4979,6 +4247,7 @@ span {
     }
   }
 }
+
 :deep(.ed-form-item__label) {
   color: @canvas-main-font-color;
   font-size: 12px;
@@ -4989,6 +4258,7 @@ span {
   line-height: 20px;
   margin-bottom: 8px;
 }
+
 :deep(.form-item-dark) {
   .ed-form-item__label {
     color: @canvas-main-font-color-dark;
@@ -4998,10 +4268,12 @@ span {
     .ed-input-group__append {
       background-color: transparent;
     }
+
     .dv-dark {
-      & > .ed-input__wrapper {
+      &>.ed-input__wrapper {
         background-color: #1a1a1a;
       }
+
       .ed-input-group__append .ed-select {
         margin: 0 -20px;
       }
@@ -5016,6 +4288,7 @@ span {
     }
   }
 }
+
 :deep(.ed-checkbox__label) {
   color: #1f2329;
   font-size: 12px;
@@ -5023,19 +4296,23 @@ span {
   font-weight: 400;
   line-height: 20px;
 }
+
 :deep(.ed-checkbox--dark) {
   .ed-checkbox__label {
     color: @dv-canvas-main-font-color;
   }
 }
+
 :deep(.ed-checkbox) {
   color: @canvas-main-font-color;
   font-size: 12px;
 }
+
 .dataset-area {
   width: 180px;
   position: relative;
 }
+
 .dataset-main {
   border-left: 1px solid @side-outline-border-color;
 }
@@ -5075,11 +4352,14 @@ span {
   z-index: 1000;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
 }
+
 .style-collapse {
+
   :deep(.ed-collapse-item__header),
   :deep(.ed-collapse-item__wrap) {
     border-bottom: none !important;
   }
+
   :deep(.ed-collapse-item__content) {
     padding-left: 0 !important;
     padding-bottom: 10px !important;
@@ -5096,24 +4376,29 @@ span {
     :deep(.ed-collapse-item__wrap) {
       border-top: none !important;
     }
+
     :deep(.ed-collapse-item__content) {
       padding: 0 !important;
       border-top: none !important;
     }
+
     :deep(.ed-collapse-item__header) {
       background-color: transparent;
       border-bottom: none !important;
     }
   }
 }
+
 .field-setting {
   position: absolute;
   right: 8px;
   color: #646a73;
+
   &.remove-icon--dark {
     color: #a6a6a6;
   }
 }
+
 .father .child {
   visibility: hidden;
 }
@@ -5132,14 +4417,18 @@ span {
   font-size: 14px;
   cursor: pointer;
 }
+
 .area-tree-select {
   margin-top: 8px;
+
   :deep(.ed-select) {
     display: block;
   }
+
   :deep(div.ed-select--dark div[data-key='customRoot'] li.is-disabled span) {
     color: white;
   }
+
   :deep(div[data-key='customRoot'] li.is-disabled span) {
     color: black;
   }
@@ -5148,22 +4437,28 @@ span {
 .chart-type-select {
   width: 100%;
   margin-top: 8px;
+
   :deep(.ed-select__prefix) {
     padding: 0;
     margin: 0;
+
     &::after {
       display: none;
     }
+
     height: 20px;
+
     .chart-type-select-icon {
       width: 23px;
       height: 16px;
     }
   }
+
   :deep(.ed-input) {
     height: 28px;
   }
 }
+
 .name-edit-form {
   margin-bottom: 16px !important;
 
@@ -5205,10 +4500,12 @@ span {
 .ed-dropdown__popper.ed-popper.is-dark:has(.dark-dimension-quota) {
   border: none;
 }
+
 :deep(.ed-select-dropdown__item) {
   display: flex;
   align-items: center;
 }
+
 .chart-type-hide-options {
   display: none;
 }
@@ -5250,6 +4547,7 @@ span {
   font-size: 14px !important;
   overflow: hidden;
   cursor: pointer;
+
   input {
     position: absolute;
     left: 0;
@@ -5279,123 +4577,160 @@ span {
 </style>
 <style>
 .ed-loading-mask {
-  background-color:rgba(37,37,37,0.5);
+  background-color: rgba(37, 37, 37, 0.5);
 }
-.ed-tree{
-  background:transparent
+
+.ed-tree {
+  background: transparent
 }
-.ed-button.is-secondary{
+
+.ed-button.is-secondary {
   background: rgba(235, 235, 235, 0.05);
   border-color: #5f5f5f;
   color: #CCCCCC;
 }
-.ed-button.is-secondary:focus, .ed-button.is-secondary:hover{
+
+.ed-button.is-secondary:focus,
+.ed-button.is-secondary:hover {
   background: rgba(235, 235, 235, 0.05);
 }
-.de-chart-editor .result-style-input .result-count-label{
+
+.de-chart-editor .result-style-input .result-count-label {
   color: #fff !important;
 }
+
 .de-chart-editor .ed-input.is-disabled .ed-input__wrapper {
   box-shadow: none !important;
   background-color: #373737;
 }
-.de-chart-editor .dataset-search-input.dark .ed-input__wrapper{
+
+.de-chart-editor .dataset-search-input.dark .ed-input__wrapper {
   box-shadow: none !important;
   border-top: none !important;
   border-left: none !important;
   border-right: none !important;
 }
+
 .de-chart-editor .field-name {
   color: #ffffff !important;
 }
-.ed-input--dark .ed-input__wrapper:hover{
+
+.ed-input--dark .ed-input__wrapper:hover {
   box-shadow: none !important;
 }
-.ed-input--dark .ed-input__wrapper.is-focus{
+
+.ed-input--dark .ed-input__wrapper.is-focus {
   box-shadow: none !important;
 }
-.ed-select .ed-input__wrapper:hover{
+
+.ed-select .ed-input__wrapper:hover {
   box-shadow: none !important;
 }
-.ed-select .ed-input__wrapper.is-focus{
+
+.ed-select .ed-input__wrapper.is-focus {
   box-shadow: none !important;
 }
-.ed-select .ed-input.is-focus .ed-input__wrapper{
+
+.ed-select .ed-input.is-focus .ed-input__wrapper {
   box-shadow: none !important;
   border: 1px solid #3370ff;
 }
-.ed-input-number--dark .ed-input-number__decrease.is-disabled .ed-icon, .ed-input-number--dark .ed-input-number__increase.is-disabled .ed-icon{
+
+.ed-input-number--dark .ed-input-number__decrease.is-disabled .ed-icon,
+.ed-input-number--dark .ed-input-number__increase.is-disabled .ed-icon {
   color: #ffffff !important;
 }
-.form-item-dark .ed-input-number__decrease, .form-item-dark .ed-input-number__increase {
+
+.form-item-dark .ed-input-number__decrease,
+.form-item-dark .ed-input-number__increase {
   color: #ffffff !important;
 }
-.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled):hover .ed-input__wrapper{
+
+.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled):hover .ed-input__wrapper {
   box-shadow: none !important;
-  border:1px solid #636363  !important;
-  border-left: none  !important;
+  border: 1px solid #636363 !important;
+  border-left: none !important;
 }
-.de-chart-editor .ed-input-group__append, .ed-input-group__prepend{
+
+.de-chart-editor .ed-input-group__append,
+.ed-input-group__prepend {
   background: #373737 !important;
 }
-.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled) .ed-input .ed-input__wrapper{
+
+.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled) .ed-input .ed-input__wrapper {
   box-shadow: none !important;
-  border:none  !important;
-  border-left: none  !important;
+  border: none !important;
+  border-left: none !important;
 }
-.de-chart-editor .view-panel-row .ed-collapse-item__header.is-active{
+
+.de-chart-editor .view-panel-row .ed-collapse-item__header.is-active {
   color: #fff !important;
 }
-.de-chart-editor .ed-input-group__append{
+
+.de-chart-editor .ed-input-group__append {
   box-shadow: none !important;
-  border:1px solid #636363  !important;
-  border-left: none  !important;
+  border: 1px solid #636363 !important;
+  border-left: none !important;
 }
-.remark-label{
+
+.remark-label {
   color: #A6A6A6 !important;
 }
-.de-chart-editor .dataset-search-input .ed-input__wrapper{
-  border:none !important;
+
+.de-chart-editor .dataset-search-input .ed-input__wrapper {
+  border: none !important;
   border-bottom: 1px solid hsla(0, 0%, 100%, 0.15) !important;
   background-color: #1a1a1a !important;
 }
-.de-chart-editor .dataset-search-input .ed-input__inner{
+
+.de-chart-editor .dataset-search-input .ed-input__inner {
   background-color: #1a1a1a !important;
   color: #ffffff !important;
 }
-.de-chart-editor .field-height label{
+
+.de-chart-editor .field-height label {
   color: #A6A6A6 !important;
 }
-.de-chart-editor .field-height .divider{
+
+.de-chart-editor .field-height .divider {
   background-color: rgba(255, 255, 255, 0.15) !important;
 }
-.customDatasetSelect .ed-container .ed-main .ed-tree.dark .ed-tree-node__content:hover{
+
+.customDatasetSelect .ed-container .ed-main .ed-tree.dark .ed-tree-node__content:hover {
   background: rgba(235, 235, 235, 0.1);
 }
-.ed-tree-node__content:hover{
+
+.ed-tree-node__content:hover {
   background: rgba(235, 235, 235, 0.1);
 }
-.de-chart-editor .field-search-icon-btn{
+
+.de-chart-editor .field-search-icon-btn {
   color: #A6A6A6 !important;
 }
-.right-dimension .item .items:hover{
+
+.right-dimension .item .items:hover {
   background: rgba(235, 235, 235, 0.1) !important;
 }
-.ed-collapse-item.ed-collapse--light .ed-collapse-item__header .ed-collapse-item__arrow{
+
+.ed-collapse-item.ed-collapse--light .ed-collapse-item__header .ed-collapse-item__arrow {
   color: #A6A6A6 !important;
 }
-.ed-input .ed-select__prefix--light{
+
+.ed-input .ed-select__prefix--light {
   color: #8d9199;
   border-right: 1px solid #5f5f5f;
 }
+
 .config-hidden .wrapper-inner-adaptor {
   background: transparent !important;
   border-color: #5f5f5f !important;
 }
-.select-to-dashboard .ed-icon{
+
+.select-to-dashboard .ed-icon {
   color: #0099ff;
 }
-.config-hidden .wrapper-inner-adaptor:hover{
+
+.config-hidden .wrapper-inner-adaptor:hover {
   border-color: #0089ff !important;
 }
 </style>
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/three-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/three-map.ts
index 60cdcda..9a403af 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/three-map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/three-map.ts
@@ -14,17 +14,13 @@ import {
   getMapScene,
   getMapStyle,
 } from '@/views/chart/components/js/panel/common/common_antv'
-// import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-// import { storeToRefs } from 'pinia'
-// const dvMainStore = dvMainStoreWithOut()
-// const { curComponent } = storeToRefs(dvMainStore)
+import { storeToRefs } from 'pinia'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+
 /**
  * 三维地图
  */
-// eventBus.on('createModel', createModel)
-// function createModel(model){
-//   console.log('jiehsou',model)
-// }
+
 export class ThreeMap extends L7ChartView<Scene, L7Config> {
   properties: EditorProperty[] = [
     'background-overall-component',
@@ -70,7 +66,7 @@ export class ThreeMap extends L7ChartView<Scene, L7Config> {
     const { chart, container, action } = drawOption
     const containerDom = document.getElementById(container)
     const rect = containerDom?.getBoundingClientRect()
-  
+
     if (rect?.height <= 0) {
       const observer = new ResizeObserver(() => {
         observer.disconnect()
@@ -79,21 +75,32 @@ export class ThreeMap extends L7ChartView<Scene, L7Config> {
       observer.observe(containerDom)
       return new L7Wrapper(drawOption.chartObj?.getScene(), [])
     }
-  
+
     let basicStyle
     let miscStyle
     if (chart.customAttr) {
       basicStyle = parseJson(chart.customAttr).basicStyle
       miscStyle = parseJson(chart.customAttr).misc
     }
-  
-    const mapKey = await this.getMapKey()
+    const dvMainStore = dvMainStoreWithOut()
+    const {
+      curComponent
+    } = storeToRefs(dvMainStore)
+    let mapKey: any
+    if (curComponent.value && curComponent.value.mapServer) {
+      mapKey = curComponent.value.mapServer.find(server => server.status === true);
+    } else {
+    let allmapKey = await this.idGetMapKey(chart.id)
+    mapKey = allmapKey.find(server => server.status === true);
+    }
+    console.log('mapKey', mapKey)
     const mapStyle = getMapStyle(mapKey, basicStyle)
     let center = getMapCenter(basicStyle)
-  
+
     const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene>
     let scene = chartObj?.getScene()
-  
+   
+    // scene = chartObj?.getScene()
     scene = await getMapScene(
       chart,
       scene,
@@ -104,11 +111,10 @@ export class ThreeMap extends L7ChartView<Scene, L7Config> {
       mapStyle,
       center
     )
-  
+
     this.configZoomButton(chart, scene, mapKey)
-  
+
     scene.render()
     return new L7Wrapper(scene, []) // 只保留地图底图
   }
-
 }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index 89636c0..c3fa391 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -25,7 +25,7 @@ import {
 } from '@antv/l7plot-component/dist/esm/legend/category/constants'
 import substitute from '@antv/util/esm/substitute'
 import type { Plot as L7Plot, PlotOptions } from '@antv/l7plot/dist/esm'
-import { Zoom } from '@antv/l7'
+import { Zoom, RasterLayer } from '@antv/l7'
 import { DOM } from '@antv/l7-utils'
 import { Scene } from '@antv/l7-scene'
 import { type IZoomControlOption } from '@antv/l7-component'
@@ -36,7 +36,7 @@ import type { PickOptions } from '@antv/g2plot/lib/core/plot'
 import { defaults, find } from 'lodash-es'
 import { useI18n } from '@/hooks/web/useI18n'
 import { isMobile } from '@/utils/utils'
-import { GaodeMap, TMap, TencentMap } from '@antv/l7-maps'
+import { GaodeMap, TMap, TencentMap, Map } from '@antv/l7-maps'
 import {
   gaodeMapStyleOptions,
   qqMapStyleOptions,
@@ -439,42 +439,42 @@ export function getXAxis(chart: Chart) {
         const title =
           a.nameShow && a.name && a.name !== ''
             ? {
-                text: a.name,
-                style: {
-                  fill: a.color,
-                  fontSize: a.fontSize
-                },
-                spacing: 8
-              }
+              text: a.name,
+              style: {
+                fill: a.color,
+                fontSize: a.fontSize
+              },
+              spacing: 8
+            }
             : null
         const grid = a.splitLine.show
           ? {
-              line: {
-                style: {
-                  stroke: a.splitLine.lineStyle.color,
-                  lineWidth: a.splitLine.lineStyle.width,
-                  lineDash: getLineDash(a.splitLine.lineStyle.style)
-                }
+            line: {
+              style: {
+                stroke: a.splitLine.lineStyle.color,
+                lineWidth: a.splitLine.lineStyle.width,
+                lineDash: getLineDash(a.splitLine.lineStyle.style)
               }
             }
+          }
           : null
         const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine
         const line = axisCfg.show
           ? {
-              style: {
-                stroke: axisCfg.lineStyle.color,
-                lineWidth: axisCfg.lineStyle.width,
-                lineDash: getLineDash(axisCfg.lineStyle.style)
-              }
+            style: {
+              stroke: axisCfg.lineStyle.color,
+              lineWidth: axisCfg.lineStyle.width,
+              lineDash: getLineDash(axisCfg.lineStyle.style)
             }
+          }
           : null
         const tickLine = axisCfg.show
           ? {
-              style: {
-                stroke: axisCfg.lineStyle.color,
-                lineWidth: axisCfg.lineStyle.width
-              }
+            style: {
+              stroke: axisCfg.lineStyle.color,
+              lineWidth: axisCfg.lineStyle.width
             }
+          }
           : null
         let textAlign = 'center'
         const rotate = a.axisLabel.rotate
@@ -486,19 +486,19 @@ export function getXAxis(chart: Chart) {
         }
         const label = a.axisLabel.show
           ? {
-              rotate: (rotate * Math.PI) / 180,
-              style: {
-                fill: a.axisLabel.color,
-                fontSize: a.axisLabel.fontSize,
-                textAlign: textAlign,
-                fontFamily: chart.fontFamily
-              },
-              formatter: value => {
-                return chart.type === 'bidirectional-bar' && value.length > a.axisLabel.lengthLimit
-                  ? value.substring(0, a.axisLabel.lengthLimit) + '...'
-                  : value
-              }
+            rotate: (rotate * Math.PI) / 180,
+            style: {
+              fill: a.axisLabel.color,
+              fontSize: a.axisLabel.fontSize,
+              textAlign: textAlign,
+              fontFamily: chart.fontFamily
+            },
+            formatter: value => {
+              return chart.type === 'bidirectional-bar' && value.length > a.axisLabel.lengthLimit
+                ? value.substring(0, a.axisLabel.lengthLimit) + '...'
+                : value
             }
+          }
           : null
 
         axis = {
@@ -526,42 +526,42 @@ export function getYAxis(chart: Chart) {
   const title =
     yAxis.nameShow && yAxis.name && yAxis.name !== ''
       ? {
-          text: yAxis.name,
-          style: {
-            fill: yAxis.color,
-            fontSize: yAxis.fontSize
-          },
-          spacing: 8
-        }
+        text: yAxis.name,
+        style: {
+          fill: yAxis.color,
+          fontSize: yAxis.fontSize
+        },
+        spacing: 8
+      }
       : null
   const grid = yAxis.splitLine.show
     ? {
-        line: {
-          style: {
-            stroke: yAxis.splitLine.lineStyle.color,
-            lineWidth: yAxis.splitLine.lineStyle.width,
-            lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
-          }
+      line: {
+        style: {
+          stroke: yAxis.splitLine.lineStyle.color,
+          lineWidth: yAxis.splitLine.lineStyle.width,
+          lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
         }
       }
+    }
     : null
   const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine
   const line = axisCfg.show
     ? {
-        style: {
-          stroke: axisCfg.lineStyle.color,
-          lineWidth: axisCfg.lineStyle.width,
-          lineDash: getLineDash(axisCfg.lineStyle.style)
-        }
+      style: {
+        stroke: axisCfg.lineStyle.color,
+        lineWidth: axisCfg.lineStyle.width,
+        lineDash: getLineDash(axisCfg.lineStyle.style)
       }
+    }
     : null
   const tickLine = axisCfg.show
     ? {
-        style: {
-          stroke: axisCfg.lineStyle.color,
-          lineWidth: axisCfg.lineStyle.width
-        }
+      style: {
+        stroke: axisCfg.lineStyle.color,
+        lineWidth: axisCfg.lineStyle.width
       }
+    }
     : null
   const rotate = yAxis.axisLabel.rotate
   let textAlign = 'end'
@@ -591,20 +591,20 @@ export function getYAxis(chart: Chart) {
   }
   const label = yAxis.axisLabel.show
     ? {
-        rotate: (rotate * Math.PI) / 180,
-        style: {
-          fill: yAxis.axisLabel.color,
-          fontSize: yAxis.axisLabel.fontSize,
-          textBaseline,
-          textAlign,
-          fontFamily: chart.fontFamily
-        },
-        formatter: value => {
-          return value.length > yAxis.axisLabel.lengthLimit
-            ? value.substring(0, yAxis.axisLabel.lengthLimit) + '...'
-            : value
-        }
+      rotate: (rotate * Math.PI) / 180,
+      style: {
+        fill: yAxis.axisLabel.color,
+        fontSize: yAxis.axisLabel.fontSize,
+        textBaseline,
+        textAlign,
+        fontFamily: chart.fontFamily
+      },
+      formatter: value => {
+        return value.length > yAxis.axisLabel.lengthLimit
+          ? value.substring(0, yAxis.axisLabel.lengthLimit) + '...'
+          : value
       }
+    }
     : null
 
   axis = {
@@ -628,42 +628,42 @@ export function getYAxisExt(chart: Chart) {
   const title =
     yAxis.nameShow && yAxis.name && yAxis.name !== ''
       ? {
-          text: yAxis.name,
-          style: {
-            fill: yAxis.color,
-            fontSize: yAxis.fontSize
-          },
-          spacing: 8
-        }
+        text: yAxis.name,
+        style: {
+          fill: yAxis.color,
+          fontSize: yAxis.fontSize
+        },
+        spacing: 8
+      }
       : null
   const grid = yAxis.splitLine.show
     ? {
-        line: {
-          style: {
-            stroke: yAxis.splitLine.lineStyle.color,
-            lineWidth: yAxis.splitLine.lineStyle.width,
-            lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
-          }
+      line: {
+        style: {
+          stroke: yAxis.splitLine.lineStyle.color,
+          lineWidth: yAxis.splitLine.lineStyle.width,
+          lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
         }
       }
+    }
     : null
   const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine
   const line = axisCfg.show
     ? {
-        style: {
-          stroke: axisCfg.lineStyle.color,
-          lineWidth: axisCfg.lineStyle.width,
-          lineDash: getLineDash(axisCfg.lineStyle.style)
-        }
+      style: {
+        stroke: axisCfg.lineStyle.color,
+        lineWidth: axisCfg.lineStyle.width,
+        lineDash: getLineDash(axisCfg.lineStyle.style)
       }
+    }
     : null
   const tickLine = axisCfg.show
     ? {
-        style: {
-          stroke: axisCfg.lineStyle.color,
-          lineWidth: axisCfg.lineStyle.width
-        }
+      style: {
+        stroke: axisCfg.lineStyle.color,
+        lineWidth: axisCfg.lineStyle.width
       }
+    }
     : null
   const rotate = yAxis.axisLabel.rotate
   let textAlign = 'end'
@@ -693,15 +693,15 @@ export function getYAxisExt(chart: Chart) {
   }
   const label = yAxis.axisLabel.show
     ? {
-        rotate: (rotate * Math.PI) / 180,
-        style: {
-          fill: yAxis.axisLabel.color,
-          fontSize: yAxis.axisLabel.fontSize,
-          textBaseline,
-          textAlign,
-          fontFamily: chart.fontFamily
-        }
+      rotate: (rotate * Math.PI) / 180,
+      style: {
+        fill: yAxis.axisLabel.color,
+        fontSize: yAxis.axisLabel.fontSize,
+        textBaseline,
+        textAlign,
+        fontFamily: chart.fontFamily
       }
+    }
     : null
 
   axis = {
@@ -1454,6 +1454,7 @@ export function getMapStyle(
   mapKey: { key: string; securityCode: string; mapType: string },
   basicStyle: ChartBasicStyle
 ) {
+  //  
   let mapStyle: string
   switch (mapKey.mapType) {
     case 'tianditu':
@@ -1490,56 +1491,34 @@ export async function getMapScene(
   chart: Chart,
   scene: Scene,
   container: string,
-  mapKey: { key: string; securityCode: string; mapType: string },
+  mapKey: { key: string; securityCode: string; mapType: string, customize: string },
   basicStyle: ChartBasicStyle,
   miscStyle: ChartMiscAttr,
   mapStyle: string,
   center?: [number, number]
 ) {
-  if (!scene) {
-    scene = new Scene({
-      id: container,
-      logoVisible: false,
-      map: getMapObject(mapKey, basicStyle, miscStyle, mapStyle, center)
-    })
-  } else {
-    if (mapKey.mapType === 'tianditu') {
-      scene.map?.checkResize()
+  if (scene) {
+    // 销毁整个 Scene
+    try {
+      await scene.destroy();
+    } catch (e) {
+      console.warn('Scene destroy failed:', e);
     }
-    if (scene.getLayers()?.length) {
-      await scene.removeAllLayer()
-      try {
-        scene.setPitch(miscStyle.mapPitch)
-      } catch (e) {}
-      if (mapKey.mapType === 'tianditu') {
-        if (mapStyle === 'normal') {
-          scene.map?.removeStyle()
-        } else {
-          scene.setMapStyle(mapStyle)
-        }
-      } else {
-        scene.setMapStyle(mapStyle)
-      }
-
-      scene.map.showLabel = !(basicStyle.showLabel === false)
-      if (mapKey.mapType === 'qq') {
-        scene.map.setBaseMap({
-          //底图设置（参数为：VectorBaseMap对象）
-          type: 'vector', //类型：失量底图
-          features: basicStyle.showLabel === false ? ['base', 'building2d'] : undefined
-          //仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
-        })
-      }
-    }
-    if (basicStyle.autoFit === false) {
-      scene.setZoomAndCenter(basicStyle.zoomLevel, center)
-      if (mapKey.mapType === 'qq') {
-        scene.map.deMapAutoFit = false
-        scene.map.deMapZoom = basicStyle.zoomLevel
-        scene.map.deMapCenter = center
-      }
+    scene = null;
+  }
+  // 🔥 清理天地图残留 DOM
+  const containerEl = typeof container === 'string' ? document.getElementById(container) : container;
+  if (containerEl) {
+    // 清除所有子元素（特别是天地图插入的 canvas/img）
+    while (containerEl.firstChild) {
+      containerEl.removeChild(containerEl.firstChild);
     }
   }
+  scene = new Scene({
+    id: container,
+    logoVisible: false,
+    map: getMapObject(mapKey, basicStyle, miscStyle, mapStyle, center)
+  })
   mapRendering(container)
   scene.once('loaded', () => {
     mapRendered(container)
@@ -1559,7 +1538,7 @@ export async function getMapScene(
       // scene.map.deMapAutoLat = scene.map.getCenter().getLat()
     }
     // 去除天地图自己的缩放按钮
-    if (mapKey.mapType === 'tianditu') {
+    if (typeof scene.map.removeStyle === 'function') {
       if (mapStyle === 'normal') {
         scene.map?.removeStyle()
       } else {
@@ -1595,17 +1574,47 @@ export async function getMapScene(
         }
       }
     }
+    if (mapKey.mapType === 'zidingyi') {
+      const wmsLayer = new RasterLayer({
+        zIndex: 2,  // 图层叠加顺序
+        workerEnabled: false // 禁用WebWorker
+      });
+      wmsLayer.source(
+        // bbox=113.169069%2C35.1774017%2C117.526822%2C41.3747065
+        // GeoServer WMS 服务URL //url ，服务类型,版本，图层名，坐标系
+        // 更新URL参数：指定北京范围并启用透明
+        `${mapKey.url}/wms?` +
+        'service=WMS&version=1.1.0&request=GetMap&' +
+        `layers=${mapKey.layers}&` +
+        'BBOX={bbox}&' + // 北京大致范围
+        'width=768&height=556&' +
+        'srs=EPSG%3A4326&' +
+        'format=image/png&',
+        // 'tiled=true',
+        {
+          parser: {
+            type: 'rasterTile',
+            tileSize: 512,  // 瓦片大小
+            zoomOffset: 0   // 缩放级别偏移
+          }
+        }
+      );
+
+      scene.addLayer(wmsLayer);
+    }
   })
   return scene
 }
 
 export function getMapObject(
-  mapKey: { key: string; securityCode: string; mapType: string },
+  mapKey: { key: string; securityCode: string; mapType: string, customize: string },
   basicStyle: ChartBasicStyle,
   miscStyle: ChartMiscAttr,
   mapStyle: string,
-  center?: [number, number]
+  center?: [number, number],
+
 ) {
+
   switch (mapKey.mapType) {
     case 'tianditu':
       return new TMap({
@@ -1631,6 +1640,12 @@ export function getMapObject(
           preserveDrawingBuffer: true
         }
       })
+    case 'zidingyi':
+      return new Map({
+        style: 'blank', // 关键！避免加载在线底图
+        center: [116.3956, 39.9392],
+        zoom: 10
+      })
     default:
       return new GaodeMap({
         token: mapKey?.key ?? undefined,
@@ -2233,15 +2248,15 @@ export function handleConditionsStyle(chart: Chart, options) {
       ...(options.tooltip['customItems']
         ? {}
         : {
-            customItems: originalItems => {
-              originalItems.forEach(item => {
-                if (item.data?.[colorField]) {
-                  item.color = item.data[colorField][0]
-                }
-              })
-              return originalItems
-            }
-          })
+          customItems: originalItems => {
+            originalItems.forEach(item => {
+              if (item.data?.[colorField]) {
+                item.color = item.data[colorField][0]
+              }
+            })
+            return originalItems
+          }
+        })
     },
     ...(newColor ? { color: newColor } : {})
   }
@@ -2442,8 +2457,8 @@ export const configRoundAngle = (chart: Chart, styleName: string, callBack?: (da
                   ? bottomRadius
                   : finalRadius
                 : isTopRound
-                ? topRadius
-                : finalRadius,
+                  ? topRadius
+                  : finalRadius,
             ...(callBack ? callBack(datum) : {})
           }
         }
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts
index c9e12b4..bd6b2a8 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/l7.ts
@@ -13,7 +13,7 @@ import {
   configL7Tooltip,
   configL7Zoom
 } from '@/views/chart/components/js/panel/common/common_antv'
-import { queryMapKeyApi } from '@/api/setting/sysParameter'
+import { queryMapKeyApi,getMapServer } from '@/api/setting/sysParameter'
 import { useMapStoreWithOut } from '@/store/modules/map'
 const mapStore = useMapStoreWithOut()
 
@@ -138,6 +138,11 @@ export abstract class L7ChartView<
     }
     return mapStore.mapKey
   }
+  protected idGetMapKey = (id: any): Promise<any> => {
+    return getMapServer(id).then((res: any) => {
+      return JSON.parse(res.data)
+    })
+  }
 
   protected abstract setupOptions(chart: Chart, options: O): O
 }
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index 0c085e8..07a4a46 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -421,32 +421,32 @@ const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, callb
       chart: chart,
       action
     });
-    // 清除已有比例尺 
-    if (!scaleControl) {
-      scaleControl = new Scale({
-        position: 'bottomleft',
-        imperial: false
-      });
-      myChart.getScene()?.addControl(scaleControl);
-    }
-    // 添加全屏控件
-    if (fullscreenControl) {
+    // // 清除已有比例尺 
+    // if (!scaleControl) {
+    //   scaleControl = new Scale({
+    //     position: 'bottomleft',
+    //     imperial: false
+    //   });
+    //   myChart.getScene()?.addControl(scaleControl);
+    // }
+    // // 添加全屏控件
+    // if (fullscreenControl) {
 
-    } else {
-      fullscreenControl = new Fullscreen({
-        position: 'bottomright',
-      });
-      myChart.getScene()?.addControl(fullscreenControl, 'bottomright');
-    }
-    // ====== 使用高德地图原生API实现卫星图层切换 ======
-    // 添加控件到地图
-    // 移除之前的卫星控件（如果存在）
-    if (!satelliteControlInstance) {
-      // 添加新的卫星控件到地图
-      satelliteControlInstance = new SatelliteControl({ position: 'bottomright' });
-      myChart.getScene()?.addControl(satelliteControlInstance);
-    }
-    if (view.value.type == 'three-map') {
+    // } else {
+    //   fullscreenControl = new Fullscreen({
+    //     position: 'bottomright',
+    //   });
+    //   myChart.getScene()?.addControl(fullscreenControl, 'bottomright');
+    // }
+    // // ====== 使用高德地图原生API实现卫星图层切换 ======
+    // // 添加控件到地图
+    // // 移除之前的卫星控件（如果存在）
+    // if (!satelliteControlInstance) {
+    //   // 添加新的卫星控件到地图
+    //   satelliteControlInstance = new SatelliteControl({ position: 'bottomright' });
+    //   myChart.getScene()?.addControl(satelliteControlInstance);
+    // }
+    if (view.value.type == 'three-map' ) {
       // debugger
       if (curComponent.value && curComponent.value.threeModel && curComponent.value.threeModel.length > 0) {
         curComponent.value.threeModel.forEach((item: any) => {