diff --git a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
index 2faf1fc800..ed819dd4b1 100644
--- a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
+++ b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
@@ -14,18 +14,18 @@ public class MybatisPlusGenerator {
      * 第一 我嫌麻烦
      * 第二 后面配置会放到nacos读起来更麻烦了
      */
-    private static final String url = "jdbc:mysql://localhost:3306/dataease4?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false";
+    private static final String url = "jdbc:mysql://localhost:3306/dataease?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false";
     private static final String username = "root";
     private static final String password = "123456";
 
     /**
      * 业务模块例如datasource,dataset,panel等
      */
-    private static final String busi = "visualization";
+    private static final String busi = "chart";
     /**
      * 这是要生成代码的表名称
      */
-    private static final String TABLE_NAME = "visualization_link_jump_info";
+    private static final String TABLE_NAME = "core_chart_view";
 
     /**
      * 下面两个配置基本上不用动
diff --git a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java
index 7b35082b79..1058f0465e 100644
--- a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java
+++ b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/entity/CoreChartView.java
@@ -9,7 +9,7 @@ import java.io.Serializable;
  * </p>
  *
  * @author fit2cloud
- * @since 2024-05-07
+ * @since 2024-10-23
  */
 @TableName("core_chart_view")
 public class CoreChartView implements Serializable {
@@ -101,11 +101,21 @@ public class CoreChartView implements Serializable {
      */
     private String customAttr;
 
+    /**
+     * 图形属性_移动端
+     */
+    private String customAttrMobile;
+
     /**
      * 组件样式
      */
     private String customStyle;
 
+    /**
+     * 组件样式_移动端
+     */
+    private String customStyleMobile;
+
     /**
      * 结果过滤
      */
@@ -137,7 +147,7 @@ public class CoreChartView implements Serializable {
     private Long updateTime;
 
     /**
-     * 缩略图
+     * 缩略图 
      */
     private String snapshot;
 
@@ -206,8 +216,14 @@ public class CoreChartView implements Serializable {
      */
     private Boolean aggregate;
 
+    /**
+     * 流向地图起点名称field
+     */
     private String flowMapStartName;
 
+    /**
+     * 流向地图终点名称field
+     */
     private String flowMapEndName;
 
     /**
@@ -215,7 +231,6 @@ public class CoreChartView implements Serializable {
      */
     private String extColor;
 
-
     public Long getId() {
         return id;
     }
@@ -352,6 +367,14 @@ public class CoreChartView implements Serializable {
         this.customAttr = customAttr;
     }
 
+    public String getCustomAttrMobile() {
+        return customAttrMobile;
+    }
+
+    public void setCustomAttrMobile(String customAttrMobile) {
+        this.customAttrMobile = customAttrMobile;
+    }
+
     public String getCustomStyle() {
         return customStyle;
     }
@@ -360,6 +383,14 @@ public class CoreChartView implements Serializable {
         this.customStyle = customStyle;
     }
 
+    public String getCustomStyleMobile() {
+        return customStyleMobile;
+    }
+
+    public void setCustomStyleMobile(String customStyleMobile) {
+        this.customStyleMobile = customStyleMobile;
+    }
+
     public String getCustomFilter() {
         return customFilter;
     }
@@ -564,7 +595,9 @@ public class CoreChartView implements Serializable {
         ", extLabel = " + extLabel +
         ", extTooltip = " + extTooltip +
         ", customAttr = " + customAttr +
+        ", customAttrMobile = " + customAttrMobile +
         ", customStyle = " + customStyle +
+        ", customStyleMobile = " + customStyleMobile +
         ", customFilter = " + customFilter +
         ", drillFields = " + drillFields +
         ", senior = " + senior +
@@ -585,9 +618,9 @@ public class CoreChartView implements Serializable {
         ", copyFrom = " + copyFrom +
         ", copyId = " + copyId +
         ", aggregate = " + aggregate +
-        ", flowMapStartName=" + flowMapStartName +
-        ", flowMapEndName=" + flowMapEndName +
-        ", extColor=" + extColor +
+        ", flowMapStartName = " + flowMapStartName +
+        ", flowMapEndName = " + flowMapEndName +
+        ", extColor = " + extColor +
         "}";
     }
 }
diff --git a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java
index 372e70703d..e5c4fb1c33 100644
--- a/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java
+++ b/core/core-backend/src/main/java/io/dataease/chart/dao/auto/mapper/CoreChartViewMapper.java
@@ -10,7 +10,7 @@ import org.apache.ibatis.annotations.Mapper;
  * </p>
  *
  * @author fit2cloud
- * @since 2024-05-07
+ * @since 2024-10-23
  */
 @Mapper
 public interface CoreChartViewMapper extends BaseMapper<CoreChartView> {
diff --git a/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql b/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql
index 50e3280149..c73724057c 100644
--- a/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql
+++ b/core/core-backend/src/main/resources/db/desktop/V2.10.2__ddl.sql
@@ -6,4 +6,9 @@ FROM
 	INNER JOIN data_visualization_info dvi ON ccv.scene_id = dvi.id
 WHERE
 	dvi.delete_flag =1;
-delete from data_visualization_info dvi where dvi.delete_flag =1;
\ No newline at end of file
+delete from data_visualization_info dvi where dvi.delete_flag =1;
+
+
+ALTER TABLE `core_chart_view`
+    ADD COLUMN `custom_attr_mobile` longtext NULL COMMENT '图形属性_移动端',
+ADD COLUMN `custom_style_mobile` longtext NULL COMMENT '组件样式_移动端';
\ No newline at end of file
diff --git a/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql b/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql
index b3f8d27012..35e3855e0a 100644
--- a/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql
+++ b/core/core-backend/src/main/resources/db/migration/V2.10.2__ddl.sql
@@ -7,4 +7,8 @@ FROM
 WHERE
 	dvi.delete_flag =1;
 delete from data_visualization_info dvi where dvi.delete_flag =1;
-DELETE FROM area where pid = '156710100' OR id = '156710100';
\ No newline at end of file
+DELETE FROM area where pid = '156710100' OR id = '156710100';
+
+ALTER TABLE `core_chart_view`
+    ADD COLUMN `custom_attr_mobile` longtext NULL COMMENT '图形属性_移动端' AFTER `custom_attr`,
+ADD COLUMN `custom_style_mobile` longtext NULL COMMENT '组件样式_移动端' AFTER `custom_style`;
\ No newline at end of file
diff --git a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
index 25d79e3278..a01c0715cd 100644
--- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
+++ b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
@@ -210,7 +210,6 @@ watch(
       canEdit.value = false
       reShow()
       myValue.value = assignment(element.value.propValue.textValue)
-      console.log('===myValue.value=' + myValue.value)
       ed.setContent(myValue.value)
     }
   }
diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts
index bda05f1f1c..8add766bbc 100644
--- a/core/core-frontend/src/models/chart/chart.d.ts
+++ b/core/core-frontend/src/models/chart/chart.d.ts
@@ -45,7 +45,9 @@ declare interface Chart {
   customFilter: {}
   senior: CustomSenior
   customAttr: CustomAttr
+  customAttrMobile: CustomAttr
   customStyle: CustomStyle
+  customStyleMobile: CustomStyle
   drillFields: ChartViewField[]
   drillFilters: Filter[]
   datasetMode: 0 | 1
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index b24b3a49e4..d181b3f0d8 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -307,6 +307,13 @@ export const dvMainStore = defineStore('dataVisualization', {
           this.canvasState['curPointArea'] = this.curComponent['category']
         }
       }
+      // 移动端通知
+      if (this.mobileInPc) {
+        useEmitt().emitter.emit('curComponentChange', {
+          type: 'curComponentChange',
+          value: JSON.parse(JSON.stringify(this.curComponent))
+        })
+      }
     },
     setBashMatrixInfo(bashMatrixInfo) {
       this.bashMatrixInfo = bashMatrixInfo
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 098457efa8..7687e24f7f 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -743,3 +743,39 @@ export function maxYComponentCount() {
       .reduce((max, current) => Math.max(max, current), 0)
   }
 }
+
+export function componentSwitch(componentData, changeComponent) {
+  componentData.map(obj => (obj.id === changeComponent.id ? changeComponent : obj))
+}
+
+export function findComponentById(componentId) {
+  let result
+  componentData.forEach(item => {
+    if (item.id === componentId) {
+      result = item
+    } else if (item.component === 'Group') {
+      item.propValue.forEach(groupItem => {
+        if (groupItem.id === componentId) {
+          result = groupItem
+        }
+      })
+    } else if (item.component === 'DeTabs') {
+      item.propValue.forEach(tabItem => {
+        tabItem.componentData.forEach(tabComponent => {
+          if (tabComponent.id === componentId) {
+            result = tabComponent
+          }
+        })
+      })
+    }
+  })
+  return result
+}
+
+export function mobileViewStyleSwitch(component) {
+  if (component) {
+    const viewInfo = canvasViewInfo.value[component.id]
+    viewInfo.customStyle = component.customStyle
+    viewInfo.customStyleMobile = component.customStyleMobile
+  }
+}
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleCommon.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleCommon.vue
new file mode 100644
index 0000000000..13850514ad
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleCommon.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { PluginComponent } from '@/components/plugin'
+import ChartStyle from '@/views/chart/components/editor/editor-style/ChartStyle.vue'
+import { PropType } from 'vue'
+const emit = defineEmits([
+  'onColorChange',
+  'onMiscChange',
+  'onLabelChange',
+  'onTooltipChange',
+  'onChangeXAxisForm',
+  'onChangeYAxisForm',
+  'onChangeYAxisExtForm',
+  'onTextChange',
+  'onLegendChange',
+  'onBasicStyleChange',
+  'onBackgroundChange',
+  'onStyleAttrChange',
+  'onTableHeaderChange',
+  'onTableCellChange',
+  'onTableTotalChange',
+  'onChangeMiscStyleForm',
+  'onExtTooltipChange',
+  'onIndicatorChange',
+  'onIndicatorNameChange',
+  'onChangeQuadrantForm',
+  'onChangeFlowMapLineForm',
+  'onChangeFlowMapPointForm'
+])
+const props = defineProps({
+  commonBackgroundPop: {
+    type: Object,
+    required: false
+  },
+  commonBorderPop: {
+    type: Object,
+    required: false
+  },
+  eventInfo: {
+    type: Object,
+    required: false
+  },
+  view: {
+    type: Object as PropType<ChartObj>,
+    required: true
+  },
+  themes: {
+    type: String as PropType<EditorTheme>,
+    default: 'dark'
+  },
+  dimension: {
+    type: Array,
+    required: true
+  },
+  quota: {
+    type: Array,
+    required: true
+  },
+  properties: {
+    type: Array as PropType<EditorProperty[]>,
+    required: false,
+    default: () => {
+      return []
+    }
+  },
+  propertyInnerAll: {
+    type: Object as PropType<EditorPropertyInner>,
+    required: false,
+    default: () => {
+      return {}
+    }
+  },
+  selectorSpec: {
+    type: Object as PropType<EditorSelectorSpec>,
+    required: false,
+    default: () => {
+      return {}
+    }
+  },
+  allFields: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <el-container direction="vertical" id="main-style-p">
+    <el-scrollbar class="drag_main_area">
+      <template v-if="view.plugin?.isPlugin">
+        <plugin-component
+          :jsname="view.plugin.staticMap['editor-style']"
+          :view="view"
+          :dimension="dimension"
+          :quota="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="dimension"
+          :quota-data="quota"
+          :all-fields="allFields"
+          @onColorChange="(val, prop) => emit('onColorChange', val, prop)"
+          @onMiscChange="(val, prop) => emit('onMiscChange', val, prop)"
+          @onLabelChange="(val, prop) => emit('onLabelChange', val, prop)"
+          @onTooltipChange="(val, prop) => emit('onTooltipChange', val, prop)"
+          @onChangeXAxisForm="(val, prop) => emit('onChangeXAxisForm', val, prop)"
+          @onChangeYAxisForm="(val, prop) => emit('onChangeYAxisForm', val, prop)"
+          @onChangeYAxisExtForm="(val, prop) => emit('onChangeYAxisExtForm', val, prop)"
+          @onTextChange="(val, prop) => emit('onTextChange', val, prop)"
+          @onIndicatorChange="(val, prop) => emit('onIndicatorChange', val, prop)"
+          @onIndicatorNameChange="(val, prop) => emit('onIndicatorNameChange', val, prop)"
+          @onLegendChange="(val, prop) => emit('onLegendChange', val, prop)"
+          @onBackgroundChange="(val, prop) => emit('onBackgroundChange', val, prop)"
+          @onStyleAttrChange="(val, prop) => emit('onStyleAttrChange', val, prop)"
+          @onBasicStyleChange="(val, prop) => emit('onBasicStyleChange', val, prop)"
+          @onTableHeaderChange="(val, prop) => emit('onTableHeaderChange', val, prop)"
+          @onTableCellChange="(val, prop) => emit('onTableCellChange', val, prop)"
+          @onTableTotalChange="(val, prop) => emit('onTableTotalChange', val, prop)"
+          @onChangeMiscStyleForm="(val, prop) => emit('onChangeMiscStyleForm', val, prop)"
+          @onExtTooltipChange="(val, prop) => emit('onExtTooltipChange', val, prop)"
+          @onChangeQuadrantForm="(val, prop) => emit('onChangeQuadrantForm', val, prop)"
+          @onChangeFlowMapLineForm="(val, prop) => emit('onChangeFlowMapLineForm', val, prop)"
+          @onChangeFlowMapPointForm="(val, prop) => emit('onChangeFlowMapPointForm', val, prop)"
+        />
+      </template>
+    </el-scrollbar>
+  </el-container>
+</template>
+
+<style scoped lang="less"></style>
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 f91047794a..db804f45d4 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -74,7 +74,8 @@ import {
 const embeddedStore = useEmbedded()
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
-const { canvasCollapse, curComponent, componentData, editMode } = storeToRefs(dvMainStore)
+const { canvasCollapse, curComponent, componentData, editMode, mobileInPc } =
+  storeToRefs(dvMainStore)
 const router = useRouter()
 let componentNameEdit = ref(false)
 let inputComponentName = ref('')
@@ -850,8 +851,16 @@ const updateChartData = view => {
 }
 
 const renderChart = view => {
-  useEmitt().emitter.emit('renderChart-' + view.id, view)
-  snapshotStore.recordSnapshotCache('renderChart', view.id)
+  if (mobileInPc.value) {
+    //移动端设计
+    useEmitt().emitter.emit('onMobileStatusChange', {
+      type: 'componentStyleChange',
+      value: { type: 'renderChart', component: JSON.parse(JSON.stringify(view)) }
+    })
+  } else {
+    useEmitt().emitter.emit('renderChart-' + view.id, view)
+    snapshotStore.recordSnapshotCache('renderChart', view.id)
+  }
 }
 
 const onAreaChange = val => {
@@ -1772,575 +1781,231 @@ const deleteChartFieldItem = id => {
 
 <template>
   <div class="chart-edit" :class="'editor-' + themes" @keydown.stop @keyup.stop>
-    <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')"
+    <!--移动端设计使用 注意与pc设计同步-->
+    <template v-if="mobileInPc">
+      <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"
+            />
+          </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"
+              @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>
+    </template>
+
+    <!--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
+          }"
         >
-          <Fold v-if="canvasCollapse.chartAreaCollapse" class="collapse-icon" />
-          <Expand v-else class="collapse-icon" />
-        </el-icon>
-        <div v-if="canvasCollapse.chartAreaCollapse" class="collapse-title">
-          <span style="font-size: 14px">{{ view.title }}</span>
-        </div>
-        <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"
-                style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
-                :style="{ width: componentNameEdit ? '300px' : 'auto' }"
-                :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>
-                </template>
-                <div style="margin-bottom: 4px; font-size: 14px; color: #646a73">图表ID</div>
-                <div style="font-size: 14px; color: #1f2329">
-                  {{ view.id }}
+          <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>
+          <div v-if="canvasCollapse.chartAreaCollapse" class="collapse-title">
+            <span style="font-size: 14px">{{ view.title }}</span>
+          </div>
+          <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"
+                  style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
+                  :style="{ width: componentNameEdit ? '300px' : 'auto' }"
+                  :class="{ 'component-name-dark': themes === 'dark' }"
+                  @dblclick="editComponentName"
+                >
+                  {{ view.title }}
                 </div>
-              </el-popover>
-            </div>
-          </el-row>
-
-          <el-row style="height: calc(100vh - 110px); overflow-y: auto">
-            <div v-if="view.type === 'VQuery' && curComponent" class="query-style-tab">
-              <div style="padding-top: 1px">
-                <VQueryChartStyle
-                  :element="curComponent"
-                  :common-background-pop="curComponent?.commonBackground"
-                  :chart="view"
-                  :themes="themes"
-                />
+                <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>
+                  </template>
+                  <div style="margin-bottom: 4px; font-size: 14px; color: #646a73">图表ID</div>
+                  <div style="font-size: 14px; color: #1f2329">
+                    {{ view.id }}
+                  </div>
+                </el-popover>
               </div>
-            </div>
-            <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">
-                    <el-row
-                      v-if="!['rich-text', 'Picture', 'picture-group'].includes(view.type)"
-                      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-row>
+
+            <el-row style="height: calc(100vh - 110px); overflow-y: auto">
+              <div v-if="view.type === 'VQuery' && curComponent" class="query-style-tab">
+                <div style="padding-top: 1px">
+                  <VQueryChartStyle
+                    :element="curComponent"
+                    :common-background-pop="curComponent?.commonBackground"
+                    :chart="view"
+                    :themes="themes"
+                  />
+                </div>
+              </div>
+              <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">
+                      <el-row
+                        v-if="!['rich-text', 'Picture', 'picture-group'].includes(view.type)"
+                        class="drag-data padding-lr"
                       >
-                        <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"
-                          >
-                            <template #prefix>
-                              <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>
-                              </Icon>
-                            </template>
-                            <template #default>
-                              <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"
-                          />
-                        </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"
-                      />
-                    </template>
-                    <template v-else>
-                      <!--area-->
-                      <el-row v-if="showAxis('area')" class="padding-lr drag-data">
-                        <span class="data-area-label">
-                          {{ t('chart.area') }}
-                          <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"
-                          />
-                        </div>
-                      </el-row>
-                      <!--xAxis-->
-                      <el-row v-if="showAxis('xAxis')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span>
-                            {{ chartViewInstance.axisConfig.xAxis.name }}
-                            <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-icon>
-                          </el-tooltip>
-                        </div>
-                        <div
-                          class="qw"
-                          @drop="$event => drop($event)"
-                          @dragenter="dragEnter"
-                          @dragover="$event => dragOver($event)"
+                        <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"
                         >
-                          <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"
-                                @onDimensionItemChange="dimensionItemChange"
-                                @onDimensionItemRemove="dimensionItemRemove"
-                                @onNameEdit="showRename"
-                                @onCustomSort="onCustomSort"
-                                @valueFormatter="valueFormatter"
-                                @onToggleHide="onToggleHide"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :themes="themes" :drag-list="view.xAxis" />
-                        </div>
-                      </el-row>
-
-                      <!--xAxisExt-->
-                      <el-row v-if="showAxis('xAxisExt')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span>
-                            {{ chartViewInstance.axisConfig.xAxisExt.name }}
-                            <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')"
+                          <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"
                             >
-                              <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"
-                          >
-                            <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"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :drag-list="view.xAxisExt" />
-                        </div>
+                              <template #prefix>
+                                <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>
+                                </Icon>
+                              </template>
+                              <template #default>
+                                <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"
+                            />
+                          </template>
+                        </el-popover>
                       </el-row>
-
-                      <!--flowMapStartName-->
-                      <el-row v-if="showAxis('flowMapStartName')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span>
-                            {{ chartViewInstance.axisConfig.flowMapStartName.name }}
-                            <i
-                              v-if="!chartViewInstance.axisConfig.flowMapStartName?.allowEmpty"
-                              class="required"
-                            ></i>
+                      <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"
+                        />
+                      </template>
+                      <template v-else>
+                        <!--area-->
+                        <el-row v-if="showAxis('area')" class="padding-lr drag-data">
+                          <span class="data-area-label">
+                            {{ t('chart.area') }}
+                            <i 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-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"
-                          >
-                            <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"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :themes="themes" :drag-list="view.flowMapStartName" />
-                        </div>
-                      </el-row>
-
-                      <!--flowMapEndName-->
-                      <el-row v-if="showAxis('flowMapEndName')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span>
-                            {{ chartViewInstance.axisConfig.flowMapEndName.name }}
-                            <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-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"
-                          >
-                            <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"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :themes="themes" :drag-list="view.flowMapEndName" />
-                        </div>
-                      </el-row>
-
-                      <!--extStack-->
-                      <el-row v-if="showAxis('extStack')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span>
-                            {{ chartViewInstance.axisConfig.extStack.name }}
-                            <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-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"
-                          >
-                            <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"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :drag-list="view.extStack" />
-                        </div>
-                      </el-row>
-
-                      <el-row v-if="showAxis('extColor')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span>
-                            {{ chartViewInstance.axisConfig.extColor.name }}
-                            <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-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')"
-                          >
-                            <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"
-                                @onDimensionItemChange="dimensionItemChange"
-                                @onDimensionItemRemove="dimensionItemRemove"
-                                @onNameEdit="showRename"
-                                @onCustomSort="onCustomExtColorSort"
-                                @valueFormatter="valueFormatter"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :themes="themes" :drag-list="view.extColor" />
-                        </div>
-                      </el-row>
-
-                      <template v-if="view.type !== 'bar-range'">
-                        <!--yAxis-->
-                        <el-row v-if="showAxis('yAxis')" class="padding-lr drag-data">
+                          <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"
+                            />
+                          </div>
+                        </el-row>
+                        <!--xAxis-->
+                        <el-row v-if="showAxis('xAxis')" class="padding-lr drag-data">
                           <div class="form-draggable-title">
-                            <span class="data-area-label">
-                              <span style="margin-right: 4px">
-                                {{ chartViewInstance.axisConfig.yAxis.name }}
-                                <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"
-                              >
-                                <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>
-                              </el-tooltip>
+                            <span>
+                              {{ chartViewInstance.axisConfig.xAxis.name }}
+                              <i
+                                v-if="!chartViewInstance.axisConfig.xAxis?.allowEmpty"
+                                class="required"
+                              ></i>
                             </span>
                             <el-tooltip
                               :effect="toolTip"
@@ -2351,7 +2016,7 @@ const deleteChartFieldItem = id => {
                                 class="remove-icon"
                                 :class="{ 'remove-icon--dark': themes === 'dark' }"
                                 size="14px"
-                                @click="removeItems('yAxis')"
+                                @click="removeItems('xAxis')"
                               >
                                 <Icon class-name="inner-class" name="icon_delete-trash_outlined"
                                   ><icon_deleteTrash_outlined class="svg-icon inner-class"
@@ -2360,56 +2025,765 @@ const deleteChartFieldItem = id => {
                             </el-tooltip>
                           </div>
                           <div
-                            @drop="$event => drop($event, 'yAxis')"
+                            class="qw"
+                            @drop="$event => drop($event)"
                             @dragenter="dragEnter"
                             @dragover="$event => dragOver($event)"
                           >
                             <draggable
-                              :list="view.yAxis"
+                              :list="view.xAxis"
                               :move="onMove"
                               item-key="id"
                               group="drag"
                               animation="300"
                               class="drag-block-style"
                               :class="{ dark: themes === 'dark' }"
-                              @add="addYaxis"
-                              @change="e => onAxisChange(e, 'yAxis')"
+                              @add="addXaxis"
                             >
                               <template #item="{ element, index }">
-                                <quota-item
+                                <dimension-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"
+                                  type="dimension"
+                                  @onDimensionItemChange="dimensionItemChange"
+                                  @onDimensionItemRemove="dimensionItemRemove"
                                   @onNameEdit="showRename"
-                                  @editItemFilter="showQuotaEditFilter"
-                                  @editItemCompare="showQuotaEditCompare"
+                                  @onCustomSort="onCustomSort"
                                   @valueFormatter="valueFormatter"
                                   @onToggleHide="onToggleHide"
                                 />
                               </template>
                             </draggable>
-                            <drag-placeholder
-                              :margin-top="view.type === 'stock-line' ? '9px' : '0'"
-                              :drag-list="view.yAxis"
-                            />
+                            <drag-placeholder :themes="themes" :drag-list="view.xAxis" />
                           </div>
                         </el-row>
-                        <!-- xAxisExtRight -->
-                        <el-row v-if="showAxis('xAxisExtRight')" class="padding-lr drag-data">
+
+                        <!--xAxisExt-->
+                        <el-row v-if="showAxis('xAxisExt')" class="padding-lr drag-data">
                           <div class="form-draggable-title">
                             <span>
-                              {{ chartViewInstance.axisConfig.extBubble.name }}
+                              {{ chartViewInstance.axisConfig.xAxisExt.name }}
                               <i
-                                v-if="!chartViewInstance.axisConfig.extBubble?.allowEmpty"
+                                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-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"
+                            >
+                              <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"
+                                />
+                              </template>
+                            </draggable>
+                            <drag-placeholder :drag-list="view.xAxisExt" />
+                          </div>
+                        </el-row>
+
+                        <!--flowMapStartName-->
+                        <el-row v-if="showAxis('flowMapStartName')" class="padding-lr drag-data">
+                          <div class="form-draggable-title">
+                            <span>
+                              {{ chartViewInstance.axisConfig.flowMapStartName.name }}
+                              <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-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"
+                            >
+                              <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"
+                                />
+                              </template>
+                            </draggable>
+                            <drag-placeholder :themes="themes" :drag-list="view.flowMapStartName" />
+                          </div>
+                        </el-row>
+
+                        <!--flowMapEndName-->
+                        <el-row v-if="showAxis('flowMapEndName')" class="padding-lr drag-data">
+                          <div class="form-draggable-title">
+                            <span>
+                              {{ chartViewInstance.axisConfig.flowMapEndName.name }}
+                              <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-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"
+                            >
+                              <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"
+                                />
+                              </template>
+                            </draggable>
+                            <drag-placeholder :themes="themes" :drag-list="view.flowMapEndName" />
+                          </div>
+                        </el-row>
+
+                        <!--extStack-->
+                        <el-row v-if="showAxis('extStack')" class="padding-lr drag-data">
+                          <div class="form-draggable-title">
+                            <span>
+                              {{ chartViewInstance.axisConfig.extStack.name }}
+                              <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-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"
+                            >
+                              <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"
+                                />
+                              </template>
+                            </draggable>
+                            <drag-placeholder :drag-list="view.extStack" />
+                          </div>
+                        </el-row>
+
+                        <el-row v-if="showAxis('extColor')" class="padding-lr drag-data">
+                          <div class="form-draggable-title">
+                            <span>
+                              {{ chartViewInstance.axisConfig.extColor.name }}
+                              <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-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')"
+                            >
+                              <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"
+                                  @onDimensionItemChange="dimensionItemChange"
+                                  @onDimensionItemRemove="dimensionItemRemove"
+                                  @onNameEdit="showRename"
+                                  @onCustomSort="onCustomExtColorSort"
+                                  @valueFormatter="valueFormatter"
+                                />
+                              </template>
+                            </draggable>
+                            <drag-placeholder :themes="themes" :drag-list="view.extColor" />
+                          </div>
+                        </el-row>
+
+                        <template v-if="view.type !== 'bar-range'">
+                          <!--yAxis-->
+                          <el-row v-if="showAxis('yAxis')" class="padding-lr drag-data">
+                            <div class="form-draggable-title">
+                              <span class="data-area-label">
+                                <span style="margin-right: 4px">
+                                  {{ chartViewInstance.axisConfig.yAxis.name }}
+                                  <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"
+                                >
+                                  <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>
+                                </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-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')"
+                              >
+                                <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"
+                                    @onQuotaItemChange="item => quotaItemChange(item, 'yAxis')"
+                                    @onQuotaItemRemove="quotaItemRemove"
+                                    @onNameEdit="showRename"
+                                    @editItemFilter="showQuotaEditFilter"
+                                    @editItemCompare="showQuotaEditCompare"
+                                    @valueFormatter="valueFormatter"
+                                    @onToggleHide="onToggleHide"
+                                  />
+                                </template>
+                              </draggable>
+                              <drag-placeholder
+                                :margin-top="view.type === 'stock-line' ? '9px' : '0'"
+                                :drag-list="view.yAxis"
+                              />
+                            </div>
+                          </el-row>
+                          <!-- xAxisExtRight -->
+                          <el-row v-if="showAxis('xAxisExtRight')" class="padding-lr drag-data">
+                            <div class="form-draggable-title">
+                              <span>
+                                {{ chartViewInstance.axisConfig.extBubble.name }}
+                                <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-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')"
+                              >
+                                <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"
+                                  />
+                                </template>
+                              </draggable>
+                              <drag-placeholder :drag-list="view.extBubble" />
+                            </div>
+                          </el-row>
+                          <!--yAxisExt-->
+                          <el-row v-if="showAxis('yAxisExt')" class="padding-lr drag-data">
+                            <div class="form-draggable-title">
+                              <span>
+                                {{ chartViewInstance.axisConfig.yAxisExt.name }}
+                                <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-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')"
+                              >
+                                <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"
+                                    @onQuotaItemChange="item => quotaItemChange(item, 'yAxisExt')"
+                                    @onQuotaItemRemove="quotaItemRemove"
+                                    @onNameEdit="showRename"
+                                    @editItemFilter="showQuotaEditFilter"
+                                    @editItemCompare="showQuotaEditCompare"
+                                    @valueFormatter="valueFormatter"
+                                  />
+                                </template>
+                              </draggable>
+                              <drag-placeholder :drag-list="view.yAxisExt" />
+                            </div>
+                          </el-row>
+                        </template>
+                        <template v-else-if="view.type === 'bar-range'">
+                          <!--yAxis-->
+                          <el-row v-if="showAxis('yAxis')" class="padding-lr drag-data">
+                            <div class="form-draggable-title">
+                              <span>
+                                {{ chartViewInstance.axisConfig.yAxis.name }}
+                                <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-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')"
+                              >
+                                <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"
+                                  />
+                                  <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"
+                                  />
+                                </template>
+                              </draggable>
+                              <drag-placeholder :drag-list="view.yAxis" />
+                            </div>
+                          </el-row>
+                          <!--yAxisExt-->
+                          <el-row v-if="showAxis('yAxisExt')" class="padding-lr drag-data">
+                            <div class="form-draggable-title">
+                              <span>
+                                {{ chartViewInstance.axisConfig.yAxisExt.name }}
+                                <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-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')"
+                              >
+                                <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"
+                                  />
+                                  <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"
+                                  />
+                                </template>
+                              </draggable>
+                              <drag-placeholder :drag-list="view.yAxisExt" />
+                            </div>
+                          </el-row>
+                        </template>
+                        <!-- extBubble -->
+                        <el-row v-if="showAxis('extBubble')" class="padding-lr drag-data">
+                          <div class="form-draggable-title">
+                            <span class="data-area-label">
+                              <span style="margin-right: 4px">
+                                {{ chartViewInstance.axisConfig.extBubble.name }}
+                                <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"
+                              >
+                                <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>
+                              </el-tooltip>
+                            </span>
                             <el-tooltip
                               :effect="toolTip"
                               placement="top"
@@ -2444,33 +2818,47 @@ const deleteChartFieldItem = id => {
                               @change="e => onAxisChange(e, 'extBubble')"
                             >
                               <template #item="{ element, index }">
-                                <dimension-item
+                                <quota-item
                                   :dimension-data="state.dimension"
                                   :quota-data="state.quota"
                                   :chart="view"
                                   :item="element"
                                   :index="index"
+                                  type="extBubble"
                                   :themes="props.themes"
-                                  type="xAxisExtRight"
-                                  @onDimensionItemChange="dimensionItemChange"
-                                  @onDimensionItemRemove="dimensionItemRemove"
+                                  @onQuotaItemChange="item => quotaItemChange(item, 'extBubble')"
+                                  @onQuotaItemRemove="quotaItemRemove"
                                   @onNameEdit="showRename"
-                                  @onCustomSort="onExtCustomRightSort"
+                                  @editItemFilter="showQuotaEditFilter"
+                                  @editItemCompare="showQuotaEditCompare"
+                                  @valueFormatter="valueFormatter"
                                 />
                               </template>
                             </draggable>
                             <drag-placeholder :drag-list="view.extBubble" />
                           </div>
                         </el-row>
-                        <!--yAxisExt-->
-                        <el-row v-if="showAxis('yAxisExt')" class="padding-lr drag-data">
+
+                        <!--drill-->
+                        <el-row v-if="showAxis('drill')" class="padding-lr drag-data">
                           <div class="form-draggable-title">
-                            <span>
-                              {{ chartViewInstance.axisConfig.yAxisExt.name }}
-                              <i
-                                v-if="!chartViewInstance.axisConfig.yAxisExt?.allowEmpty"
-                                class="required"
-                              ></i>
+                            <span class="data-area-label">
+                              <span style="margin-right: 4px">
+                                {{ t('chart.drill') }} / {{ t('chart.dimension') }}
+                              </span>
+                              <el-tooltip class="item" :effect="toolTip" placement="top">
+                                <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>
+                              </el-tooltip>
                             </span>
                             <el-tooltip
                               :effect="toolTip"
@@ -2481,7 +2869,7 @@ const deleteChartFieldItem = id => {
                                 class="remove-icon"
                                 :class="{ 'remove-icon--dark': themes === 'dark' }"
                                 size="14px"
-                                @click="removeItems('yAxisExt')"
+                                @click="removeItems('drillFields')"
                               >
                                 <Icon class-name="inner-class" name="icon_delete-trash_outlined"
                                   ><icon_deleteTrash_outlined class="svg-icon inner-class"
@@ -2490,1052 +2878,748 @@ const deleteChartFieldItem = id => {
                             </el-tooltip>
                           </div>
                           <div
-                            @drop="$event => drop($event, 'yAxisExt')"
+                            @drop="$event => drop($event, 'drillFields')"
                             @dragenter="dragEnter"
                             @dragover="$event => dragOver($event)"
                           >
                             <draggable
-                              :list="view.yAxisExt"
-                              :move="onMove"
+                              :list="view.drillFields"
                               item-key="id"
                               group="drag"
                               animation="300"
+                              :move="onMove"
                               class="drag-block-style"
                               :class="{ dark: themes === 'dark' }"
-                              @add="addYaxisExt"
-                              @change="e => onAxisChange(e, 'yAxisExt')"
+                              @add="addDrill"
                             >
                               <template #item="{ element, index }">
-                                <quota-item
-                                  :dimension-data="state.dimension"
-                                  :quota-data="state.quota"
+                                <drill-item
+                                  :key="element.id"
+                                  :index="index"
                                   :chart="view"
                                   :item="element"
-                                  :index="index"
-                                  type="quotaExt"
+                                  :dimension-data="state.dimension"
+                                  :quota-data="state.quota"
                                   :themes="props.themes"
-                                  @onQuotaItemChange="item => quotaItemChange(item, 'yAxisExt')"
-                                  @onQuotaItemRemove="quotaItemRemove"
+                                  @onDimensionItemChange="drillItemChange"
+                                  @onDimensionItemRemove="drillItemRemove"
                                   @onNameEdit="showRename"
-                                  @editItemFilter="showQuotaEditFilter"
-                                  @editItemCompare="showQuotaEditCompare"
-                                  @valueFormatter="valueFormatter"
+                                  @onCustomSort="onDrillCustomSort"
                                 />
                               </template>
                             </draggable>
-                            <drag-placeholder :drag-list="view.yAxisExt" />
+                            <drag-placeholder :drag-list="view.drillFields" />
                           </div>
                         </el-row>
+
+                        <!--filter-->
+                        <el-row class="padding-lr drag-data no-top-border no-top-padding">
+                          <div class="form-draggable-title">
+                            <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-icon>
+                            </el-tooltip>
+                          </div>
+                          <div
+                            class="tree-btn"
+                            :class="{ 'tree-btn--dark': themes === 'dark', active: isFilterActive }"
+                            @click="openTreeFilter"
+                          >
+                            <el-icon>
+                              <Icon class="svg-background" name="icon-filter"
+                                ><iconFilter class="svg-icon svg-background"
+                              /></Icon>
+                            </el-icon>
+
+                            <span>{{ $t('chart.filter') }}</span>
+                          </div>
+                        </el-row>
+
+                        <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"
+                            >
+                              {{ t('chart.aggregate_time') }}
+                            </el-checkbox>
+                          </el-form-item>
+                        </el-row>
                       </template>
-                      <template v-else-if="view.type === 'bar-range'">
-                        <!--yAxis-->
-                        <el-row v-if="showAxis('yAxis')" class="padding-lr drag-data">
-                          <div class="form-draggable-title">
-                            <span>
-                              {{ chartViewInstance.axisConfig.yAxis.name }}
-                              <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-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')"
-                            >
-                              <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"
-                                />
-                                <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"
-                                />
-                              </template>
-                            </draggable>
-                            <drag-placeholder :drag-list="view.yAxis" />
-                          </div>
-                        </el-row>
-                        <!--yAxisExt-->
-                        <el-row v-if="showAxis('yAxisExt')" class="padding-lr drag-data">
-                          <div class="form-draggable-title">
-                            <span>
-                              {{ chartViewInstance.axisConfig.yAxisExt.name }}
-                              <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-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')"
-                            >
-                              <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"
-                                />
-                                <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"
-                                />
-                              </template>
-                            </draggable>
-                            <drag-placeholder :drag-list="view.yAxisExt" />
-                          </div>
-                        </el-row>
-                      </template>
-                      <!-- extBubble -->
-                      <el-row v-if="showAxis('extBubble')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span class="data-area-label">
-                            <span style="margin-right: 4px">
-                              {{ chartViewInstance.axisConfig.extBubble.name }}
-                              <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"
-                            >
-                              <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>
-                            </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-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')"
-                          >
-                            <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"
-                                @onQuotaItemChange="item => quotaItemChange(item, 'extBubble')"
-                                @onQuotaItemRemove="quotaItemRemove"
-                                @onNameEdit="showRename"
-                                @editItemFilter="showQuotaEditFilter"
-                                @editItemCompare="showQuotaEditCompare"
-                                @valueFormatter="valueFormatter"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :drag-list="view.extBubble" />
-                        </div>
-                      </el-row>
-
-                      <!--drill-->
-                      <el-row v-if="showAxis('drill')" class="padding-lr drag-data">
-                        <div class="form-draggable-title">
-                          <span class="data-area-label">
-                            <span style="margin-right: 4px">
-                              {{ t('chart.drill') }} / {{ t('chart.dimension') }}
-                            </span>
-                            <el-tooltip class="item" :effect="toolTip" placement="top">
-                              <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>
-                            </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-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"
-                          >
-                            <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"
-                              />
-                            </template>
-                          </draggable>
-                          <drag-placeholder :drag-list="view.drillFields" />
-                        </div>
-                      </el-row>
-
-                      <!--filter-->
-                      <el-row class="padding-lr drag-data no-top-border no-top-padding">
-                        <div class="form-draggable-title">
-                          <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-icon>
-                          </el-tooltip>
-                        </div>
-                        <div
-                          class="tree-btn"
-                          :class="{ 'tree-btn--dark': themes === 'dark', active: isFilterActive }"
-                          @click="openTreeFilter"
-                        >
-                          <el-icon>
-                            <Icon class="svg-background" name="icon-filter"
-                              ><iconFilter class="svg-icon svg-background"
-                            /></Icon>
-                          </el-icon>
-
-                          <span>{{ $t('chart.filter') }}</span>
-                        </div>
-                      </el-row>
-
-                      <el-row v-if="showAggregate" class="refresh-area">
+                    </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.aggregate"
+                            v-model="view.refreshViewEnable"
                             :effect="themes"
                             size="small"
-                            @change="aggregateChange"
-                          >
-                            {{ t('chart.aggregate_time') }}
-                          </el-checkbox>
-                        </el-form-item>
-                      </el-row>
-                    </template>
-                  </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')"
-                        >
-                          {{ 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"
-                          >
-                            <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>
-                            </template>
-                          </el-input>
-                        </el-form-item>
-                      </el-row>
-                    </el-row>
-                    <el-row class="result-style" :class="'result-style-' + themes">
-                      <div class="result-style-input">
-                        <span v-if="view.type !== 'richTextView'">
-                          {{ t('chart.result_count') }}
-                        </span>
-                        <span v-if="view.type !== 'richTextView'">
-                          <el-radio-group
-                            v-model="view.resultMode"
-                            :effect="themes"
-                            class="radio-span"
-                            size="small"
                             @change="recordSnapshotInfo('render')"
                           >
-                            <el-radio label="all" :effect="themes">
-                              <span class="result-count-label" :class="{ dark: themes === 'dark' }">
-                                {{ t('chart.result_mode_all') }}
-                              </span>
-                            </el-radio>
-                            <el-radio label="custom">
-                              <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>
+                            {{ 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"
+                            >
+                              <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>
+                              </template>
+                            </el-input>
+                          </el-form-item>
+                        </el-row>
+                      </el-row>
+                      <el-row class="result-style" :class="'result-style-' + themes">
+                        <div class="result-style-input">
+                          <span v-if="view.type !== 'richTextView'">
+                            {{ t('chart.result_count') }}
+                          </span>
+                          <span v-if="view.type !== 'richTextView'">
+                            <el-radio-group
+                              v-model="view.resultMode"
+                              :effect="themes"
+                              class="radio-span"
+                              size="small"
+                              @change="recordSnapshotInfo('render')"
+                            >
+                              <el-radio label="all" :effect="themes">
+                                <span
+                                  class="result-count-label"
+                                  :class="{ dark: themes === 'dark' }"
+                                >
+                                  {{ t('chart.result_mode_all') }}
+                                </span>
+                              </el-radio>
+                              <el-radio label="custom">
+                                <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)"
-                      >
-                        <span style="font-size: 12px">
-                          {{ t('chart.update_chart_data') }}
-                        </span>
-                      </el-button>
-                    </el-row>
-                  </el-footer>
-                </el-container>
-              </el-tab-pane>
+                        <el-button
+                          :disabled="disableUpdate"
+                          type="primary"
+                          class="result-style-button"
+                          @click="updateChartData(view)"
+                        >
+                          <span style="font-size: 12px">
+                            {{ t('chart.update_chart_data') }}
+                          </span>
+                        </el-button>
+                      </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-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"
-                      />
-                    </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"
-                        @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>
-              </el-tab-pane>
-
-              <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"
-                      />
-                    </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"
-                        @onFunctionCfgChange="onFunctionCfgChange"
-                        @onAssistLineChange="onAssistLineChange"
-                        @onScrollCfgChange="onScrollCfgChange"
-                        @onThresholdChange="onThresholdChange"
-                        @onMapMappingChange="onMapMappingChange"
-                        @onBubbleAnimateChange="onBubbleAnimateChange"
-                      />
-                    </template>
-                  </el-scrollbar>
-                </el-container>
-              </el-tab-pane>
-            </el-tabs>
-          </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="'数据集'"
-          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">数据集</span>
-        </div>
-        <el-container
-          v-if="!canvasCollapse.datasetAreaCollapse"
-          direction="vertical"
-          class="dataset-area view-panel-row"
-        >
-          <el-header class="editor-title">
-            <span style="font-size: 14px">数据集</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="recordSnapshotInfo('calcData')"
-              />
-              <el-tooltip :effect="toolTip" content="编辑数据集" placement="top">
-                <el-icon
-                  v-if="curDatasetWeight >= 7 && !isDataEaseBi"
-                  class="field-search-icon-btn"
-                  :class="{ dark: themes === 'dark' }"
-                  style="margin-left: 8px"
-                  @click="editDs"
+                <el-tab-pane
+                  name="style"
+                  :label="t('chart.chart_style')"
+                  class="padding-tab"
+                  style="width: 100%"
                 >
-                  <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-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"
+                        />
+                      </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"
+                          @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>
+                </el-tab-pane>
+
+                <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"
+                        />
+                      </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"
+                          @onFunctionCfgChange="onFunctionCfgChange"
+                          @onAssistLineChange="onAssistLineChange"
+                          @onScrollCfgChange="onScrollCfgChange"
+                          @onThresholdChange="onThresholdChange"
+                          @onMapMappingChange="onMapMappingChange"
+                          @onBubbleAnimateChange="onBubbleAnimateChange"
+                        />
+                      </template>
+                    </el-scrollbar>
+                  </el-container>
+                </el-tab-pane>
+              </el-tabs>
             </el-row>
-            <el-row class="dataset-search padding-lr">
-              <div class="dataset-search-label" :class="{ dark: themes === 'dark' }">
-                <span>{{ t('chart.field') }}</span>
-                <span>
-                  <el-tooltip :effect="toolTip" content="刷新" 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>
+          </div>
+        </div>
+        <div
+          class="dataset-main content-area"
+          :class="{
+            'content-area-close': canvasCollapse.datasetAreaCollapse,
+            'content-area-right-open': !canvasCollapse.datasetAreaCollapse
+          }"
+        >
+          <el-icon
+            :title="'数据集'"
+            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">数据集</span>
+          </div>
+          <el-container
+            v-if="!canvasCollapse.datasetAreaCollapse"
+            direction="vertical"
+            class="dataset-area view-panel-row"
+          >
+            <el-header class="editor-title">
+              <span style="font-size: 14px">数据集</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="recordSnapshotInfo('calcData')"
+                />
+                <el-tooltip :effect="toolTip" content="编辑数据集" placement="top">
                   <el-icon
-                    v-if="false"
+                    v-if="curDatasetWeight >= 7 && !isDataEaseBi"
                     class="field-search-icon-btn"
                     :class="{ dark: themes === 'dark' }"
-                    @click="addCalcField('d')"
+                    style="margin-left: 8px"
+                    @click="editDs"
                   >
-                    <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 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>
-                </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
-              >
-                <template #prefix>
-                  <el-icon class="el-input__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"
-              style="height: calc(100% - 137px); min-height: 120px"
-            >
-              <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'
-                      ]"
-                    >
-                      <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>
-                      </el-icon>
-                      <span
-                        class="field-name ellipsis"
+                </el-tooltip>
+              </el-row>
+              <el-row class="dataset-search padding-lr">
+                <div class="dataset-search-label" :class="{ dark: themes === 'dark' }">
+                  <span>{{ t('chart.field') }}</span>
+                  <span>
+                    <el-tooltip :effect="toolTip" content="刷新" placement="top">
+                      <el-icon
+                        class="field-search-icon-btn"
                         :class="{ dark: themes === 'dark' }"
-                        :title="element.name"
-                        >{{ element.name }}</span
+                        @click="getFields(view.tableId, view.id, view.type)"
                       >
-                      <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 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-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"
-                      >
-                        <span class="el-dropdown-link">
-                          <el-icon class="icon-setting"><Setting /></el-icon>
-                        </span>
-                        <template #dropdown>
-                          <el-dropdown-menu :effect="props.themes">
-                            <el-dropdown-item :command="handleChartFieldEdit(element, 'copy')">
-                              {{ t('common.copy') }}
-                            </el-dropdown-item>
-                            <span v-if="element.chartId">
-                              <el-dropdown-item :command="handleChartFieldEdit(element, 'edit')">
-                                {{ t('common.edit') }}
-                              </el-dropdown-item>
-                              <el-dropdown-item :command="handleChartFieldEdit(element, 'delete')">
-                                {{ t('common.delete') }}
-                              </el-dropdown-item>
-                            </span>
-                          </el-dropdown-menu>
-                        </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"
+                    </el-tooltip>
+                    <el-icon
+                      v-if="false"
+                      class="field-search-icon-btn"
+                      :class="{ dark: themes === 'dark' }"
+                      @click="addCalcField('d')"
                     >
-                      <template v-if="isDrag">
-                        <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>
-                          </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="el-dropdown-link">
-                              <el-icon class="icon-setting"><Setting /></el-icon>
-                            </span>
-                            <template #dropdown>
-                              <el-dropdown-menu :effect="props.themes">
-                                <el-dropdown-item :command="handleChartFieldEdit(ele, 'copy')">
-                                  {{ t('common.copy') }}
-                                </el-dropdown-item>
-                                <span v-if="ele.chartId">
-                                  <el-dropdown-item :command="handleChartFieldEdit(ele, 'edit')">
-                                    {{ t('common.edit') }}
-                                  </el-dropdown-item>
-                                  <el-dropdown-item :command="handleChartFieldEdit(ele, 'delete')">
-                                    {{ t('common.delete') }}
-                                  </el-dropdown-item>
-                                </span>
-                              </el-dropdown-menu>
-                            </template>
-                          </el-dropdown>
-                        </div>
-                      </template>
-                    </div>
-                  </div>
-                </el-scrollbar>
+                      <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
+                >
+                  <template #prefix>
+                    <el-icon class="el-input__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"
+                style="height: calc(100% - 137px); min-height: 120px"
+              >
                 <div
-                  ref="el"
+                  class="padding-lr field-height first right-dimension"
+                  :class="{ dark: themes === 'dark', 'user-select': isDragging }"
                   :style="{
-                    top: dragVerticalTop + 'px'
+                    height: fieldDHeight + 'px'
                   }"
-                  :class="['drag-vertical', isDragging && 'is-hovering']"
-                ></div>
-              </div>
-              <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"
-                  >
+                >
+                  <label>{{ t('chart.dimension') }}</label>
+                  <el-scrollbar class="drag-list">
                     <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>
-                      </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>
-                      </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>
-                      <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>
-                        </span>
-                        <template #dropdown>
-                          <el-dropdown-menu :effect="props.themes">
-                            <el-dropdown-item :command="handleChartFieldEdit(element, 'copy')">
-                              {{ t('common.copy') }}
-                            </el-dropdown-item>
-                            <span v-if="element.chartId">
-                              <el-dropdown-item :command="handleChartFieldEdit(element, 'edit')">
-                                {{ t('common.edit') }}
-                              </el-dropdown-item>
-                              <el-dropdown-item :command="handleChartFieldEdit(element, 'delete')">
-                                {{ t('common.delete') }}
-                              </el-dropdown-item>
-                            </span>
-                          </el-dropdown-menu>
-                        </template>
-                      </el-dropdown>
-                    </div>
-                    <div
-                      v-if="activeQuota.map(itx => itx.id).includes(element.id)"
+                      v-for="element in dimensionData"
+                      :key="element.id"
                       :draggable="true"
-                      class="shadow"
-                      :class="isDraggingItem && 'is-dragging'"
-                      @dragstart="dragStart"
-                      @dragend="dragEnd"
+                      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"
                     >
-                      <template v-if="isDrag">
-                        <div
-                          v-for="ele in activeQuota"
-                          :key="ele.id"
-                          class="items flex-align-center"
+                      <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>
+                        </el-icon>
+                        <span
+                          class="field-name ellipsis"
+                          :class="{ dark: themes === 'dark' }"
+                          :title="element.name"
+                          >{{ element.name }}</span
                         >
-                          <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>
-                          </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="el-dropdown-link">
-                              <el-icon class="icon-setting"><Setting /></el-icon>
-                            </span>
-                            <template #dropdown>
-                              <el-dropdown-menu :effect="props.themes">
-                                <el-dropdown-item :command="handleChartFieldEdit(ele, 'copy')">
-                                  {{ t('common.copy') }}
+                        <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>
+                        <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>
+                          </span>
+                          <template #dropdown>
+                            <el-dropdown-menu :effect="props.themes">
+                              <el-dropdown-item :command="handleChartFieldEdit(element, 'copy')">
+                                {{ t('common.copy') }}
+                              </el-dropdown-item>
+                              <span v-if="element.chartId">
+                                <el-dropdown-item :command="handleChartFieldEdit(element, 'edit')">
+                                  {{ t('common.edit') }}
                                 </el-dropdown-item>
-                                <span v-if="ele.chartId">
-                                  <el-dropdown-item :command="handleChartFieldEdit(ele, 'edit')">
-                                    {{ t('common.edit') }}
+                                <el-dropdown-item
+                                  :command="handleChartFieldEdit(element, 'delete')"
+                                >
+                                  {{ t('common.delete') }}
+                                </el-dropdown-item>
+                              </span>
+                            </el-dropdown-menu>
+                          </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"
+                      >
+                        <template v-if="isDrag">
+                          <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>
+                            </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="el-dropdown-link">
+                                <el-icon class="icon-setting"><Setting /></el-icon>
+                              </span>
+                              <template #dropdown>
+                                <el-dropdown-menu :effect="props.themes">
+                                  <el-dropdown-item :command="handleChartFieldEdit(ele, 'copy')">
+                                    {{ t('common.copy') }}
                                   </el-dropdown-item>
-                                  <el-dropdown-item :command="handleChartFieldEdit(ele, 'delete')">
-                                    {{ t('common.delete') }}
-                                  </el-dropdown-item>
-                                </span>
-                              </el-dropdown-menu>
-                            </template>
-                          </el-dropdown>
-                        </div>
-                      </template>
+                                  <span v-if="ele.chartId">
+                                    <el-dropdown-item :command="handleChartFieldEdit(ele, 'edit')">
+                                      {{ t('common.edit') }}
+                                    </el-dropdown-item>
+                                    <el-dropdown-item
+                                      :command="handleChartFieldEdit(ele, 'delete')"
+                                    >
+                                      {{ t('common.delete') }}
+                                    </el-dropdown-item>
+                                  </span>
+                                </el-dropdown-menu>
+                              </template>
+                            </el-dropdown>
+                          </div>
+                        </template>
+                      </div>
                     </div>
-                  </div>
-                </el-scrollbar>
+                  </el-scrollbar>
+                  <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="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'
+                        ]"
+                      >
+                        <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>
+                        </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>
+                        </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>
+                        <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>
+                          </span>
+                          <template #dropdown>
+                            <el-dropdown-menu :effect="props.themes">
+                              <el-dropdown-item :command="handleChartFieldEdit(element, 'copy')">
+                                {{ t('common.copy') }}
+                              </el-dropdown-item>
+                              <span v-if="element.chartId">
+                                <el-dropdown-item :command="handleChartFieldEdit(element, 'edit')">
+                                  {{ t('common.edit') }}
+                                </el-dropdown-item>
+                                <el-dropdown-item
+                                  :command="handleChartFieldEdit(element, 'delete')"
+                                >
+                                  {{ t('common.delete') }}
+                                </el-dropdown-item>
+                              </span>
+                            </el-dropdown-menu>
+                          </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"
+                      >
+                        <template v-if="isDrag">
+                          <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>
+                            </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="el-dropdown-link">
+                                <el-icon class="icon-setting"><Setting /></el-icon>
+                              </span>
+                              <template #dropdown>
+                                <el-dropdown-menu :effect="props.themes">
+                                  <el-dropdown-item :command="handleChartFieldEdit(ele, 'copy')">
+                                    {{ t('common.copy') }}
+                                  </el-dropdown-item>
+                                  <span v-if="ele.chartId">
+                                    <el-dropdown-item :command="handleChartFieldEdit(ele, 'edit')">
+                                      {{ t('common.edit') }}
+                                    </el-dropdown-item>
+                                    <el-dropdown-item
+                                      :command="handleChartFieldEdit(ele, 'delete')"
+                                    >
+                                      {{ t('common.delete') }}
+                                    </el-dropdown-item>
+                                  </span>
+                                </el-dropdown-menu>
+                              </template>
+                            </el-dropdown>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </el-scrollbar>
+                </div>
               </div>
-            </div>
-          </el-main>
-        </el-container>
-      </div>
-    </el-row>
+            </el-main>
+          </el-container>
+        </div>
+      </el-row>
+    </template>
     <chart-template-info v-if="templateStatusShow"></chart-template-info>
     <!--显示名修改-->
     <el-dialog
diff --git a/core/core-frontend/src/views/common/ComponentStyleEditor.vue b/core/core-frontend/src/views/common/ComponentStyleEditor.vue
new file mode 100644
index 0000000000..c2c9d39094
--- /dev/null
+++ b/core/core-frontend/src/views/common/ComponentStyleEditor.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { findComponentAttr } from '@/utils/components'
+import { storeToRefs } from 'pinia'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import ViewEditor from '@/views/chart/components/editor/index.vue'
+import { computed } from 'vue'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent, canvasViewInfo, batchOptStatus } = storeToRefs(dvMainStore)
+
+const otherEditorShow = computed(() => {
+  return Boolean(
+    curComponent.value &&
+      (!['UserView', 'VQuery'].includes(curComponent.value?.component) ||
+        (curComponent.value?.component === 'UserView' &&
+          curComponent.value?.innerType === 'picture-group')) &&
+      !batchOptStatus.value
+  )
+})
+
+const viewEditorShow = computed(() => {
+  return Boolean(
+    curComponent.value &&
+      ['UserView', 'VQuery'].includes(curComponent.value.component) &&
+      curComponent.value.innerType !== 'picture-group' &&
+      !batchOptStatus.value
+  )
+})
+</script>
+
+<template>
+  <div class="mobile_content">
+    <template v-if="otherEditorShow">
+      <component :is="findComponentAttr(curComponent)" :themes="'light'" />
+    </template>
+    <template v-if="viewEditorShow">
+      <view-editor
+        :themes="'light'"
+        :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
+      ></view-editor>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="less">
+.mobile_content {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index 590762320e..7fc793567f 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -14,6 +14,7 @@ import { backCanvasData } from '@/utils/canvasUtils'
 import { storeToRefs } from 'pinia'
 import { debounce } from 'lodash-es'
 import mobileHeader from '@/assets/img/mobile-header.png'
+import ComponentStyleEditor from '@/views/common/ComponentStyleEditor.vue'
 
 const dvMainStore = dvMainStoreWithOut()
 const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
@@ -90,6 +91,11 @@ const hanedleMessage = event => {
     loadCanvasData()
   }
 
+  if (event.data.type === 'curComponentChange') {
+    // 移动端CurComponent引用不在主dvMain中
+    dvMainStore.setCurComponent({ component: event.data.value, index: 0 })
+  }
+
   if (event.data.type === 'delFromMobile') {
     changeTimes.value++
     componentData.value.some(ele => {
@@ -158,6 +164,9 @@ const setMobileStyle = debounce(() => {
     transformOrigin: '0 0'
   }
 }, 100)
+const curComponentChangeHandle = info => {
+  // do change
+}
 onMounted(() => {
   window.addEventListener('message', hanedleMessage)
   window.addEventListener('resize', setMobileStyle)
@@ -168,6 +177,12 @@ onMounted(() => {
       mobileStatusChange(type, value)
     }
   })
+  useEmitt({
+    name: 'curComponentChange',
+    callback: info => {
+      curComponentChangeHandle(info)
+    }
+  })
   setMobileStyle()
 })
 
@@ -252,43 +267,44 @@ const save = () => {
       <div class="config-mobile-sidebar">移动端配置</div>
       <el-tabs size="small" v-model="activeCollapse">
         <el-tab-pane label="可视化组件" name="com"> </el-tab-pane>
-        <el-tab-pane label="样式" name="style"> </el-tab-pane>
+        <el-tab-pane label="组件样式" name="componentStyle"> </el-tab-pane>
+        <el-tab-pane label="整体样式" name="style"> </el-tab-pane>
       </el-tabs>
-      <div class="config-mobile-tab">
-        <MobileBackgroundSelector
-          v-if="activeCollapse === 'style'"
-          @styleChange="changeTimes++"
-        ></MobileBackgroundSelector>
-        <template v-else>
-          <div
-            :style="{ height: '198px', width: '198px' }"
-            class="mobile-wrapper-inner-adaptor"
-            v-for="item in componentDataNotInMobile"
-            :key="item.id"
-          >
-            <div class="component-outer">
-              <ComponentWrapper
-                v-show="item.isShow"
-                canvas-id="canvas-main"
-                :canvas-style-data="canvasStyleData"
-                :dv-info="dvInfo"
-                :canvas-view-info="canvasViewInfo"
-                :view-info="canvasViewInfo[item.id]"
-                :config="item"
-                :style="getComponentStyleDefault()"
-                show-position="preview"
-                :search-count="0"
-                :scale="80"
-              />
-            </div>
-            <div class="mobile-com-mask" @click="addToMobile(item)">
-              <span v-show="item.component === 'DeStreamMedia'" style="color: #909399"
-                >IOS可能无法显示</span
-              >
-            </div>
-            <div class="pc-select-to-mobile" @click="addToMobile(item)" v-if="!mobileLoading"></div>
+      <div class="config-mobile-tab" v-show="activeCollapse === 'style'">
+        <MobileBackgroundSelector @styleChange="changeTimes++"></MobileBackgroundSelector>
+      </div>
+      <div class="config-mobile-tab-style" v-show="activeCollapse === 'componentStyle'">
+        <component-style-editor></component-style-editor>
+      </div>
+      <div class="config-mobile-tab" v-show="activeCollapse === 'com'">
+        <div
+          :style="{ height: '198px', width: '198px' }"
+          class="mobile-wrapper-inner-adaptor"
+          v-for="item in componentDataNotInMobile"
+          :key="item.id"
+        >
+          <div class="component-outer">
+            <ComponentWrapper
+              v-show="item.isShow"
+              canvas-id="canvas-main"
+              :canvas-style-data="canvasStyleData"
+              :dv-info="dvInfo"
+              :canvas-view-info="canvasViewInfo"
+              :view-info="canvasViewInfo[item.id]"
+              :config="item"
+              :style="getComponentStyleDefault()"
+              show-position="preview"
+              :search-count="0"
+              :scale="80"
+            />
           </div>
-        </template>
+          <div class="mobile-com-mask" @click="addToMobile(item)">
+            <span v-show="item.component === 'DeStreamMedia'" style="color: #909399"
+              >IOS可能无法显示</span
+            >
+          </div>
+          <div class="pc-select-to-mobile" @click="addToMobile(item)" v-if="!mobileLoading"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -485,6 +501,14 @@ const save = () => {
     .config-mobile-tab {
       padding: 16px 8px;
     }
+    .config-mobile-tab-style {
+      padding: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      ::v-deep(.editor-light) {
+        border-left: none !important;
+      }
+    }
     .mobile-wrapper-inner-adaptor {
       position: relative;
       margin-right: 8px;
diff --git a/core/core-frontend/src/views/mobile/panel/index.vue b/core/core-frontend/src/views/mobile/panel/index.vue
index 86d00fbbe7..a3ad7c9f46 100644
--- a/core/core-frontend/src/views/mobile/panel/index.vue
+++ b/core/core-frontend/src/views/mobile/panel/index.vue
@@ -5,6 +5,7 @@ import eventBus from '@/utils/eventBus'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { XpackComponent } from '@/components/plugin'
 import DePreviewMobile from './MobileInPc.vue'
+import { mobileViewStyleSwitch } from '@/utils/canvasUtils'
 const panelInit = ref(false)
 const dvMainStore = dvMainStoreWithOut()
 
@@ -50,6 +51,18 @@ const hanedleMessage = event => {
     if (isEmbedded) return
     panelInit.value = true
   }
+  // 进行内部组件渲染 type render 渲染 calcData 计算  主组件渲染
+  if (event.data.type === 'componentStyleChange') {
+    const { type, innerOptType, component } = event.data.value
+    if (type === 'renderChart') {
+      mobileViewStyleSwitch(component)
+      useEmitt().emitter.emit('renderChart-' + component.id, component)
+    } else if (type === 'calcData') {
+      mobileViewStyleSwitch(component)
+      useEmitt().emitter.emit('calcData-' + component.id, component)
+    } else if (type === 'component') {
+    }
+  }
 
   if (event.data.type === 'addToMobile') {
     const component = event.data.value
@@ -97,7 +110,9 @@ const initIframe = () => {
     panelInit.value = true
   })
 }
-
+const curComponentChangeHandle = (type, value) => {
+  window.parent.postMessage({ type: type, value: value }, '*')
+}
 onBeforeMount(() => {
   window.parent.postMessage({ type: 'panelInit', value: true }, '*')
   window.addEventListener('message', hanedleMessage)
@@ -107,6 +122,12 @@ onBeforeMount(() => {
       mobileStatusChange(type, value)
     }
   })
+  useEmitt({
+    name: 'curComponentChange',
+    callback: ({ type, value }) => {
+      curComponentChangeHandle(type, value)
+    }
+  })
 })
 
 const mobileStatusChange = (type, value) => {