diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index 52c84a2245..b70396c3a4 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -27,7 +27,7 @@
     "axios": "^1.3.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
-    "element-plus-secondary": "^0.5.9",
+    "element-plus-secondary": "^0.5.11",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
     "flv.js": "^1.6.2",
diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
index e660c25c6d..752f4c532c 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -69,15 +69,46 @@ const defaultStyle = {
   titleShow: false,
   titleColor: '',
   textColorShow: false,
-  labelColor: '',
   bgColorShow: false,
   borderShow: false,
-  labelColorShow: false,
-  title: ''
+  labelShow: true,
+  title: '',
+  labelColor: '#1f2329',
+  fontSize: '14',
+  fontWeight: '',
+  fontStyle: '',
+  fontSizeBtn: '14',
+  fontWeightBtn: '',
+  fontStyleBtn: '',
+  queryConditionWidth: 227,
+  nameboxSpacing: 8,
+  queryConditionSpacing: 16,
+  btnColor: '#3370ff',
+  labelColorBtn: '#ffffff'
 }
 const customStyle = reactive({ ...defaultStyle })
 const snapshotStore = snapshotStoreWithOut()
 
+const btnStyle = computed(() => {
+  const style = {
+    backgroundColor: customStyle.btnColor,
+    borderColor: customStyle.btnColor,
+    color: customStyle.labelColorBtn
+  } as CSSProperties
+  if (customStyle.fontSizeBtn) {
+    style.fontSize = customStyle.fontSizeBtn + 'px'
+  }
+
+  if (customStyle.fontWeightBtn) {
+    style.fontWeight = customStyle.fontWeightBtn
+  }
+
+  if (customStyle.fontStyleBtn) {
+    style.fontStyle = customStyle.fontStyleBtn
+  }
+
+  return style
+})
 const curComponentView = computed(() => {
   return (canvasViewInfo.value[element.value.id] || {}).customStyle
 })
@@ -92,14 +123,25 @@ const setCustomStyle = val => {
     btnList,
     titleLayout,
     labelColor,
-    labelColorShow,
     text,
     bgColor,
     layout,
     titleShow,
     titleColor,
     textColorShow,
-    title
+    title,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    fontSizeBtn,
+    fontWeightBtn,
+    fontStyleBtn,
+    queryConditionWidth,
+    nameboxSpacing,
+    queryConditionSpacing,
+    labelColorBtn,
+    btnColor,
+    labelShow
   } = val
   customStyle.background = bgColorShow ? bgColor || '' : ''
   customStyle.border = borderShow ? borderColor || '' : ''
@@ -107,10 +149,22 @@ const setCustomStyle = val => {
   customStyle.layout = layout
   customStyle.titleShow = titleShow
   customStyle.titleColor = titleColor
-  customStyle.labelColor = labelColorShow ? labelColor || '' : ''
+  customStyle.labelColor = labelShow ? labelColor || '' : ''
+  customStyle.fontSize = labelShow ? fontSize || '14' : '14'
+  customStyle.fontWeight = labelShow ? fontWeight || '' : ''
+  customStyle.fontStyle = labelShow ? fontStyle || '' : ''
   customStyle.title = title
   customStyle.text = textColorShow ? text || '' : ''
   customStyle.titleLayout = titleLayout
+  customStyle.fontSizeBtn = fontSizeBtn || '14'
+  customStyle.fontWeightBtn = fontWeightBtn
+  customStyle.fontStyleBtn = fontStyleBtn
+  customStyle.queryConditionWidth = queryConditionWidth ?? 227
+  customStyle.nameboxSpacing = nameboxSpacing ?? 8
+  customStyle.queryConditionSpacing = queryConditionSpacing ?? 16
+  customStyle.labelColorBtn = labelColorBtn || '#ffffff'
+  customStyle.labelShow = labelShow ?? true
+  customStyle.btnColor = btnColor || '#3370ff'
 }
 
 watch(
@@ -196,10 +250,14 @@ const queryDataForId = id => {
     emitter.emit(`query-data-${ele}`)
   })
 }
