diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue b/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
index 367ffff853..0f7d5c54e6 100644
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
@@ -127,9 +127,17 @@ onBeforeMount(() => {
 <template>
   <el-date-picker
     disabled
+    class="date-editor_granularity"
     :key="config.timeGranularity"
     v-model="selectValue"
     :type="config.timeGranularity"
     :placeholder="$t('commons.date.select_date_time')"
   />
 </template>
+
+<style lang="less">
+.date-editor_granularity .ed-input__wrapper {
+  width: 325px;
+  margin-top: 0;
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue b/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
index 67a50d9c26..7b90ba0184 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
@@ -231,7 +231,7 @@ defineExpose({
           />
         </el-select>
         <el-time-picker
-          style="width: 146px; margin-left: 8px"
+          style="width: 108px; margin-left: 8px"
           v-if="curComponent.timeGranularity === 'datetime'"
           v-model="curComponent.arbitraryTime"
         />
@@ -239,8 +239,8 @@ defineExpose({
     </div>
     <div class="setting">
       <div class="setting-label">预览</div>
-      <div class="setting-value">
-        <component :config="curComponent" isConfig ref="inputCom" :is="DynamicTime"></component>
+      <div class="setting-value" style="width: 325px">
+        <DynamicTime style="width: 100%" :config="curComponent" isConfig></DynamicTime>
       </div>
     </div>
   </div>
@@ -280,7 +280,7 @@ defineExpose({
 
     .setting-input {
       display: flex;
-      padding-left: 86px;
+      padding-left: 126px;
       justify-content: flex-end;
       align-items: center;
       &.range {
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
index ff5e4e35b6..532a8e6b27 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
@@ -197,14 +197,59 @@ const relativeToCurrentTypeMap = {
 
 const confirmTimeSelect = () => {
   item.value.dynamicTimeSetting = { ...timeDialog.value.curComponent }
-  const { timeGranularity, timeNum, relativeToCurrentType, around, arbitraryTime } =
-    item.value.dynamicTimeSetting
+  const {
+    timeGranularity,
+    timeNum,
+    relativeToCurrentType,
+    around,
+    arbitraryTime,
+    relativeToCurrent
+  } = item.value.dynamicTimeSetting
+  if (relativeToCurrent !== 'custom') {
+    item.value.timeValue = [
+      {
+        label: '今年',
+        value: 'thisYear'
+      },
+      {
+        label: '去年',
+        value: 'lastYear'
+      },
+      {
+        label: '本月',
+        value: 'thisMonth'
+      },
+      {
+        label: '上月',
+        value: 'lastMonth'
+      },
+      {
+        label: '今天',
+        value: 'today'
+      },
+      {
+        label: '昨天',
+        value: 'yesterday'
+      },
+      {
+        label: '月初',
+        value: 'monthBeginning'
+      },
+      {
+        label: '年初',
+        value: 'yearBeginning'
+      }
+    ].find(ele => ele.value === relativeToCurrent).label
+    dialogVisible.value = false
+    return
+  }
   item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
     around === 'f' ? '前' : '后'
   }`
   if (timeGranularity === 'datetime') {
     item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
   }
+
   dialogVisible.value = false
 }