diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index 0b5ba92f6f..400fadab32 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -49,7 +49,45 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item v-show="conf && conf.includes('sort')">
+
+          <el-dropdown-item v-show="item.deType === 1">
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-c-scale-to-original" />
+                  <span>{{ $t('chart.dateStyle') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.dateStyle) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeDateStyle('y')">{{ $t('chart.y') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M')">{{ $t('chart.y_M') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M_d')">{{ $t('chart.y_M_d') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('H_m_s')">{{ $t('chart.H_m_s') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m')">{{ $t('chart.y_M_d_H_m') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeDateStyle('y_M_d_H_m_s')">{{ $t('chart.y_M_d_H_m_s') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item v-show="item.deType === 1">
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="datePattern">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-timer" />
+                  <span>{{ $t('chart.datePattern') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.datePattern) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeDatePattern('date_sub')">{{ $t('chart.date_sub') }}(1990-01-01)</el-dropdown-item>
+                <el-dropdown-item :command="beforeDatePattern('date_split')">{{ $t('chart.date_split') }}(1990/01/01)</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+
+          <el-dropdown-item v-show="conf && conf.includes('sort')" :divided="item.deType === 1">
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
@@ -143,6 +181,27 @@ export default {
     removeItem() {
       this.item.index = this.index
       this.$emit('onItemRemove', this.item)
+    },
+
+    dateStyle(param) {
+      // console.log(param)
+      this.item.dateStyle = param.type
+      this.$emit('onItemChange', this.item)
+    },
+    beforeDateStyle(type) {
+      return {
+        type: type
+      }
+    },
+    datePattern(param) {
+      // console.log(param)
+      this.item.datePattern = param.type
+      this.$emit('onItemChange', this.item)
+    },
+    beforeDatePattern(type) {
+      return {
+        type: type
+      }
     }
   }
 }
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index b43817bd9a..37773650d7 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -949,6 +949,12 @@ export default {
         })
       }
       view.extStack.forEach(function(ele) {
+        if (!ele.dateStyle || ele.dateStyle === '') {
+          ele.dateStyle = 'y_M_d'
+        }
+        if (!ele.datePattern || ele.datePattern === '') {
+          ele.datePattern = 'date_sub'
+        }
         if (!ele.sort || ele.sort === '') {
           ele.sort = 'none'
         }