-
+const getQueryConditionWidth = () => {
+  return customStyle.queryConditionWidth
+}
 provide('unmount-select', unMountSelect)
 provide('release-unmount-select', releaseSelect)
 provide('query-data-for-id', queryDataForId)
+provide('com-width', getQueryConditionWidth)
+
 onBeforeUnmount(() => {
   emitter.off(`addQueryCriteria${element.value.id}`)
   emitter.off(`editQueryCriteria${element.value.id}`)
@@ -384,9 +442,21 @@ const titleStyle = computed(() => {
 })
 
 const labelStyle = computed(() => {
-  return {
-    color: customStyle.labelColor || '#1f2329'
+  const style = {
+    fontSize: customStyle.fontSize + 'px'
   } as CSSProperties
+  if (customStyle.fontWeight) {
+    style.fontWeight = customStyle.fontWeight
+  }
+
+  if (customStyle.fontStyle) {
+    style.fontStyle = customStyle.fontStyle
+  }
+
+  if (customStyle.labelColor) {
+    style.color = customStyle.labelColor
+  }
+  return style
 })
 const autoStyle = computed(() => {
   return {
@@ -428,10 +498,15 @@ const autoStyle = computed(() => {
         </div>
       </div>
       <div class="query-fields-container">
-        <div class="query-item" :key="ele.id" v-for="(ele, index) in listVisible">
+        <div
+          class="query-item"
+          :style="{ marginRight: `${customStyle.queryConditionSpacing}px` }"
+          :key="ele.id"
+          v-for="(ele, index) in listVisible"
+        >
           <div class="query-field">
-            <div class="label">
-              <div class="label-wrapper">
+            <div class="label" :style="{ marginRight: `${customStyle.nameboxSpacing}px` }">
+              <div class="label-wrapper" v-show="customStyle.labelShow">
                 <div class="label-wrapper-text" :style="labelStyle">
                   <el-tooltip effect="dark" :content="ele.name" placement="top">
                     {{ ele.name }}
@@ -470,6 +545,7 @@ const autoStyle = computed(() => {
           <el-button
             @click.stop="queryData"
             style="margin-right: 7px"
+            :style="btnStyle"
             v-if="customStyle.btnList.includes('sure')"
             type="primary"
           >
@@ -614,15 +690,10 @@ const autoStyle = computed(() => {
         position: relative;
 
         :deep(.ed-date-editor) {
-          width: 227px;
           .ed-input__wrapper {
             width: 100%;
           }
         }
-
-        :deep(.ed-select-v2) {
-          min-width: 170px;
-        }
       }
     }
   }
diff --git a/core/core-frontend/src/custom-component/v-query/Select.vue b/core/core-frontend/src/custom-component/v-query/Select.vue
index 4cea917edd..e36e79f6ad 100644
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@@ -69,6 +69,8 @@ const options = shallowRef([])
 const unMountSelect: Ref = inject('unmount-select')
 const releaseSelect = inject('release-unmount-select', Function, true)
 const queryDataForId = inject('query-data-for-id', Function, true)
+const queryConditionWidth = inject('com-width', Function, true)
+
 const setDefaultMapValue = arr => {
   const { displayId, field } = config.value
   if (!displayId) {
@@ -444,7 +446,7 @@ const init = () => {
 }
 
 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: '227px' }
+  return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
 })
 
 const mult = ref()
diff --git a/core/core-frontend/src/custom-component/v-query/TextSearch.vue b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
index ac3b69fd8d..fc21e05582 100644
--- a/core/core-frontend/src/custom-component/v-query/TextSearch.vue
+++ b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { toRefs, onBeforeMount, type PropType, inject, type CSSProperties } from 'vue'
+import { toRefs, onBeforeMount, type PropType, inject, computed } from 'vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
 interface SelectConfig {
   conditionValueOperatorF: string
   conditionValueF: string
@@ -22,7 +24,8 @@ const operators = [
     value: 'like'
   }
 ]
-
+const dvMainStore = dvMainStoreWithOut()
+const { dvInfo } = storeToRefs(dvMainStore)
 const props = defineProps({
   config: {
     type: Object as PropType<SelectConfig>,
@@ -57,7 +60,15 @@ const setParams = () => {
 onBeforeMount(() => {
   setParams()
 })
+const queryConditionWidth = inject('com-width', Function, true)
 const customStyle = inject<{ background: string }>('$custom-style-filter')
+const selectStyle = computed(() => {
+  return { width: queryConditionWidth() + 'px' }
+})
+
+const lineWidth = computed(() => {
+  return { width: queryConditionWidth() - 15 + 'px' }
+})
 </script>
 
 <template>
@@ -65,27 +76,37 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
     <div class="condition-type">
       <el-select
         class="condition-value-select"
+        :effect="dvInfo.type === 'dataV' ? 'dark' : ''"
         popper-class="condition-value-select-popper"
         v-model="config.conditionValueOperatorF"
       >
         <el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
         </el-option>
       </el-select>
-      <el-input class="condition-value-input" v-model="config.conditionValueF" />
-      <div class="bottom-line"></div>
+      <el-input
+        :style="selectStyle"
+        class="condition-value-input"
+        v-model="config.conditionValueF"
+      />
+      <div :style="lineWidth" class="bottom-line"></div>
     </div>
     <div class="condition-type" v-if="[1, 2].includes(config.conditionType)">
       <sapn class="condition-type-tip">{{ config.conditionType === 1 ? '与' : '或' }}</sapn>
       <el-select
         class="condition-value-select"
+        :effect="dvInfo.type === 'dataV' ? 'dark' : ''"
         popper-class="condition-value-select-popper"
         v-model="config.conditionValueOperatorS"
       >
         <el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
         </el-option>
       </el-select>
-      <el-input class="condition-value-input" v-model="config.conditionValueS" />
-      <div class="bottom-line next-line"></div>
+      <el-input
+        :style="selectStyle"
+        class="condition-value-input"
+        v-model="config.conditionValueS"
+      />
+      <div :style="lineWidth" class="bottom-line next-line"></div>
     </div>
   </div>
 </template>
@@ -145,12 +166,7 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
       position: absolute;
       right: 5px;
       bottom: 3px;
-      width: 195px;
       z-index: 10;
-
-      &.next-line {
-        width: 195px;
-      }
     }
   }
 }
diff --git a/core/core-frontend/src/custom-component/v-query/Time.vue b/core/core-frontend/src/custom-component/v-query/Time.vue
index f3003a3eb1..7d6c764299 100644
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed } from 'vue'
+import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed, inject } from 'vue'
 import { type DatePickType } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import type { ManipulateType } from 'dayjs'
@@ -81,101 +81,6 @@ watch(
     })
   }
 )
-const isInRange = (ele, startWindowTime, timeStamp) => {
-  const {
-    intervalType,
-    regularOrTrends,
-    regularOrTrendsValue,
-    relativeToCurrent,
-    timeNum,
-    relativeToCurrentType,
-    around,
-    dynamicWindow,
-    maximumSingleQuery,
-    timeNumRange,
-    relativeToCurrentTypeRange,
-    aroundRange
-  } = ele.timeRange || {}
-  let isDynamicWindowTime = false
-  const noTime = ele.timeGranularityMultiple.split('time').join('').split('range')[0]
-  const queryTimeType = noTime === 'date' ? 'day' : (noTime as ManipulateType)
-  if (startWindowTime && dynamicWindow) {
-    isDynamicWindowTime =
-      dayjs(startWindowTime)
-        .add(maximumSingleQuery, queryTimeType)
-        .startOf(queryTimeType)
-        .valueOf() -
-        1000 <
-      timeStamp
-  }
-
-  if (intervalType === 'none') {
-    if (dynamicWindow) return isDynamicWindowTime
-    return false
-  }
-  let startTime
-  if (relativeToCurrent === 'custom') {
-    startTime = getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-  } else {
-    switch (relativeToCurrent) {
-      case 'thisYear':
-        startTime = getThisStart('year')
-        break
-      case 'lastYear':
-        startTime = getLastStart('year')
-        break
-      case 'thisMonth':
-        startTime = getThisStart('month')
-        break
-      case 'lastMonth':
-        startTime = getLastStart('month')
-        break
-      case 'today':
-        startTime = getThisStart('day')
-        break
-      case 'yesterday':
-        startTime = getLastStart('day')
-        break
-      case 'monthBeginning':
-        startTime = getThisStart('month')
-        break
-      case 'yearBeginning':
-        startTime = getThisStart('year')
-        break
-
-      default:
-        break
-    }
-  }
-  const startValue = regularOrTrends === 'fixed' ? regularOrTrendsValue : startTime
-  if (intervalType === 'start') {
-    return startWindowTime < +new Date(startValue) || isDynamicWindowTime
-  }
-
-  if (intervalType === 'end') {
-    return timeStamp > +new Date(startValue) || isDynamicWindowTime
-  }
-
-  if (intervalType === 'timeInterval') {
-    const startTime =
-      regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[0]
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-    const endTime =
-      regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[1]
-        : getAround(
-            relativeToCurrentTypeRange,
-            aroundRange === 'f' ? 'subtract' : 'add',
-            timeNumRange
-          )
-    return (
-      startWindowTime < +new Date(startTime) - 1000 ||
-      timeStamp > +new Date(endTime) ||
-      isDynamicWindowTime
-    )
-  }
-}
 const callback = param => {
   startWindowTime.value = param[0]
   const disabled = param.some(ele => {
@@ -243,8 +148,14 @@ const init = () => {
   multiple.value = config.value.displayType === '7'
 }
 
+const queryConditionWidth = inject('com-width', Function, true)
 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: multiple.value ? '470px' : '227px' }
+  return props.isConfig
+    ? {}
+    : {
+        width:
+          (multiple.value ? queryConditionWidth() * 2 : queryConditionWidth()) + 'px !important'
+      }
 })
 
 const columnsType = computed(() => {
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 21ce0e79e5..7e202e3b66 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -409,7 +409,6 @@ export const dvMainStore = defineStore('dataVisualization', {
               borderShow: false,
               text,
               textColorShow: false,
-              labelColorShow: false,
               labelColor,
               borderColor,
               title: '',
@@ -419,7 +418,19 @@ export const dvMainStore = defineStore('dataVisualization', {
               titleColor,
               titleLayout,
               layout,
-              btnList: ['sure']
+              btnList: ['sure'],
+              fontSize: '14',
+              labelShow: true,
+              fontWeight: '',
+              fontStyle: '',
+              fontSizeBtn: '14',
+              fontWeightBtn: '',
+              fontStyleBtn: '',
+              queryConditionWidth: 227,
+              nameboxSpacing: 8,
+              queryConditionSpacing: 16,
+              labelColorBtn: '#ffffff',
+              btnColor: '#3370ff'
             }
           }
         }
diff --git a/core/core-frontend/src/utils/canvasStyle.ts b/core/core-frontend/src/utils/canvasStyle.ts
index 92942dbf59..feb3b8a232 100644
--- a/core/core-frontend/src/utils/canvasStyle.ts
+++ b/core/core-frontend/src/utils/canvasStyle.ts
@@ -475,7 +475,7 @@ interface CanvasViewInfo {
 }
 
 const colors = ['labelColor', 'borderColor', 'text', 'bgColor']
-const colorsSwitch = ['labelColorShow', 'borderShow', 'textColorShow', 'bgColorShow']
+const colorsSwitch = ['borderShow', 'textColorShow', 'bgColorShow']
 
 export function adaptCurThemeFilterStyleAllKeyComponent(component) {
   if (isFilterComponent(component.type)) {
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 8a01d41f42..02ea31c26c 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
@@ -1,11 +1,12 @@
 <script lang="tsx" setup>
 import { useI18n } from '@/hooks/web/useI18n'
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, computed } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
-const { t } = useI18n()
+import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
 
+const { t } = useI18n()
 const state = {
-  styleActiveNames: ['component']
+  styleActiveNames: ['basicStyle']
 }
 
 const props = defineProps({
@@ -26,16 +27,52 @@ const props = defineProps({
     default: 'dark'
   }
 })
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})
 const predefineColors = COLOR_PANEL
+const fontSizeList = []
+for (let i = 10; i <= 60; i = i + 2) {
+  fontSizeList.push({
+    name: i + '',
+    value: i + ''
+  })
+}
 
-const { element, chart, commonBackgroundPop } = toRefs(props)
+const checkBold = type => {
+  if (!chart.value.customStyle.component.labelShow) return
+  chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'bold'
+}
+
+const checkItalic = type => {
+  if (!chart.value.customStyle.component.labelShow) return
+  chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'italic'
+}
+const { chart, commonBackgroundPop } = toRefs(props)
+if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
+  chart.value.customStyle.component = {
+    ...chart.value.customStyle.component,
+    labelShow: true,
+    fontWeight: '',
+    fontStyle: '',
+    fontSize: '14',
+    fontSizeBtn: '14',
+    fontWeightBtn: '',
+    fontStyleBtn: '',
+    queryConditionWidth: 227,
+    nameboxSpacing: 8,
+    queryConditionSpacing: 16,
+    labelColorBtn: '#ffffff',
+    btnColor: '#3370ff'
+  }
+}
 </script>
 
 <template>
   <div class="attr-style">
     <el-row class="de-collapse-style">
       <el-collapse v-model="state.styleActiveNames" class="style-collapse">
-        <el-collapse-item :effect="themes" name="component" :title="t('visualization.module')">
+        <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
           <el-form label-position="top">
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
@@ -95,29 +132,10 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                 :predefine="predefineColors"
               />
             </el-form-item>
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                v-model="chart.customStyle.component.labelColorShow"
-              >
-                标签颜色
-              </el-checkbox>
-            </el-form-item>
-            <el-form-item
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                :trigger-width="108"
-                is-custom
-                v-model="chart.customStyle.component.labelColor"
-                :disabled="!chart.customStyle.component.labelColorShow"
-                :predefine="predefineColors"
-              />
-            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <el-collapse-item :effect="themes" name="addition" title="查询条件">
+          <el-form label-position="top">
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"
@@ -187,8 +205,134 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                 :predefine="predefineColors"
               />
             </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="查询条件宽度"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionWidth"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="查询条件间距"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionSpacing"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <collapse-switch-item
+          :themes="themes"
+          v-model="chart.customStyle.component.labelShow"
+          name="legend"
+          title="查询条件名称"
+        >
+          <el-form
+            :class="!chart.customStyle.component.labelShow && 'is-disabled'"
+            :disabled="!chart.customStyle.component.labelShow"
+            label-position="top"
+          >
+            <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 label="vertical"> 上侧 </el-radio>
+                <el-radio label="horizontal"> 左侧 </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
+                v-model="chart.customStyle.component.labelColor"
+                :predefine="predefineColors"
+              /><el-tooltip content="字号" :effect="toolTip" placement="top">
+                <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="dark" 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" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
 
-            <el-divider :effect="themes" class="m-divider" />
+              <el-tooltip effect="dark" 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" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="名称与选框间距"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.nameboxSpacing"
+                :min="0"
+                :max="50"
+                controls-position="right"
+              />
+            </el-form-item>
+          </el-form>
+        </collapse-switch-item>
+        <el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
+          <el-form label-position="top">
             <el-form-item
               :effect="themes"
               class="form-item"
@@ -207,55 +351,77 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                 </el-checkbox>
               </el-checkbox-group>
             </el-form-item>
+            <el-form-item class="form-item" label="按钮颜色" :class="'form-item-' + themes">
+              <el-color-picker
+                :effect="themes"
+                :trigger-width="108"
+                is-custom
+                v-model="chart.customStyle.component.btnColor"
+                :predefine="predefineColors"
+              />
+            </el-form-item>
             <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('chart.label_position')"
+              label="按钮文字"
+              class="form-item margin-bottom-8"
               :class="'form-item-' + themes"
             >
-              <el-radio-group
+              <el-color-picker
                 :effect="themes"
-                class="icon-radio-group"
-                v-model="chart.customStyle.component.layout"
-              >
-                <el-radio :effect="themes" label="vertical">
-                  <el-tooltip effect="dark" placement="top">
-                    <template #content>
-                      {{ t('chart.text_pos_top') }}
-                    </template>
-                    <div
-                      class="icon-btn"
-                      :class="{
-                        dark: themes === 'dark',
-                        active: chart.customStyle.component.layout === 'vertical'
-                      }"
-                    >
-                      <el-icon>
-                        <Icon name="icon_title-top-align_outlined" />
-                      </el-icon>
-                    </div>
-                  </el-tooltip>
-                </el-radio>
+                is-custom
+                v-model="chart.customStyle.component.labelColorBtn"
+                :predefine="predefineColors"
+              /><el-tooltip content="字号" :effect="toolTip" placement="top">
+                <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="dark" 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" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
 
-                <el-radio label="horizontal">
-                  <el-tooltip effect="dark" placement="top">
-                    <template #content>
-                      {{ t('chart.text_pos_left') }}
-                    </template>
-                    <div
-                      class="icon-btn"
-                      :class="{
-                        dark: themes === 'dark',
-                        active: chart.customStyle.component.layout === 'horizontal'
-                      }"
-                    >
-                      <el-icon>
-                        <Icon name="icon_title-left-align_outlined" />
-                      </el-icon>
-                    </div>
-                  </el-tooltip>
-                </el-radio>
-              </el-radio-group>
+              <el-tooltip effect="dark" 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" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
             </el-form-item>
           </el-form>
         </el-collapse-item>
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index 5b265206d0..a2a2d321aa 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -200,8 +200,8 @@ const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {
 
 const initScroll = () => {
   // 首先回到最顶部，然后计算行高*行数作为top，最后判断：如果top<数据量*行高，继续滚动，否则回到顶部
-  const customAttr = actualChart.customAttr
-  const senior = actualChart.senior
+  const customAttr = actualChart?.customAttr
+  const senior = actualChart?.senior
   if (
     senior?.scrollCfg?.open &&
     chartData.value.tableRow?.length &&
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
index de0a804dc9..b4af5ee9bc 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
@@ -167,9 +167,13 @@ const showApiData = () => {
       const data = Base64.encode(JSON.stringify(apiItem))
       loading.value = true
       cancelMap['/datasource/checkApiDatasource']?.()
-      checkApiItem({ data: data, type: 'apiStructure' }).then(response => {
-        originFieldItem.jsonFields = response.data.jsonFields
-      })
+      checkApiItem({ data: data, type: 'apiStructure' })
+        .then(response => {
+          originFieldItem.jsonFields = response.data.jsonFields
+        })
+        .catch(error => {
+          console.log(error?.message)
+        })
       loading.value = false
     } else {
       return false
@@ -232,13 +236,18 @@ const next = () => {
         }
       }
       cancelMap['/datasource/checkApiDatasource']?.()
-      checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) }).then(response => {
-        apiItem.jsonFields = response.data.jsonFields
-        apiItem.fields = []
-        handleFiledChange(apiItem)
-        previewData()
-        active.value += 1
-      })
+
+      checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) })
+        .then(response => {
+          apiItem.jsonFields = response.data.jsonFields
+          apiItem.fields = []
+          handleFiledChange(apiItem)
+          previewData()
+          active.value += 1
+        })
+        .catch(error => {
+          console.log(error?.message)
+        })
     }
   })
 }