diff --git a/frontend/package.json b/frontend/package.json
index eaf0b06ab4..863cd78bf1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,7 @@
     "axios": "^0.21.1",
     "core-js": "^2.6.5",
     "echarts": "^5.0.1",
-    "element-resize-detector": "^1.2.2",
+    "element-resize-detector": "^1.2.3",
     "element-ui": "2.13.0",
     "file-save": "^0.2.0",
     "file-saver": "^2.0.5",
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index fca7838e90..9955bc9af0 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -5,8 +5,7 @@
     class="component"
     @click="handleClick"
   >
-    <component
-      :is="config.component"
+    <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"
       class="component-custom"
@@ -14,6 +13,7 @@
       :out-style="config.style"
       :element="config"
     />
+
     <component
       :is="config.component"
       v-else
@@ -31,8 +31,9 @@ import { getStyle } from '@/components/canvas/utils/style'
 import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'
 import { mapState } from 'vuex'
-
+import DeOutWidget from '@/components/dataease/DeOutWidget'
 export default {
+  components: { DeOutWidget },
   mixins: [mixins],
   props: {
     config: {
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index e99a4e82b4..0bf29c46f1 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -44,6 +44,27 @@
         :active="item === curComponent"
         @input="handleInput"
       />
+      <!-- <out-widget
+        :is="item.component"
+        v-else-if="item.type==='custom'"
+        :id="'component' + item.id"
+        class="component"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
+      /> -->
+      <de-out-widget
+        v-else-if="item.type==='custom'"
+        :id="'component' + item.id"
+        class="component"
+        :style="getComponentStyleDefault(item.style)"
+        :prop-value="item.propValue"
+        :element="item"
+        :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
+      />
       <component
         :is="item.component"
         v-else-if="item.type==='other'"
@@ -127,9 +148,9 @@ import Grid from './Grid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
-
+import DeOutWidget from '@/components/dataease/DeOutWidget'
 export default {
-  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog },
+  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget },
   props: {
     isEdit: {
       type: Boolean,
diff --git a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
index 71069364de..bfa7f7e60d 100644
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@@ -26,7 +26,8 @@ const drawPanel = {
   type: 'custom',
   style: {
     width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
diff --git a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
index ec83992aa7..8b02268aa7 100644
--- a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
@@ -22,7 +22,8 @@ const drawPanel = {
   type: 'custom',
   style: {
     width: 300,
-    height: 45.5,
+    // height: 45.5,
+    height: 90,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
diff --git a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
index a915ba308c..54b753120a 100644
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@@ -27,7 +27,7 @@ const drawPanel = {
   type: 'custom',
   style: {
     width: 300,
-    height: 38,
+    height: 90,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
index 5c6f574448..d58a9ca63c 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@@ -24,7 +24,8 @@ const drawPanel = {
   type: 'custom',
   style: {
     width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
diff --git a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
index 1e48393ed9..1ffc498145 100644
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@@ -22,7 +22,8 @@ const drawPanel = {
   type: 'custom',
   style: {
     width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
diff --git a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
index beea3d0b01..4b476c3481 100644
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -22,7 +22,8 @@ const drawPanel = {
   type: 'custom',
   style: {
     width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
diff --git a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
index 3eb7836690..0460d2e467 100644
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -22,7 +22,8 @@ const drawPanel = {
   type: 'custom',
   style: {
     width: 300,
-    height: 47,
+    // height: 47,
+    height: 90,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 454929942f..f693b71943 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -182,28 +182,44 @@
             </div>
           </el-col>
           <el-col :span="16"><div class="filter-options-right">
-            <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
+            <el-col :span="8">
+              <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题</el-checkbox>
+              <el-popover
+                v-model="titlePopovervisible"
+                placement="bottom-end"
+                :disabled="!componentInfo.options.attrs.showTitle"
+                width="200"
+              >
+                <div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
+                  <el-input v-model="componentInfo.options.attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
+                </div>
 
-            <el-popover
-              v-model="popovervisible"
-              placement="bottom-end"
-              :disabled="!componentInfo.options.attrs.enableRange"
-              width="200"
-            >
-              <div class="view-container-class">
-                <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
-                  <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
-                    <span>
-                      <svg-icon :icon-class="item.type" class="chart-icon" />
-                      <span style="margin-left: 6px">{{ item.name }}</span>
-                    </span>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </div>
+                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}" class="el-icon-setting i-filter" />
+              </el-popover>
+            </el-col>
+            <el-col :span="8">
+              <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>  {{ $t('panel.custom_scope') }} </span> </el-checkbox>
 
-              <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
-            </el-popover>
-            <!-- <el-checkbox disabled>备选项</el-checkbox> -->
+              <el-popover
+                v-model="popovervisible"
+                placement="bottom-end"
+                :disabled="!componentInfo.options.attrs.enableRange"
+                width="200"
+              >
+                <div class="view-container-class">
+                  <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
+                    <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
+                      <span>
+                        <svg-icon :icon-class="item.type" class="chart-icon" />
+                        <span style="margin-left: 6px">{{ item.name }}</span>
+                      </span>
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
+
+                <i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
+              </el-popover>
+            </el-col>
           </div>
 
           </el-col>
@@ -301,7 +317,8 @@ export default {
       keyWord: '',
       timer: null,
       expandedArray: [],
-      viewKeyWord: ''
+      viewKeyWord: '',
+      titlePopovervisible: false
     }
   },
   computed: {
@@ -610,6 +627,12 @@ export default {
       }
       // this.componentInfo.options.attrs.enableRange = value
       this.$emit('re-fresh-component', this.componentInfo)
+    },
+    showTitleChange(value) {
+      if (!value) {
+        this.componentInfo.options.attrs.title = ''
+      }
+      this.$emit('re-fresh-component', this.componentInfo)
     }
   }
 }