diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 44fcc7b2de..4848e80932 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -891,3 +891,7 @@ strong {
 .ed-popper.is-light .ed-popper__arrow {
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 }
+
+.ed-collapse-item:last-child {
+  margin-bottom: 0 !important;
+}
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index b802d63c2f..83d7aa9ec7 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -258,421 +258,427 @@ watch(
 <template>
   <el-row class="view-panel" :class="'style-' + themes">
     <div class="attr-style">
-      <el-row class="de-collapse-style">
-        <el-collapse v-model="state.attrActiveNames" class="style-collapse">
-          <el-collapse-item
-            :effect="themes"
-            name="position"
-            :title="t('visualization.position')"
-            v-if="positionComponentShow"
-          >
-            <component-position :themes="themes" />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            name="basicStyle"
-            :title="t('chart.basic_style')"
-            v-if="showProperties('basic-style-selector')"
-          >
-            <basic-style-selector
-              :property-inner="propertyInnerAll['basic-style-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onBasicStyleChange="onBasicStyleChange"
-              @onMiscChange="onMiscChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            name="basicStyle"
-            :title="t('chart.basic_style')"
-            v-if="showProperties('dual-basic-style-selector')"
-          >
-            <DualBasicStyleSelector
-              :property-inner="propertyInnerAll['dual-basic-style-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onBasicStyleChange="onBasicStyleChange"
-              @onMiscChange="onMiscChange"
-            />
-          </el-collapse-item>
-          <div v-if="showProperties('bullet-graph-selector')">
-            <el-collapse-item :effect="themes" name="bullet" :title="t('chart.progress_target')">
-              <bullet-target-selector
-                :themes="themes"
-                :chart="chart"
-                :selector-type="'target'"
-                @onBasicStyleChange="onBasicStyleChange"
-                @onMiscChange="onMiscChange"
-              />
+      <el-scrollbar>
+        <el-row class="de-collapse-style">
+          <el-collapse v-model="state.attrActiveNames" class="style-collapse">
+            <el-collapse-item
+              :effect="themes"
+              name="position"
+              :title="t('visualization.position')"
+              v-if="positionComponentShow"
+            >
+              <component-position :themes="themes" />
             </el-collapse-item>
-            <el-collapse-item :effect="themes" name="measure" :title="t('chart.progress_current')">
-              <bullet-measure-selector
+            <el-collapse-item
+              :effect="themes"
+              name="basicStyle"
+              :title="t('chart.basic_style')"
+              v-if="showProperties('basic-style-selector')"
+            >
+              <basic-style-selector
+                :property-inner="propertyInnerAll['basic-style-selector']"
                 :themes="themes"
                 :chart="chart"
-                :selector-type="'measure'"
                 @onBasicStyleChange="onBasicStyleChange"
                 @onMiscChange="onMiscChange"
               />
             </el-collapse-item>
             <el-collapse-item
-              style="margin-bottom: 0 !important"
               :effect="themes"
-              name="range"
-              :title="t('chart.range_bg')"
+              name="basicStyle"
+              :title="t('chart.basic_style')"
+              v-if="showProperties('dual-basic-style-selector')"
             >
-              <bullet-range-selector
+              <DualBasicStyleSelector
+                :property-inner="propertyInnerAll['dual-basic-style-selector']"
                 :themes="themes"
                 :chart="chart"
-                :selector-type="'range'"
                 @onBasicStyleChange="onBasicStyleChange"
                 @onMiscChange="onMiscChange"
               />
             </el-collapse-item>
-          </div>
-          <collapse-switch-item
-            :themes="themes"
-            v-model="chart.customStyle.text.show"
-            v-if="showProperties('title-selector')"
-            :change-model="chart.customStyle.text"
-            @modelChange="val => onTextChange(val, 'show')"
-            name="title"
-            :title="$t('chart.title')"
-          >
-            <title-selector
-              :property-inner="propertyInnerAll['title-selector']"
+            <div v-if="showProperties('bullet-graph-selector')">
+              <el-collapse-item :effect="themes" name="bullet" :title="t('chart.progress_target')">
+                <bullet-target-selector
+                  :themes="themes"
+                  :chart="chart"
+                  :selector-type="'target'"
+                  @onBasicStyleChange="onBasicStyleChange"
+                  @onMiscChange="onMiscChange"
+                />
+              </el-collapse-item>
+              <el-collapse-item
+                :effect="themes"
+                name="measure"
+                :title="t('chart.progress_current')"
+              >
+                <bullet-measure-selector
+                  :themes="themes"
+                  :chart="chart"
+                  :selector-type="'measure'"
+                  @onBasicStyleChange="onBasicStyleChange"
+                  @onMiscChange="onMiscChange"
+                />
+              </el-collapse-item>
+              <el-collapse-item
+                style="margin-bottom: 0 !important"
+                :effect="themes"
+                name="range"
+                :title="t('chart.range_bg')"
+              >
+                <bullet-range-selector
+                  :themes="themes"
+                  :chart="chart"
+                  :selector-type="'range'"
+                  @onBasicStyleChange="onBasicStyleChange"
+                  @onMiscChange="onMiscChange"
+                />
+              </el-collapse-item>
+            </div>
+            <collapse-switch-item
               :themes="themes"
-              class="attr-selector"
-              :chart="chart"
-              @onTextChange="onTextChange"
-            />
-          </collapse-switch-item>
-          <collapse-switch-item
-            :themes="themes"
-            v-if="showProperties('legend-selector')"
-            v-model="chart.customStyle.legend.show"
-            :change-model="chart.customStyle.legend"
-            @modelChange="val => onLegendChange(val, 'show')"
-            name="legend"
-            :title="$t('chart.legend')"
-          >
-            <legend-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['legend-selector']"
+              v-model="chart.customStyle.text.show"
+              v-if="showProperties('title-selector')"
+              :change-model="chart.customStyle.text"
+              @modelChange="val => onTextChange(val, 'show')"
+              name="title"
+              :title="$t('chart.title')"
+            >
+              <title-selector
+                :property-inner="propertyInnerAll['title-selector']"
+                :themes="themes"
+                class="attr-selector"
+                :chart="chart"
+                @onTextChange="onTextChange"
+              />
+            </collapse-switch-item>
+            <collapse-switch-item
               :themes="themes"
-              :chart="chart"
-              @onLegendChange="onLegendChange"
-              @onMiscChange="onMiscChange"
-            />
-          </collapse-switch-item>
-          <el-collapse-item
-            :effect="themes"
-            name="background"
-            :title="t('visualization.background')"
-            v-if="showProperties('background-overall-component') && commonBackgroundPop"
-          >
-            <background-overall-common
-              :common-background-pop="commonBackgroundPop"
+              v-if="showProperties('legend-selector')"
+              v-model="chart.customStyle.legend.show"
+              :change-model="chart.customStyle.legend"
+              @modelChange="val => onLegendChange(val, 'show')"
+              name="legend"
+              :title="$t('chart.legend')"
+            >
+              <legend-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['legend-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onLegendChange="onLegendChange"
+                @onMiscChange="onMiscChange"
+              />
+            </collapse-switch-item>
+            <el-collapse-item
+              :effect="themes"
+              name="background"
+              :title="t('visualization.background')"
+              v-if="showProperties('background-overall-component') && commonBackgroundPop"
+            >
+              <background-overall-common
+                :common-background-pop="commonBackgroundPop"
+                :themes="themes"
+                @onBackgroundChange="onBackgroundChange"
+                component-position="component"
+              />
+            </el-collapse-item>
+            <collapse-switch-item
+              v-if="showProperties('border-style') && commonBorderPop && !batchOptStatus"
+              v-model="commonBorderPop.borderActive"
+              @modelChange="val => onActiveChange(val)"
               :themes="themes"
-              @onBackgroundChange="onBackgroundChange"
-              component-position="component"
-            />
-          </el-collapse-item>
-          <collapse-switch-item
-            v-if="showProperties('border-style') && commonBorderPop && !batchOptStatus"
-            v-model="commonBorderPop.borderActive"
-            @modelChange="val => onActiveChange(val)"
-            :themes="themes"
-            :title="t('visualization.board')"
-            name="borderSetting"
-            class="common-style-area"
-          >
-            <common-border-setting
-              :style-info="commonBorderPop"
-              :themes="themes"
-              @onStyleAttrChange="onStyleAttrChange"
-            ></common-border-setting>
-          </collapse-switch-item>
+              :title="t('visualization.board')"
+              name="borderSetting"
+              class="common-style-area"
+            >
+              <common-border-setting
+                :style-info="commonBorderPop"
+                :themes="themes"
+                @onStyleAttrChange="onStyleAttrChange"
+              ></common-border-setting>
+            </collapse-switch-item>
 
-          <el-collapse-item
-            :effect="themes"
-            name="symbolicStyle"
-            :title="t('chart.symbolic')"
-            v-if="showProperties('symbolic-style-selector')"
-          >
-            <SymbolicStyleSelector
-              :property-inner="propertyInnerAll['symbolic-style-selector']"
+            <el-collapse-item
+              :effect="themes"
+              name="symbolicStyle"
+              :title="t('chart.symbolic')"
+              v-if="showProperties('symbolic-style-selector')"
+            >
+              <SymbolicStyleSelector
+                :property-inner="propertyInnerAll['symbolic-style-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onBasicStyleChange="onBasicStyleChange"
+                @onMiscChange="onMiscChange"
+              />
+            </el-collapse-item>
+            <el-collapse-item
+              :effect="themes"
+              v-if="showProperties('indicator-value-selector')"
+              name="indicator-value"
+              :title="t('chart.indicator_value')"
+            >
+              <indicator-value-selector
+                ref="indicatorValueRef"
+                :property-inner="propertyInnerAll['indicator-value-selector']"
+                :themes="themes"
+                class="attr-selector"
+                :chart="chart"
+                :quota-fields="props.quotaData"
+                @onIndicatorChange="onIndicatorChange"
+              />
+            </el-collapse-item>
+            <collapse-switch-item
               :themes="themes"
-              :chart="chart"
-              @onBasicStyleChange="onBasicStyleChange"
-              @onMiscChange="onMiscChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            v-if="showProperties('indicator-value-selector')"
-            name="indicator-value"
-            :title="t('chart.indicator_value')"
-          >
-            <indicator-value-selector
-              ref="indicatorValueRef"
-              :property-inner="propertyInnerAll['indicator-value-selector']"
+              v-model="chart.customAttr.indicatorName.show"
+              v-if="showProperties('indicator-name-selector')"
+              :change-model="chart.customAttr.indicatorName"
+              @modelChange="val => onIndicatorNameChange(val, 'show')"
+              :title="t('visualization.indicator_name')"
+              name="indicator-name"
+            >
+              <indicator-name-selector
+                ref="indicatorNameRef"
+                :property-inner="propertyInnerAll['indicator-name-selector']"
+                :themes="themes"
+                class="attr-selector"
+                :chart="chart"
+                :quota-fields="props.quotaData"
+                @onIndicatorNameChange="onIndicatorNameChange"
+              />
+            </collapse-switch-item>
+            <el-collapse-item
+              :effect="themes"
+              v-if="showProperties('misc-selector') && !chart.type.includes('mix')"
+              name="size"
+              :title="t('visualization.component_size')"
+            >
+              <misc-selector
+                :property-inner="propertyInnerAll['misc-selector']"
+                :themes="themes"
+                class="attr-selector"
+                :chart="chart"
+                :quota-fields="props.quotaData"
+                :mobile-in-pc="mobileInPc"
+                @onMiscChange="onMiscChange"
+              />
+            </el-collapse-item>
+            <el-collapse-item
+              :effect="themes"
+              v-if="showProperties('misc-style-selector')"
+              name="size"
+              :title="selectorSpec['misc-style-selector']?.title || t('chart.tooltip_axis')"
+            >
+              <misc-style-selector
+                :property-inner="propertyInnerAll['misc-style-selector']"
+                :themes="themes"
+                class="attr-selector"
+                :chart="chart"
+                :quota-fields="props.quotaData"
+                @onChangeMiscStyleForm="onChangeMiscStyleForm"
+              />
+            </el-collapse-item>
+            <collapse-switch-item
               :themes="themes"
-              class="attr-selector"
-              :chart="chart"
-              :quota-fields="props.quotaData"
-              @onIndicatorChange="onIndicatorChange"
-            />
-          </el-collapse-item>
-          <collapse-switch-item
-            :themes="themes"
-            v-model="chart.customAttr.indicatorName.show"
-            v-if="showProperties('indicator-name-selector')"
-            :change-model="chart.customAttr.indicatorName"
-            @modelChange="val => onIndicatorNameChange(val, 'show')"
-            :title="t('visualization.indicator_name')"
-            name="indicator-name"
-          >
-            <indicator-name-selector
-              ref="indicatorNameRef"
-              :property-inner="propertyInnerAll['indicator-name-selector']"
+              v-if="showProperties('label-selector')"
+              v-model="chart.customAttr.label.show"
+              :change-model="chart.customAttr.label"
+              @modelChange="val => onLabelChange({ data: val }, 'show')"
+              :title="t('chart.label')"
+              name="label"
+            >
+              <label-selector
+                :property-inner="propertyInnerAll['label-selector']"
+                :themes="themes"
+                class="attr-selector"
+                :chart="chart"
+                :all-fields="props.allFields"
+                @onLabelChange="onLabelChange"
+              />
+            </collapse-switch-item>
+            <collapse-switch-item
+              v-if="showProperties('tooltip-selector')"
+              v-model="chart.customAttr.tooltip.show"
               :themes="themes"
-              class="attr-selector"
-              :chart="chart"
-              :quota-fields="props.quotaData"
-              @onIndicatorNameChange="onIndicatorNameChange"
-            />
-          </collapse-switch-item>
-          <el-collapse-item
-            :effect="themes"
-            v-if="showProperties('misc-selector') && !chart.type.includes('mix')"
-            name="size"
-            :title="t('visualization.component_size')"
-          >
-            <misc-selector
-              :property-inner="propertyInnerAll['misc-selector']"
-              :themes="themes"
-              class="attr-selector"
-              :chart="chart"
-              :quota-fields="props.quotaData"
-              :mobile-in-pc="mobileInPc"
-              @onMiscChange="onMiscChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            v-if="showProperties('misc-style-selector')"
-            name="size"
-            :title="selectorSpec['misc-style-selector']?.title || t('chart.tooltip_axis')"
-          >
-            <misc-style-selector
-              :property-inner="propertyInnerAll['misc-style-selector']"
-              :themes="themes"
-              class="attr-selector"
-              :chart="chart"
-              :quota-fields="props.quotaData"
-              @onChangeMiscStyleForm="onChangeMiscStyleForm"
-            />
-          </el-collapse-item>
-          <collapse-switch-item
-            :themes="themes"
-            v-if="showProperties('label-selector')"
-            v-model="chart.customAttr.label.show"
-            :change-model="chart.customAttr.label"
-            @modelChange="val => onLabelChange({ data: val }, 'show')"
-            :title="t('chart.label')"
-            name="label"
-          >
-            <label-selector
-              :property-inner="propertyInnerAll['label-selector']"
-              :themes="themes"
-              class="attr-selector"
-              :chart="chart"
-              :all-fields="props.allFields"
-              @onLabelChange="onLabelChange"
-            />
-          </collapse-switch-item>
-          <collapse-switch-item
-            v-if="showProperties('tooltip-selector')"
-            v-model="chart.customAttr.tooltip.show"
-            :themes="themes"
-            :change-model="chart.customAttr.tooltip"
-            :title="t('chart.tooltip')"
-            :show-switch="showPropertySwitch('tooltip-selector', 'show')"
-            name="tooltip"
-            @modelChange="val => onTooltipChange({ data: val }, 'show')"
-          >
-            <tooltip-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['tooltip-selector']"
-              :themes="themes"
-              :chart="chart"
-              :all-fields="props.allFields"
-              @onTooltipChange="onTooltipChange"
-              @onExtTooltipChange="onExtTooltipChange"
-            />
-          </collapse-switch-item>
-          <collapse-switch-item
-            v-if="showProperties('table-header-selector')"
-            v-model="chart.customAttr.tableHeader.showTableHeader"
-            :change-model="chart.customAttr.tableHeader"
-            :effect="themes"
-            :title="t('chart.table_header')"
-            :show-switch="showPropertySwitch('table-header-selector', 'showTableHeader')"
-            name="tableHeader"
-            @modelChange="val => onTableHeaderChange(val, 'showTableHeader')"
-          >
-            <table-header-selector
-              :property-inner="propertyInnerAll['table-header-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onTableHeaderChange="onTableHeaderChange"
-            />
-          </collapse-switch-item>
-          <el-collapse-item
-            :effect="themes"
-            name="tableCell"
-            :title="t('chart.table_cell')"
-            v-if="showProperties('table-cell-selector')"
-          >
-            <table-cell-selector
-              :property-inner="propertyInnerAll['table-cell-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onTableCellChange="onTableCellChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            name="tableTotal"
-            :title="t('chart.table_total')"
-            v-if="showProperties('table-total-selector')"
-          >
-            <table-total-selector
-              :property-inner="propertyInnerAll['table-total-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onTableTotalChange="onTableTotalChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            name="quadrant"
-            :title="t('chart.quadrant')"
-            v-if="showProperties('quadrant-selector')"
-          >
-            <quadrant-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['quadrant-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onChangeQuadrantForm="onChangeQuadrantForm"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            name="flowMapLineSelector"
-            :title="t('chart.line')"
-            v-if="showProperties('flow-map-line-selector')"
-          >
-            <flow-map-line-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['flow-map-line-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onChangeFlowMapLineForm="onChangeFlowMapLineForm"
-              @onBasicStyleChange="onBasicStyleChange"
-            />
-          </el-collapse-item>
-          <el-collapse-item
-            :effect="themes"
-            name="flowMapPointSelector"
-            :title="t('visualization.component_annotation')"
-            v-if="showProperties('flow-map-point-selector')"
-          >
-            <flow-map-point-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['flow-map-point-selector']"
-              :themes="themes"
-              :chart="chart"
-              @onChangeFlowMapPointForm="onChangeFlowMapPointForm"
-            />
-          </el-collapse-item>
-        </el-collapse>
+              :change-model="chart.customAttr.tooltip"
+              :title="t('chart.tooltip')"
+              :show-switch="showPropertySwitch('tooltip-selector', 'show')"
+              name="tooltip"
+              @modelChange="val => onTooltipChange({ data: val }, 'show')"
+            >
+              <tooltip-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['tooltip-selector']"
+                :themes="themes"
+                :chart="chart"
+                :all-fields="props.allFields"
+                @onTooltipChange="onTooltipChange"
+                @onExtTooltipChange="onExtTooltipChange"
+              />
+            </collapse-switch-item>
+            <collapse-switch-item
+              v-if="showProperties('table-header-selector')"
+              v-model="chart.customAttr.tableHeader.showTableHeader"
+              :change-model="chart.customAttr.tableHeader"
+              :effect="themes"
+              :title="t('chart.table_header')"
+              :show-switch="showPropertySwitch('table-header-selector', 'showTableHeader')"
+              name="tableHeader"
+              @modelChange="val => onTableHeaderChange(val, 'showTableHeader')"
+            >
+              <table-header-selector
+                :property-inner="propertyInnerAll['table-header-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onTableHeaderChange="onTableHeaderChange"
+              />
+            </collapse-switch-item>
+            <el-collapse-item
+              :effect="themes"
+              name="tableCell"
+              :title="t('chart.table_cell')"
+              v-if="showProperties('table-cell-selector')"
+            >
+              <table-cell-selector
+                :property-inner="propertyInnerAll['table-cell-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onTableCellChange="onTableCellChange"
+              />
+            </el-collapse-item>
+            <el-collapse-item
+              :effect="themes"
+              name="tableTotal"
+              :title="t('chart.table_total')"
+              v-if="showProperties('table-total-selector')"
+            >
+              <table-total-selector
+                :property-inner="propertyInnerAll['table-total-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onTableTotalChange="onTableTotalChange"
+              />
+            </el-collapse-item>
+            <el-collapse-item
+              :effect="themes"
+              name="quadrant"
+              :title="t('chart.quadrant')"
+              v-if="showProperties('quadrant-selector')"
+            >
+              <quadrant-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['quadrant-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onChangeQuadrantForm="onChangeQuadrantForm"
+              />
+            </el-collapse-item>
+            <el-collapse-item
+              :effect="themes"
+              name="flowMapLineSelector"
+              :title="t('chart.line')"
+              v-if="showProperties('flow-map-line-selector')"
+            >
+              <flow-map-line-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['flow-map-line-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onChangeFlowMapLineForm="onChangeFlowMapLineForm"
+                @onBasicStyleChange="onBasicStyleChange"
+              />
+            </el-collapse-item>
+            <el-collapse-item
+              :effect="themes"
+              name="flowMapPointSelector"
+              :title="t('visualization.component_annotation')"
+              v-if="showProperties('flow-map-point-selector')"
+            >
+              <flow-map-point-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['flow-map-point-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onChangeFlowMapPointForm="onChangeFlowMapPointForm"
+              />
+            </el-collapse-item>
+          </el-collapse>
 
-        <el-collapse v-model="state.styleActiveNames" class="style-collapse">
-          <collapse-switch-item
-            :themes="themes"
-            v-if="showProperties('x-axis-selector')"
-            v-model="chart.customStyle.xAxis.show"
-            :change-model="chart.customStyle.xAxis"
-            @modelChange="val => onChangeXAxisForm(val, 'show')"
-            name="xAxis"
-            :title="selectorSpec['x-axis-selector']?.title || t('chart.xAxis')"
-          >
-            <x-axis-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['x-axis-selector']"
+          <el-collapse v-model="state.styleActiveNames" class="style-collapse">
+            <collapse-switch-item
               :themes="themes"
-              :chart="chart"
-              @onChangeXAxisForm="onChangeXAxisForm"
-            />
-          </collapse-switch-item>
-          <collapse-switch-item
-            :themes="themes"
-            v-if="showProperties('y-axis-selector')"
-            v-model="chart.customStyle.yAxis.show"
-            :change-model="chart.customStyle.yAxis"
-            @modelChange="val => onChangeYAxisForm(val, 'show')"
-            name="yAxis"
-            :title="t('chart.yAxis')"
-          >
-            <y-axis-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['y-axis-selector']"
+              v-if="showProperties('x-axis-selector')"
+              v-model="chart.customStyle.xAxis.show"
+              :change-model="chart.customStyle.xAxis"
+              @modelChange="val => onChangeXAxisForm(val, 'show')"
+              name="xAxis"
+              :title="selectorSpec['x-axis-selector']?.title || t('chart.xAxis')"
+            >
+              <x-axis-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['x-axis-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onChangeXAxisForm="onChangeXAxisForm"
+              />
+            </collapse-switch-item>
+            <collapse-switch-item
               :themes="themes"
-              :chart="chart"
-              @onChangeYAxisForm="onChangeYAxisForm"
-            />
-          </collapse-switch-item>
+              v-if="showProperties('y-axis-selector')"
+              v-model="chart.customStyle.yAxis.show"
+              :change-model="chart.customStyle.yAxis"
+              @modelChange="val => onChangeYAxisForm(val, 'show')"
+              name="yAxis"
+              :title="t('chart.yAxis')"
+            >
+              <y-axis-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['y-axis-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onChangeYAxisForm="onChangeYAxisForm"
+              />
+            </collapse-switch-item>
 
-          <collapse-switch-item
-            :themes="themes"
-            v-if="showProperties('dual-y-axis-selector')"
-            v-model="chart.customStyle.yAxis.show"
-            :change-model="chart.customStyle.yAxis"
-            @modelChange="val => onChangeYAxisForm(val, 'show')"
-            name="yAxis"
-            :title="selectorSpec['dual-y-axis-selector']?.title ?? t('chart.yAxis')"
-          >
-            <dual-y-axis-selector
-              class="attr-selector"
-              :property-inner="propertyInnerAll['dual-y-axis-selector']"
+            <collapse-switch-item
               :themes="themes"
-              :chart="chart"
-              @onChangeYAxisForm="onChangeYAxisForm"
-              @onChangeYAxisExtForm="onChangeYAxisExtForm"
-            />
-          </collapse-switch-item>
+              v-if="showProperties('dual-y-axis-selector')"
+              v-model="chart.customStyle.yAxis.show"
+              :change-model="chart.customStyle.yAxis"
+              @modelChange="val => onChangeYAxisForm(val, 'show')"
+              name="yAxis"
+              :title="selectorSpec['dual-y-axis-selector']?.title ?? t('chart.yAxis')"
+            >
+              <dual-y-axis-selector
+                class="attr-selector"
+                :property-inner="propertyInnerAll['dual-y-axis-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onChangeYAxisForm="onChangeYAxisForm"
+                @onChangeYAxisExtForm="onChangeYAxisExtForm"
+              />
+            </collapse-switch-item>
 
-          <collapse-switch-item
-            :themes="themes"
-            v-if="showProperties('summary-selector')"
-            v-model="chart.customAttr.basicStyle.showSummary"
-            :change-model="chart.customAttr.basicStyle"
-            @modelChange="val => onBasicStyleChange({ data: val }, 'showSummary')"
-            :title="t('chart.table_summary')"
-            name="summary"
-          >
-            <summary-selector
-              :property-inner="propertyInnerAll['summary-selector']"
+            <collapse-switch-item
               :themes="themes"
-              :chart="chart"
-              @onBasicStyleChange="onBasicStyleChange"
-            />
-          </collapse-switch-item>
-        </el-collapse>
-      </el-row>
+              v-if="showProperties('summary-selector')"
+              v-model="chart.customAttr.basicStyle.showSummary"
+              :change-model="chart.customAttr.basicStyle"
+              @modelChange="val => onBasicStyleChange({ data: val }, 'showSummary')"
+              :title="t('chart.table_summary')"
+              name="summary"
+            >
+              <summary-selector
+                :property-inner="propertyInnerAll['summary-selector']"
+                :themes="themes"
+                :chart="chart"
+                @onBasicStyleChange="onBasicStyleChange"
+              />
+            </collapse-switch-item>
+          </el-collapse>
+        </el-row>
+      </el-scrollbar>
     </div>
   </el-row>
 </template>
@@ -700,7 +706,6 @@ span {
 }
 
 .attr-style {
-  overflow-y: auto;
   height: 100%;
   width: 100%;
 }
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index e60d27af4c..390283c469 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -293,481 +293,490 @@ const onPlaceholderChange = () => {
 
 <template>
   <div class="attr-style">
-    <input
-      id="input"
-      ref="files"
-      type="file"
-      accept=".jpeg,.jpg,.png,.gif,.svg"
-      hidden
-      @click="
-        e => {
-          e.target.value = ''
-        }
-      "
-      @change="reUpload"
-    />
-    <el-row class="de-collapse-style">
-      <el-collapse v-model="styleActiveNames" class="style-collapse">
-        <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
-          <el-form size="small" @keydown.stop.prevent.enter label-position="top">
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                v-model="chart.customStyle.component.titleShow"
-              >
-                {{ t('chart.show') + t('chart.title') }}
-              </el-checkbox>
-            </el-form-item>
-            <el-form-item
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-input
-                :effect="themes"
-                :disabled="!chart.customStyle.component.titleShow"
-                v-model.lazy="chart.customStyle.component.title"
-                @change="onTitleChange"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="t('components.title_color')"
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                v-model="chart.customStyle.component.titleColor"
-                :trigger-width="204"
-                show-alpha
-                :disabled="!chart.customStyle.component.titleShow"
-                is-custom
-                :predefine="COLOR_PANEL"
-              />
-            </el-form-item>
-            <el-form-item
-              v-if="!mobileInPc && isDashboard() && isMainCanvas(element.canvasId)"
-              class="form-item margin-bottom-8"
-              :class="'form-item-' + themes"
-              :label="t('visualization.query_position')"
-            >
-              <el-radio-group
-                v-model="element.freeze"
-                :effect="themes"
-                size="small"
-                @change="onFreezeChange"
-              >
-                <el-radio :effect="themes" style="min-width: 80px" :value="true">{{
-                  t('visualization.to_top')
-                }}</el-radio>
-                <el-radio :effect="themes" style="min-width: 80px" :value="false">{{
-                  t('visualization.default')
-                }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <background-overall-common
-              :common-background-pop="commonBackgroundPop"
-              :themes="themes"
-              @onBackgroundChange="onBackgroundChangeV2"
-              component-position="component"
-            />
-          </el-form>
-        </el-collapse-item>
-        <el-collapse-item :effect="themes" name="addition" :title="t('v_query.query_condition')">
-          <el-form
-            size="small"
-            @keydown.stop.prevent.enter
-            label-position="top"
-            style="padding-bottom: 8px"
-          >
-            <el-row :gutter="8">
-              <el-col :span="12">
-                <el-form-item
-                  :label="t('visualization.board')"
-                  class="form-item w100"
-                  :class="'form-item-' + themes"
+    <el-scrollbar>
+      <input
+        id="input"
+        ref="files"
+        type="file"
+        accept=".jpeg,.jpg,.png,.gif,.svg"
+        hidden
+        @click="
+          e => {
+            e.target.value = ''
+          }
+        "
+        @change="reUpload"
+      />
+      <el-row class="de-collapse-style">
+        <el-collapse v-model="styleActiveNames" class="style-collapse">
+          <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
+            <el-form size="small" @keydown.stop.prevent.enter label-position="top">
+              <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+                <el-checkbox
+                  :effect="themes"
+                  size="small"
+                  v-model="chart.customStyle.component.titleShow"
                 >
-                  <el-color-picker
-                    :effect="themes"
-                    :trigger-width="106"
-                    is-custom
-                    show-alpha
-                    v-model="chart.customStyle.component.borderColor"
-                    :predefine="predefineColors"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item
-                  :label="t('chart.background')"
-                  class="form-item w100"
-                  :class="'form-item-' + themes"
-                >
-                  <el-color-picker
-                    :effect="themes"
-                    :trigger-width="106"
-                    is-custom
-                    show-alpha
-                    v-model="chart.customStyle.component.bgColor"
-                    :predefine="predefineColors"
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('visualization.query_condition_space')"
-              :class="'form-item-' + themes"
-            >
-              <el-input-number
-                v-model="chart.customStyle.component.queryConditionSpacing"
-                :min="0"
-                :effect="themes"
-                controls-position="right"
-              />
-            </el-form-item>
-            <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('visualization.query_condition_height')"
-              :class="'form-item-' + themes"
-            >
-              <el-input-number
-                v-model="chart.customStyle.component.queryConditionHeight"
-                :min="32"
-                :effect="themes"
-                controls-position="right"
-              />
-            </el-form-item>
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                @change="handleCurrentPlaceholderCustomChange"
-                v-model="chart.customStyle.component.placeholderShow"
+                  {{ t('chart.show') + t('chart.title') }}
+                </el-checkbox>
+              </el-form-item>
+              <el-form-item
+                class="form-item"
+                style="padding-left: 20px"
+                :class="'form-item-' + themes"
+              >
+                <el-input
+                  :effect="themes"
+                  :disabled="!chart.customStyle.component.titleShow"
+                  v-model.lazy="chart.customStyle.component.title"
+                  @change="onTitleChange"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="t('components.title_color')"
+                class="form-item"
+                style="padding-left: 20px"
+                :class="'form-item-' + themes"
               >
-                {{ t('v_query.custom_condition_style') }}
-              </el-checkbox>
-            </el-form-item>
-            <el-form-item
-              :label="t('visualization.text_html')"
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <div style="display: flex; align-items: center; width: 100%">
                 <el-color-picker
                   :effect="themes"
-                  :trigger-width="56"
-                  style="max-width: 56px; min-width: 56px"
-                  is-custom
+                  v-model="chart.customStyle.component.titleColor"
+                  :trigger-width="204"
                   show-alpha
-                  v-model="chart.customStyle.component.text"
-                  :disabled="!chart.customStyle.component.placeholderShow"
-                  @change="handleCurrentPlaceholderCustomChange"
-                  :predefine="predefineColors"
+                  :disabled="!chart.customStyle.component.titleShow"
+                  is-custom
+                  :predefine="COLOR_PANEL"
                 />
+              </el-form-item>
+              <el-form-item
+                v-if="!mobileInPc && isDashboard() && isMainCanvas(element.canvasId)"
+                class="form-item margin-bottom-8"
+                :class="'form-item-' + themes"
+                :label="t('visualization.query_position')"
+              >
+                <el-radio-group
+                  v-model="element.freeze"
+                  :effect="themes"
+                  size="small"
+                  @change="onFreezeChange"
+                >
+                  <el-radio :effect="themes" style="min-width: 80px" :value="true">{{
+                    t('visualization.to_top')
+                  }}</el-radio>
+                  <el-radio :effect="themes" style="min-width: 80px" :value="false">{{
+                    t('visualization.default')
+                  }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <background-overall-common
+                :common-background-pop="commonBackgroundPop"
+                :themes="themes"
+                @onBackgroundChange="onBackgroundChangeV2"
+                component-position="component"
+              />
+            </el-form>
+          </el-collapse-item>
+          <el-collapse-item :effect="themes" name="addition" :title="t('v_query.query_condition')">
+            <el-form
+              size="small"
+              @keydown.stop.prevent.enter
+              label-position="top"
+              style="padding-bottom: 8px"
+            >
+              <el-row :gutter="8">
+                <el-col :span="12">
+                  <el-form-item
+                    :label="t('visualization.board')"
+                    class="form-item w100"
+                    :class="'form-item-' + themes"
+                  >
+                    <el-color-picker
+                      :effect="themes"
+                      :trigger-width="106"
+                      is-custom
+                      show-alpha
+                      v-model="chart.customStyle.component.borderColor"
+                      :predefine="predefineColors"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    :label="t('chart.background')"
+                    class="form-item w100"
+                    :class="'form-item-' + themes"
+                  >
+                    <el-color-picker
+                      :effect="themes"
+                      :trigger-width="106"
+                      is-custom
+                      show-alpha
+                      v-model="chart.customStyle.component.bgColor"
+                      :predefine="predefineColors"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-form-item
+                :effect="themes"
+                class="form-item"
+                :label="t('visualization.query_condition_space')"
+                :class="'form-item-' + themes"
+              >
                 <el-input-number
-                  v-model="chart.customStyle.component.placeholderSize"
-                  @change="handleCurrentPlaceholderCustomChange"
-                  :min="10"
-                  :max="40"
-                  :disabled="!chart.customStyle.component.placeholderShow"
-                  style="margin-left: 8px"
-                  step-strictly
+                  v-model="chart.customStyle.component.queryConditionSpacing"
+                  :min="0"
                   :effect="themes"
                   controls-position="right"
                 />
-              </div>
-              <div style="display: flex; align-items: center; width: 100%; margin-top: 8px">
-                <el-select
-                  v-model="currentPlaceholder"
-                  :disabled="!chart.customStyle.component.placeholderShow"
-                  @change="handleCurrentPlaceholder"
-                  :effect="themes"
-                  style="width: 100%"
-                >
-                  <el-option
-                    v-for="item in element.propValue"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id"
-                  />
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item
-              :label="t('visualization.tips_world')"
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-input
+              </el-form-item>
+              <el-form-item
                 :effect="themes"
-                @change="onPlaceholderChange"
-                :disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
-                v-model.lazy="currentSearch.placeholder"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="t('v_query.query_condition_width')"
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-input-number
-                :effect="themes"
-                :min="100"
-                controls-position="right"
-                @change="onPlaceholderChange"
-                :disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
-                v-model.lazy="currentSearch.queryConditionWidth"
-              />
-            </el-form-item>
-          </el-form>
-        </el-collapse-item>
-        <collapse-switch-item
-          :themes="themes"
-          v-model="chart.customStyle.component.labelShow"
-          name="legend"
-          :title="t('visualization.query_condition_name')"
-        >
-          <el-form
-            :class="!chart.customStyle.component.labelShow && 'is-disabled'"
-            :disabled="!chart.customStyle.component.labelShow"
-            label-position="top"
-            size="small"
-            style="padding-bottom: 8px"
-          >
-            <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('visualization.position_adjust')"
-              :class="'form-item-' + themes"
-            >
-              <el-radio-group :effect="themes" v-model="chart.customStyle.component.layout">
-                <el-radio value="vertical" :effect="themes">
-                  {{ t('visualization.condition_top') }}
-                </el-radio>
-                <el-radio value="horizontal" :effect="themes">
-                  {{ t('visualization.condition_left') }}
-                </el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item
-              :label="t('chart.textColor')"
-              class="form-item margin-bottom-8"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                is-custom
-                show-alpha
-                style="width: 50px"
-                v-model="chart.customStyle.component.labelColor"
-                :predefine="predefineColors"
-              /><el-tooltip
-                :content="t('visualization.font_size')"
-                :effect="toolTip"
-                placement="top"
+                class="form-item"
+                :label="t('visualization.query_condition_height')"
+                :class="'form-item-' + themes"
               >
-                <el-select
-                  style="width: 80px; margin: 0 8px"
+                <el-input-number
+                  v-model="chart.customStyle.component.queryConditionHeight"
+                  :min="32"
+                  :effect="themes"
+                  controls-position="right"
+                />
+              </el-form-item>
+              <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+                <el-checkbox
                   :effect="themes"
-                  v-model="chart.customStyle.component.fontSize"
-                  :placeholder="t('chart.text_fontsize')"
                   size="small"
+                  @change="handleCurrentPlaceholderCustomChange"
+                  v-model="chart.customStyle.component.placeholderShow"
                 >
-                  <el-option
-                    v-for="option in fontSizeList"
-                    :key="option.value"
-                    :label="option.name"
-                    :value="option.value"
+                  {{ t('v_query.custom_condition_style') }}
+                </el-checkbox>
+              </el-form-item>
+              <el-form-item
+                :label="t('visualization.text_html')"
+                class="form-item"
+                style="padding-left: 20px"
+                :class="'form-item-' + themes"
+              >
+                <div style="display: flex; align-items: center; width: 100%">
+                  <el-color-picker
+                    :effect="themes"
+                    :trigger-width="56"
+                    style="max-width: 56px; min-width: 56px"
+                    is-custom
+                    show-alpha
+                    v-model="chart.customStyle.component.text"
+                    :disabled="!chart.customStyle.component.placeholderShow"
+                    @change="handleCurrentPlaceholderCustomChange"
+                    :predefine="predefineColors"
+                  />
+                  <el-input-number
+                    v-model="chart.customStyle.component.placeholderSize"
+                    @change="handleCurrentPlaceholderCustomChange"
+                    :min="10"
+                    :max="40"
+                    :disabled="!chart.customStyle.component.placeholderShow"
+                    style="margin-left: 8px"
+                    step-strictly
+                    :effect="themes"
+                    controls-position="right"
                   />
-                </el-select>
-              </el-tooltip>
-              <el-tooltip :effect="toolTip" placement="bottom">
-                <template #content>
-                  {{ t('chart.bolder') }}
-                </template>
-                <div
-                  class="icon-btn"
-                  :class="{
-                    dark: themes === 'dark',
-                    active: chart.customStyle.component.fontWeight === 'bold'
-                  }"
-                  style="margin-right: 8px"
-                  @click="checkBold('fontWeight')"
-                >
-                  <el-icon>
-                    <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
-                  </el-icon>
                 </div>
-              </el-tooltip>
-
-              <el-tooltip :effect="toolTip" placement="bottom">
-                <template #content>
-                  {{ t('chart.italic') }}
-                </template>
-                <div
-                  class="icon-btn"
-                  :class="{
-                    dark: themes === 'dark',
-                    active: chart.customStyle.component.fontStyle === 'italic'
-                  }"
-                  @click="checkItalic('fontStyle')"
-                >
-                  <el-icon>
-                    <Icon name="icon_italic_outlined"
-                      ><icon_italic_outlined class="svg-icon"
-                    /></Icon>
-                  </el-icon>
-                </div>
-              </el-tooltip>
-            </el-form-item>
-            <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('visualization.query_name_space2')"
-              :class="'form-item-' + themes"
-            >
-              <el-input-number
-                v-model="chart.customStyle.component.nameboxSpacing"
-                :min="0"
-                :max="50"
-                :effect="themes"
-                controls-position="right"
-              />
-            </el-form-item>
-          </el-form>
-        </collapse-switch-item>
-        <el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
-          <el-form
-            size="small"
-            @keydown.stop.prevent.enter
-            label-position="top"
-            style="padding-bottom: 8px"
-          >
-            <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('visualization.show_button')"
-              :class="'form-item-' + themes"
-            >
-              <el-checkbox-group :effect="themes" v-model="chart.customStyle.component.btnList">
-                <el-checkbox class="checkbox-with_icon" :effect="themes" size="small" label="sure">
-                  {{ t('commons.adv_search.search') }}
-                  <el-tooltip
-                    :effect="toolTip"
-                    :content="t('visualization.query_tips')"
-                    placement="top"
+                <div style="display: flex; align-items: center; width: 100%; margin-top: 8px">
+                  <el-select
+                    v-model="currentPlaceholder"
+                    :disabled="!chart.customStyle.component.placeholderShow"
+                    @change="handleCurrentPlaceholder"
+                    :effect="themes"
+                    style="width: 100%"
                   >
-                    <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>
-                </el-checkbox>
-                <br />
-                <el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="clear">
-                  {{ t('commons.clear') }}
-                </el-checkbox>
-                <br />
-                <el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="reset">
-                  {{ t('commons.adv_search.reset') }}
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
-            <el-form-item
-              class="form-item"
-              :label="t('visualization.button_color')"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                :trigger-width="108"
-                is-custom
-                show-alpha
-                v-model="chart.customStyle.component.btnColor"
-                :predefine="predefineColors"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="t('visualization.button_text')"
-              class="form-item margin-bottom-8"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                is-custom
-                show-alpha
-                v-model="chart.customStyle.component.labelColorBtn"
-                :predefine="predefineColors"
-              /><el-tooltip
-                :content="t('visualization.font_size')"
-                :effect="toolTip"
-                placement="top"
+                    <el-option
+                      v-for="item in element.propValue"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                    />
+                  </el-select>
+                </div>
+              </el-form-item>
+              <el-form-item
+                :label="t('visualization.tips_world')"
+                class="form-item"
+                style="padding-left: 20px"
+                :class="'form-item-' + themes"
               >
-                <el-select
-                  style="width: 80px; margin: 0 8px"
+                <el-input
                   :effect="themes"
-                  v-model="chart.customStyle.component.fontSizeBtn"
-                  :placeholder="t('chart.text_fontsize')"
-                  size="small"
+                  @change="onPlaceholderChange"
+                  :disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
+                  v-model.lazy="currentSearch.placeholder"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="t('v_query.query_condition_width')"
+                class="form-item"
+                style="padding-left: 20px"
+                :class="'form-item-' + themes"
+              >
+                <el-input-number
+                  :effect="themes"
+                  :min="100"
+                  controls-position="right"
+                  @change="onPlaceholderChange"
+                  :disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
+                  v-model.lazy="currentSearch.queryConditionWidth"
+                />
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+          <collapse-switch-item
+            :themes="themes"
+            v-model="chart.customStyle.component.labelShow"
+            name="legend"
+            :title="t('visualization.query_condition_name')"
+          >
+            <el-form
+              :class="!chart.customStyle.component.labelShow && 'is-disabled'"
+              :disabled="!chart.customStyle.component.labelShow"
+              label-position="top"
+              size="small"
+              style="padding-bottom: 8px"
+            >
+              <el-form-item
+                :effect="themes"
+                class="form-item"
+                :label="t('visualization.position_adjust')"
+                :class="'form-item-' + themes"
+              >
+                <el-radio-group :effect="themes" v-model="chart.customStyle.component.layout">
+                  <el-radio value="vertical" :effect="themes">
+                    {{ t('visualization.condition_top') }}
+                  </el-radio>
+                  <el-radio value="horizontal" :effect="themes">
+                    {{ t('visualization.condition_left') }}
+                  </el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item
+                :label="t('chart.textColor')"
+                class="form-item margin-bottom-8"
+                :class="'form-item-' + themes"
+              >
+                <el-color-picker
+                  :effect="themes"
+                  is-custom
+                  show-alpha
+                  style="width: 50px"
+                  v-model="chart.customStyle.component.labelColor"
+                  :predefine="predefineColors"
+                /><el-tooltip
+                  :content="t('visualization.font_size')"
+                  :effect="toolTip"
+                  placement="top"
                 >
-                  <el-option
-                    v-for="option in fontSizeList"
-                    :key="option.value"
-                    :label="option.name"
-                    :value="option.value"
-                  />
-                </el-select>
-              </el-tooltip>
-              <el-tooltip :effect="toolTip" placement="bottom">
-                <template #content>
-                  {{ t('chart.bolder') }}
-                </template>
-                <div
-                  class="icon-btn"
-                  :class="{
-                    dark: themes === 'dark',
-                    active: chart.customStyle.component.fontWeightBtn === 'bold'
-                  }"
-                  style="margin-right: 8px"
-                  @click="checkBold('fontWeightBtn')"
-                >
-                  <el-icon>
-                    <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
-                  </el-icon>
-                </div>
-              </el-tooltip>
+                  <el-select
+                    style="width: 80px; margin: 0 8px"
+                    :effect="themes"
+                    v-model="chart.customStyle.component.fontSize"
+                    :placeholder="t('chart.text_fontsize')"
+                    size="small"
+                  >
+                    <el-option
+                      v-for="option in fontSizeList"
+                      :key="option.value"
+                      :label="option.name"
+                      :value="option.value"
+                    />
+                  </el-select>
+                </el-tooltip>
+                <el-tooltip :effect="toolTip" placement="bottom">
+                  <template #content>
+                    {{ t('chart.bolder') }}
+                  </template>
+                  <div
+                    class="icon-btn"
+                    :class="{
+                      dark: themes === 'dark',
+                      active: chart.customStyle.component.fontWeight === 'bold'
+                    }"
+                    style="margin-right: 8px"
+                    @click="checkBold('fontWeight')"
+                  >
+                    <el-icon>
+                      <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
+                    </el-icon>
+                  </div>
+                </el-tooltip>
 
-              <el-tooltip :effect="toolTip" placement="bottom">
-                <template #content>
-                  {{ t('chart.italic') }}
-                </template>
-                <div
-                  class="icon-btn"
-                  :class="{
-                    dark: themes === 'dark',
-                    active: chart.customStyle.component.fontStyleBtn === 'italic'
-                  }"
-                  @click="checkItalic('fontStyleBtn')"
+                <el-tooltip :effect="toolTip" placement="bottom">
+                  <template #content>
+                    {{ t('chart.italic') }}
+                  </template>
+                  <div
+                    class="icon-btn"
+                    :class="{
+                      dark: themes === 'dark',
+                      active: chart.customStyle.component.fontStyle === 'italic'
+                    }"
+                    @click="checkItalic('fontStyle')"
+                  >
+                    <el-icon>
+                      <Icon name="icon_italic_outlined"
+                        ><icon_italic_outlined class="svg-icon"
+                      /></Icon>
+                    </el-icon>
+                  </div>
+                </el-tooltip>
+              </el-form-item>
+              <el-form-item
+                :effect="themes"
+                class="form-item"
+                :label="t('visualization.query_name_space2')"
+                :class="'form-item-' + themes"
+              >
+                <el-input-number
+                  v-model="chart.customStyle.component.nameboxSpacing"
+                  :min="0"
+                  :max="50"
+                  :effect="themes"
+                  controls-position="right"
+                />
+              </el-form-item>
+            </el-form>
+          </collapse-switch-item>
+          <el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
+            <el-form
+              size="small"
+              @keydown.stop.prevent.enter
+              label-position="top"
+              style="padding-bottom: 8px"
+            >
+              <el-form-item
+                :effect="themes"
+                class="form-item"
+                :label="t('visualization.show_button')"
+                :class="'form-item-' + themes"
+              >
+                <el-checkbox-group :effect="themes" v-model="chart.customStyle.component.btnList">
+                  <el-checkbox
+                    class="checkbox-with_icon"
+                    :effect="themes"
+                    size="small"
+                    label="sure"
+                  >
+                    {{ t('commons.adv_search.search') }}
+                    <el-tooltip
+                      :effect="toolTip"
+                      :content="t('visualization.query_tips')"
+                      placement="top"
+                    >
+                      <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>
+                  </el-checkbox>
+                  <br />
+                  <el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="clear">
+                    {{ t('commons.clear') }}
+                  </el-checkbox>
+                  <br />
+                  <el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="reset">
+                    {{ t('commons.adv_search.reset') }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+              <el-form-item
+                class="form-item"
+                :label="t('visualization.button_color')"
+                :class="'form-item-' + themes"
+              >
+                <el-color-picker
+                  :effect="themes"
+                  :trigger-width="108"
+                  is-custom
+                  show-alpha
+                  v-model="chart.customStyle.component.btnColor"
+                  :predefine="predefineColors"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="t('visualization.button_text')"
+                class="form-item margin-bottom-8"
+                :class="'form-item-' + themes"
+              >
+                <el-color-picker
+                  :effect="themes"
+                  is-custom
+                  show-alpha
+                  v-model="chart.customStyle.component.labelColorBtn"
+                  :predefine="predefineColors"
+                /><el-tooltip
+                  :content="t('visualization.font_size')"
+                  :effect="toolTip"
+                  placement="top"
                 >
-                  <el-icon>
-                    <Icon name="icon_italic_outlined"
-                      ><icon_italic_outlined class="svg-icon"
-                    /></Icon>
-                  </el-icon>
-                </div>
-              </el-tooltip>
-            </el-form-item>
-          </el-form>
-        </el-collapse-item>
-      </el-collapse>
-    </el-row>
+                  <el-select
+                    style="width: 80px; margin: 0 8px"
+                    :effect="themes"
+                    v-model="chart.customStyle.component.fontSizeBtn"
+                    :placeholder="t('chart.text_fontsize')"
+                    size="small"
+                  >
+                    <el-option
+                      v-for="option in fontSizeList"
+                      :key="option.value"
+                      :label="option.name"
+                      :value="option.value"
+                    />
+                  </el-select>
+                </el-tooltip>
+                <el-tooltip :effect="toolTip" placement="bottom">
+                  <template #content>
+                    {{ t('chart.bolder') }}
+                  </template>
+                  <div
+                    class="icon-btn"
+                    :class="{
+                      dark: themes === 'dark',
+                      active: chart.customStyle.component.fontWeightBtn === 'bold'
+                    }"
+                    style="margin-right: 8px"
+                    @click="checkBold('fontWeightBtn')"
+                  >
+                    <el-icon>
+                      <Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
+                    </el-icon>
+                  </div>
+                </el-tooltip>
+
+                <el-tooltip :effect="toolTip" placement="bottom">
+                  <template #content>
+                    {{ t('chart.italic') }}
+                  </template>
+                  <div
+                    class="icon-btn"
+                    :class="{
+                      dark: themes === 'dark',
+                      active: chart.customStyle.component.fontStyleBtn === 'italic'
+                    }"
+                    @click="checkItalic('fontStyleBtn')"
+                  >
+                    <el-icon>
+                      <Icon name="icon_italic_outlined"
+                        ><icon_italic_outlined class="svg-icon"
+                      /></Icon>
+                    </el-icon>
+                  </div>
+                </el-tooltip>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+        </el-collapse>
+      </el-row>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -779,7 +788,6 @@ const onPlaceholderChange = () => {
 }
 
 .attr-style {
-  overflow-y: auto;
   height: 100%;
   width: 100%;
 
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 24845cb244..7cab23fa51 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -4992,6 +4992,7 @@ span {
 :deep(.ed-collapse) {
   width: 100%;
   border-top: unset;
+  border-bottom: unset;
 }
 :deep(.ed-form-item) {
   .ed-radio.ed-radio--small .ed-radio__inner {