diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index 75e7758c6f..1cebdb8346 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -24,18 +24,19 @@
           v-model="checkAll"
           :indeterminate="isIndeterminate"
           @change="handleCheckAllChange"
-        >
-          {{ $t('commons.all') }}</el-checkbox>
+        />{{ $t('commons.all') }}
 
         <el-checkbox-group
           v-model="value"
           @change="handleCheckedChange"
         >
-          <el-checkbox
-            v-for="item in data.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))"
-            :key="item.id"
-            :label="item.id"
-          >{{ item.id }}</el-checkbox>
+          <template v-for="item in data.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))">
+            <el-checkbox
+              :key="item.id"
+              :label="item.id"
+            >{{ item.id }}</el-checkbox>
+            <br :key="item.id">
+          </template>
         </el-checkbox-group>
       </div>
 
@@ -407,13 +408,11 @@ export default {
 
   .checkbox-group-container {
     label.el-checkbox {
-      display: block !important;
-      margin: 10px !important;
+      margin: 10px 10px 0 10px !important;
     }
 
     .el-checkbox-group>label {
-      display: block !important;
-      margin: 10px !important;
+      margin: 10px 10px 0 10px !important;
     }
 
   }
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index c55b9c80fe..1f9c1f6a5d 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -19,20 +19,7 @@
       style="cursor: default;display: block;"
     >
       <div style="padding:6px 4px 0;margin: 0;">
-        <input
-          v-if="chartTitleEditer"
-          ref="chartTitle"
-          v-model.lazy="chartTitleUpdate"
-          v-clickoutside="lostFocus"
-          type="text"
-          class="chart-input-title"
-          @blur="changeEditStatus"
-        >
-        <p
-          v-else
-          style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;min-width: 30px"
-          @click.stop="handleTitleEditer"
-        >{{ chart.title }}</p>
+        <chart-title-update :chart-info="chartInfo" />
         <title-remark
           v-if="remarkCfg.show"
           style="text-shadow: none!important;"
@@ -66,23 +53,10 @@ import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_clou
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
-import { compareItem } from '@/views/chart/chart/compare'
-import { mapState } from 'vuex'
-
-import clickoutside from 'element-ui/src/utils/clickoutside.js'
-import bus from '@/utils/bus'
-import {
-  getChartDetails
-} from '@/api/chart/chart'
-import {
-  viewEditSave
-} from '@/api/chart/chart'
+import ChartTitleUpdate from './ChartTitleUpdate.vue'
 export default {
   name: 'ChartComponentG2',
-  components: { TitleRemark, ViewTrackBar },
-  directives: {
-    clickoutside
-  },
+  components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
   props: {
     chart: {
       type: Object,
@@ -124,7 +98,6 @@ export default {
         top: '0px'
       },
       pointParam: null,
-      chartTitleEditer: false,
       dynamicAreaCode: null,
       borderRadius: '0px',
       chartHeight: '100%',
@@ -159,16 +132,10 @@ export default {
         borderRadius: this.borderRadius
       }
     },
-    panelInfo() {
-      return this.$store.state.panel.panelInfo
-    },
-    mainActiveName() {
-      return this.$store.state.panel.mainActiveName
-    },
-    ...mapState([
-      'mobileLayoutStatus',
-      'previewVisible'
-    ])
+    chartInfo() {
+      const { id, title } = this.chart
+      return { id, title }
+    }
   },
   watch: {
     chart: {
@@ -422,258 +389,9 @@ export default {
         this.calcHeightRightNow()
       }, 100)
     },
-    lostFocus() {
-      this.chartTitleEditer = false
-    },
-    getChartDetail() {
-      getChartDetails(this.chart.id, this.panelInfo.id, { queryFrom: 'panel_edit' }).then(response => {
-        const chartView = JSON.parse(JSON.stringify(response.data))
-        chartView.viewFields = chartView.viewFields ? JSON.parse(chartView.viewFields) : []
-        chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : []
-        chartView.xaxisExt = chartView.xaxisExt ? JSON.parse(chartView.xaxisExt) : []
-        chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : []
-        chartView.yaxisExt = chartView.yaxisExt ? JSON.parse(chartView.yaxisExt) : []
-        chartView.extStack = chartView.extStack ? JSON.parse(chartView.extStack) : []
-        chartView.drillFields = chartView.drillFields ? JSON.parse(chartView.drillFields) : []
-        chartView.extBubble = chartView.extBubble ? JSON.parse(chartView.extBubble) : []
-        chartView.customAttr = chartView.customAttr ? JSON.parse(chartView.customAttr) : {}
-        chartView.customStyle = chartView.customStyle ? JSON.parse(chartView.customStyle) : {}
-        chartView.customFilter = chartView.customFilter ? JSON.parse(chartView.customFilter) : {}
-        chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {}
-        const viewSave = this.buildParam(chartView, true, 'chart', false, false)
-        if (!viewSave) return
-        viewEditSave(this.panelInfo.id, viewSave).then(() => {
-          bus.$emit('aside-set-title', this.chart.title)
-        })
-        this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
-      })
-    },
-    handleTitleEditer() {
-      if (this.mainActiveName !== 'PanelEdit' || this.mobileLayoutStatus || this.previewVisible) return
-      this.chartTitleEditer = true
-      this.chartTitleUpdate = this.chart.title
-      this.$nextTick(() => {
-        this.$refs.chartTitle.focus()
-      })
-    },
-    buildParam(chartView, getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) {
-      if (!chartView.resultCount ||
-        chartView.resultCount === '' ||
-        isNaN(Number(chartView.resultCount)) ||
-        String(chartView.resultCount).includes('.') ||
-        parseInt(chartView.resultCount) < 1) {
-        chartView.resultCount = '1000'
-      }
-      const view = JSON.parse(JSON.stringify(chartView))
-      view.id = chartView.id
-      view.sceneId = chartView.sceneId
-      view.name = this.chartTitleUpdate
-      view.title = this.chartTitleUpdate
-      view.tableId = chartView.tableId
-      if (view.type === 'map' && view.xaxis.length > 1) {
-        view.xaxis = [view.xaxis[0]]
-      }
-      view.xaxis.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'
-        }
-        if (!ele.filter) {
-          ele.filter = []
-        }
-      })
-      if (view.type === 'table-pivot' || view.type === 'bar-group') {
-        view.xaxisExt.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'
-          }
-          if (!ele.filter) {
-            ele.filter = []
-          }
-        })
-      }
-      if (view.type === 'map' && view.yaxis.length > 1) {
-        view.yaxis = [view.yaxis[0]]
-      }
-      view.yaxis.forEach(function(ele) {
-        if (!ele.chartType) {
-          ele.chartType = 'bar'
-        }
-        if (ele.chartId) {
-          ele.summary = ''
-        } else {
-          if (!ele.summary || ele.summary === '') {
-            if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
-              ele.summary = 'count'
-            } else {
-              ele.summary = 'sum'
-            }
-          }
-        }
-
-        if (!ele.sort || ele.sort === '') {
-          ele.sort = 'none'
-        }
-        if (!ele.filter) {
-          ele.filter = []
-        }
-        if (!ele.compareCalc) {
-          ele.compareCalc = compareItem
-        }
-      })
-      if (view.type === 'chart-mix') {
-        view.yaxisExt.forEach(function(ele) {
-          if (!ele.chartType) {
-            ele.chartType = 'bar'
-          }
-          if (ele.chartId) {
-            ele.summary = ''
-          } else {
-            if (!ele.summary || ele.summary === '') {
-              if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
-                ele.summary = 'count'
-              } else {
-                ele.summary = 'sum'
-              }
-            }
-          }
-
-          if (!ele.sort || ele.sort === '') {
-            ele.sort = 'none'
-          }
-          if (!ele.filter) {
-            ele.filter = []
-          }
-          if (!ele.compareCalc) {
-            ele.compareCalc = compareItem
-          }
-        })
-      }
-      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'
-        }
-      })
-      view.extBubble.forEach(function(ele) {
-        if (!ele.summary || ele.summary === '') {
-          if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
-            ele.summary = 'count'
-          } else {
-            ele.summary = 'sum'
-          }
-        }
-      })
-      if (view.type === 'label') {
-        if (view.xaxis.length > 1) {
-          view.xaxis.splice(1, view.xaxis.length)
-        }
-      }
-      if (view.type.startsWith('pie') ||
-        view.type.startsWith('funnel') ||
-        view.type.startsWith('text') ||
-        view.type.startsWith('gauge') ||
-        view.type === 'treemap' ||
-        view.type === 'liquid' ||
-        view.type === 'word-cloud' ||
-        view.type === 'waterfall' ||
-        view.type.includes('group')) {
-        if (view.yaxis.length > 1) {
-          view.yaxis.splice(1, view.yaxis.length)
-        }
-      }
-      if (view.type === 'line-stack' && trigger === 'chart') {
-        view.customAttr.size.lineArea = true
-      }
-      if (view.type === 'line' && trigger === 'chart') {
-        view.customAttr.size.lineArea = false
-      }
-      if (view.type === 'treemap' && trigger === 'chart') {
-        view.customAttr.label.show = true
-      }
-      if (view.type === 'liquid' ||
-        (view.type.includes('table') && view.render === 'echarts') ||
-        view.type.includes('text') ||
-        view.type.includes('gauge') ||
-        view.type === 'table-pivot') {
-        view.drillFields = []
-      }
-      view.customFilter.forEach(function(ele) {
-        if (ele && !ele.filter) {
-          ele.filter = []
-        }
-      })
-      view.xaxis = JSON.stringify(view.xaxis)
-      view.viewFields = JSON.stringify(view.viewFields)
-      view.xaxisExt = JSON.stringify(view.xaxisExt)
-      view.yaxis = JSON.stringify(view.yaxis)
-      view.yaxisExt = JSON.stringify(view.yaxisExt)
-      view.customAttr = JSON.stringify(view.customAttr)
-      view.customStyle = JSON.stringify(view.customStyle)
-      view.customFilter = JSON.stringify(view.customFilter)
-      view.extStack = JSON.stringify(view.extStack)
-      view.drillFields = JSON.stringify(view.drillFields)
-      view.extBubble = JSON.stringify(view.extBubble)
-      view.senior = JSON.stringify(view.senior)
-      delete view.data
-      return view
-    },
-    changeEditStatus() {
-      this.lostFocus()
-      if (this.chartTitleUpdate.length > 50) {
-        this.$error(this.$t('chart.title_limit'))
-        return
-      }
-      if (this.chartTitleUpdate === this.chart.title) return
-      this.chart.title = this.chartTitleUpdate
-      this.getChartDetail()
-    },
     initRemark() {
       this.remarkCfg = getRemark(this.chart)
     }
   }
 }
 </script>
-
-<style scoped lang="scss">
-
-.chart-input-title{
-    word-break: break-word;
-    font: 12px / 1.231 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif, "Segoe UI Symbol";
-    overflow: visible;
-    margin: 0;
-    padding: 0;
-    font-weight: 400;
-    font-family: inherit;
-    border-radius: 2px;
-    color: #182b50;
-    font-size: 12px;
-    line-height: 26px;
-    padding-left: 10px;
-    padding-right: 10px;
-    background: transparent;
-    outline: none;
-    border-width: 0px 0px 1px;
-    border-image: initial;
-    border-bottom: 1px solid rgb(200, 203, 204);
-    z-index: 2;
-    height: 21px;
-    min-width: 100px;
-}
-</style>
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 9a37f67555..50cfcb3476 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -19,20 +19,7 @@
       style="cursor: default;display: block;"
     >
       <div style="padding:6px 4px 0;margin: 0;">
-        <input
-          v-if="chartTitleEditer"
-          ref="chartTitle"
-          v-model.lazy="chartTitleUpdate"
-          v-clickoutside="lostFocus"
-          type="text"
-          class="chart-input-title"
-          @blur="changeEditStatus"
-        >
-        <p
-          v-else
-          style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;min-width: 30px"
-          @click.stop="handleTitleEditer"
-        >{{ chart.title }}</p>
+        <chart-title-update :chart-info="chartInfo" />
         <title-remark
           v-if="remarkCfg.show"
           style="text-shadow: none!important;"
@@ -96,22 +83,10 @@ import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
-import clickoutside from 'element-ui/src/utils/clickoutside.js'
-import bus from '@/utils/bus'
-import { mapState } from 'vuex'
-import { compareItem } from '@/views/chart/chart/compare'
-import {
-  getChartDetails
-} from '@/api/chart/chart'
-import {
-  viewEditSave
-} from '@/api/chart/chart'
+import ChartTitleUpdate from './ChartTitleUpdate.vue'
 export default {
   name: 'ChartComponentS2',
-  components: { TitleRemark, ViewTrackBar },
-  directives: {
-    clickoutside
-  },
+  components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
   props: {
     chart: {
       type: Object,
@@ -147,7 +122,6 @@ export default {
         left: '0px',
         top: '0px'
       },
-      chartTitleEditer: false,
       pointParam: null,
       dynamicAreaCode: null,
       borderRadius: '0px',
@@ -167,7 +141,6 @@ export default {
       },
       title_show: true,
       antVRenderStatus: false,
-      chartTitleUpdate: '',
       currentPage: {
         page: 1,
         pageSize: 20,
@@ -193,16 +166,10 @@ export default {
         borderRadius: this.borderRadius
       }
     },
-    panelInfo() {
-      return this.$store.state.panel.panelInfo
-    },
-    mainActiveName() {
-      return this.$store.state.panel.mainActiveName
-    },
-    ...mapState([
-      'mobileLayoutStatus',
-      'previewVisible'
-    ])
+    chartInfo() {
+      const { id, title } = this.chart
+      return { id, title }
+    }
   },
   watch: {
     chart: {
@@ -448,228 +415,6 @@ export default {
         this.calcHeightRightNow()
       }, 100)
     },
-    lostFocus() {
-      this.chartTitleEditer = false
-    },
-    getChartDetail() {
-      getChartDetails(this.chart.id, this.panelInfo.id, { queryFrom: 'panel_edit' }).then(response => {
-        const chartView = JSON.parse(JSON.stringify(response.data))
-        chartView.viewFields = chartView.viewFields ? JSON.parse(chartView.viewFields) : []
-        chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : []
-        chartView.xaxisExt = chartView.xaxisExt ? JSON.parse(chartView.xaxisExt) : []
-        chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : []
-        chartView.yaxisExt = chartView.yaxisExt ? JSON.parse(chartView.yaxisExt) : []
-        chartView.extStack = chartView.extStack ? JSON.parse(chartView.extStack) : []
-        chartView.drillFields = chartView.drillFields ? JSON.parse(chartView.drillFields) : []
-        chartView.extBubble = chartView.extBubble ? JSON.parse(chartView.extBubble) : []
-        chartView.customAttr = chartView.customAttr ? JSON.parse(chartView.customAttr) : {}
-        chartView.customStyle = chartView.customStyle ? JSON.parse(chartView.customStyle) : {}
-        chartView.customFilter = chartView.customFilter ? JSON.parse(chartView.customFilter) : {}
-        chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {}
-        const viewSave = this.buildParam(chartView, true, 'chart', false, false)
-        if (!viewSave) return
-        viewEditSave(this.panelInfo.id, viewSave).then(() => {
-          bus.$emit('aside-set-title', this.chart.title)
-        })
-        this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
-      })
-    },
-    handleTitleEditer() {
-      if (this.mainActiveName !== 'PanelEdit' || this.mobileLayoutStatus || this.previewVisible) return
-      this.chartTitleEditer = true
-      this.chartTitleUpdate = this.chart.title
-      this.$nextTick(() => {
-        this.$refs.chartTitle.focus()
-      })
-    },
-    buildParam(chartView, getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) {
-      if (!chartView.resultCount ||
-        chartView.resultCount === '' ||
-        isNaN(Number(chartView.resultCount)) ||
-        String(chartView.resultCount).includes('.') ||
-        parseInt(chartView.resultCount) < 1) {
-        chartView.resultCount = '1000'
-      }
-      const view = JSON.parse(JSON.stringify(chartView))
-      view.id = chartView.id
-      view.sceneId = chartView.sceneId
-      view.name = this.chartTitleUpdate
-      view.title = this.chartTitleUpdate
-      view.tableId = chartView.tableId
-      if (view.type === 'map' && view.xaxis.length > 1) {
-        view.xaxis = [view.xaxis[0]]
-      }
-      view.xaxis.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'
-        }
-        if (!ele.filter) {
-          ele.filter = []
-        }
-      })
-      if (view.type === 'table-pivot' || view.type === 'bar-group') {
-        view.xaxisExt.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'
-          }
-          if (!ele.filter) {
-            ele.filter = []
-          }
-        })
-      }
-      if (view.type === 'map' && view.yaxis.length > 1) {
-        view.yaxis = [view.yaxis[0]]
-      }
-      view.yaxis.forEach(function(ele) {
-        if (!ele.chartType) {
-          ele.chartType = 'bar'
-        }
-        if (ele.chartId) {
-          ele.summary = ''
-        } else {
-          if (!ele.summary || ele.summary === '') {
-            if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
-              ele.summary = 'count'
-            } else {
-              ele.summary = 'sum'
-            }
-          }
-        }
-
-        if (!ele.sort || ele.sort === '') {
-          ele.sort = 'none'
-        }
-        if (!ele.filter) {
-          ele.filter = []
-        }
-        if (!ele.compareCalc) {
-          ele.compareCalc = compareItem
-        }
-      })
-      if (view.type === 'chart-mix') {
-        view.yaxisExt.forEach(function(ele) {
-          if (!ele.chartType) {
-            ele.chartType = 'bar'
-          }
-          if (ele.chartId) {
-            ele.summary = ''
-          } else {
-            if (!ele.summary || ele.summary === '') {
-              if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
-                ele.summary = 'count'
-              } else {
-                ele.summary = 'sum'
-              }
-            }
-          }
-
-          if (!ele.sort || ele.sort === '') {
-            ele.sort = 'none'
-          }
-          if (!ele.filter) {
-            ele.filter = []
-          }
-          if (!ele.compareCalc) {
-            ele.compareCalc = compareItem
-          }
-        })
-      }
-      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'
-        }
-      })
-      view.extBubble.forEach(function(ele) {
-        if (!ele.summary || ele.summary === '') {
-          if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
-            ele.summary = 'count'
-          } else {
-            ele.summary = 'sum'
-          }
-        }
-      })
-      if (view.type === 'label') {
-        if (view.xaxis.length > 1) {
-          view.xaxis.splice(1, view.xaxis.length)
-        }
-      }
-      if (view.type.startsWith('pie') ||
-        view.type.startsWith('funnel') ||
-        view.type.startsWith('text') ||
-        view.type.startsWith('gauge') ||
-        view.type === 'treemap' ||
-        view.type === 'liquid' ||
-        view.type === 'word-cloud' ||
-        view.type === 'waterfall' ||
-        view.type.includes('group')) {
-        if (view.yaxis.length > 1) {
-          view.yaxis.splice(1, view.yaxis.length)
-        }
-      }
-      if (view.type === 'line-stack' && trigger === 'chart') {
-        view.customAttr.size.lineArea = true
-      }
-      if (view.type === 'line' && trigger === 'chart') {
-        view.customAttr.size.lineArea = false
-      }
-      if (view.type === 'treemap' && trigger === 'chart') {
-        view.customAttr.label.show = true
-      }
-      if (view.type === 'liquid' ||
-        (view.type.includes('table') && view.render === 'echarts') ||
-        view.type.includes('text') ||
-        view.type.includes('gauge') ||
-        view.type === 'table-pivot') {
-        view.drillFields = []
-      }
-      view.customFilter.forEach(function(ele) {
-        if (ele && !ele.filter) {
-          ele.filter = []
-        }
-      })
-      view.xaxis = JSON.stringify(view.xaxis)
-      view.viewFields = JSON.stringify(view.viewFields)
-      view.xaxisExt = JSON.stringify(view.xaxisExt)
-      view.yaxis = JSON.stringify(view.yaxis)
-      view.yaxisExt = JSON.stringify(view.yaxisExt)
-      view.customAttr = JSON.stringify(view.customAttr)
-      view.customStyle = JSON.stringify(view.customStyle)
-      view.customFilter = JSON.stringify(view.customFilter)
-      view.extStack = JSON.stringify(view.extStack)
-      view.drillFields = JSON.stringify(view.drillFields)
-      view.extBubble = JSON.stringify(view.extBubble)
-      view.senior = JSON.stringify(view.senior)
-      delete view.data
-      return view
-    },
-    changeEditStatus() {
-      this.lostFocus()
-      if (this.chartTitleUpdate.length > 50) {
-        this.$error(this.$t('chart.title_limit'))
-        return
-      }
-      if (this.chartTitleUpdate === this.chart.title) return
-      this.chart.title = this.chartTitleUpdate
-      this.getChartDetail()
-    },
     pageChange(val) {
       this.currentPage.pageSize = val
       this.initData()
@@ -769,28 +514,4 @@ export default {
 .page-style ::v-deep li{
   background: transparent!important;
 }
-
-.chart-input-title{
-    word-break: break-word;
-    font: 12px / 1.231 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif, "Segoe UI Symbol";
-    overflow: visible;
-    margin: 0;
-    padding: 0;
-    font-weight: 400;
-    font-family: inherit;
-    border-radius: 2px;
-    color: #182b50;
-    font-size: 12px;
-    line-height: 26px;
-    padding-left: 10px;
-    padding-right: 10px;
-    background: transparent;
-    outline: none;
-    border-width: 0px 0px 1px;
-    border-image: initial;
-    border-bottom: 1px solid rgb(200, 203, 204);
-    z-index: 2;
-    height: 21px;
-    min-width: 100px;
-}
 </style>
diff --git a/frontend/src/views/chart/components/ChartTitleUpdate.vue b/frontend/src/views/chart/components/ChartTitleUpdate.vue
new file mode 100644
index 0000000000..334c4d53bf
--- /dev/null
+++ b/frontend/src/views/chart/components/ChartTitleUpdate.vue
@@ -0,0 +1,382 @@
+<template>
+  <el-input
+    v-if="chartTitleEditer"
+    ref="chartTitle"
+    v-model.lazy="chartTitleUpdate"
+    v-clickoutside="lostFocus"
+    clearable
+    type="text"
+    class="chart-input-title"
+    @blur="changeEditStatus"
+  />
+  <p
+    v-else
+    style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline-block;min-width: 30px"
+    @click.stop="handleTitleEditer"
+  >{{ chart.title }}</p>
+</template>
+
+<script>
+import clickoutside from 'element-ui/src/utils/clickoutside.js'
+import { mapState } from 'vuex'
+import { checkViewTitle } from '@/components/canvas/utils/utils'
+import { getChartDetails, viewEditSave } from '@/api/chart/chart'
+import bus from '@/utils/bus'
+import { compareItem } from '@/views/chart/chart/compare'
+
+export default {
+  directives: {
+    clickoutside
+  },
+  props: {
+    chartInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      chartTitleEditer: false,
+      chartTitleUpdate: '',
+      chart: {}
+    }
+  },
+  computed: {
+    mainActiveName() {
+      return this.$store.state.panel.mainActiveName
+    },
+    ...mapState(['mobileLayoutStatus', 'previewVisible']),
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    }
+  },
+  watch: {
+    chartInfo: {
+      handler(val) {
+        const { id, title } = this.chartInfo
+        this.chart = { id, title }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    changeEditStatus() {
+      this.lostFocus()
+      if (this.chartTitleUpdate.length > 50) {
+        this.$error(this.$t('chart.title_limit'))
+        return
+      }
+      if (this.chartTitleUpdate.length < 1) {
+        this.$error(this.$t('chart.title_cannot_empty'))
+        this.chartTitleUpdate = this.chart.title
+        return
+      }
+      if (checkViewTitle('update', this.chart.id, this.chartTitleUpdate)) {
+        this.$error(this.$t('chart.title_repeat'))
+        this.chartTitleUpdate = this.chart.title
+        return
+      }
+      if (this.chartTitleUpdate === this.chart.title) return
+      this.chart.title = this.chartTitleUpdate
+      this.getChartDetail()
+    },
+    buildParam(
+      chartView,
+      getData,
+      trigger,
+      needRefreshGroup = false,
+      switchType = false,
+      switchRender = false
+    ) {
+      if (
+        !chartView.resultCount ||
+        chartView.resultCount === '' ||
+        isNaN(Number(chartView.resultCount)) ||
+        String(chartView.resultCount).includes('.') ||
+        parseInt(chartView.resultCount) < 1
+      ) {
+        chartView.resultCount = '1000'
+      }
+      const view = JSON.parse(JSON.stringify(chartView))
+      view.id = chartView.id
+      view.sceneId = chartView.sceneId
+      view.name = this.chartTitleUpdate
+      view.title = this.chartTitleUpdate
+      view.tableId = chartView.tableId
+      if (view.type === 'map' && view.xaxis.length > 1) {
+        view.xaxis = [view.xaxis[0]]
+      }
+      view.xaxis.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'
+        }
+        if (!ele.filter) {
+          ele.filter = []
+        }
+      })
+      if (view.type === 'table-pivot' || view.type === 'bar-group') {
+        view.xaxisExt.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'
+          }
+          if (!ele.filter) {
+            ele.filter = []
+          }
+        })
+      }
+      if (view.type === 'map' && view.yaxis.length > 1) {
+        view.yaxis = [view.yaxis[0]]
+      }
+      view.yaxis.forEach(function(ele) {
+        if (!ele.chartType) {
+          ele.chartType = 'bar'
+        }
+        if (ele.chartId) {
+          ele.summary = ''
+        } else {
+          if (!ele.summary || ele.summary === '') {
+            if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
+              ele.summary = 'count'
+            } else {
+              ele.summary = 'sum'
+            }
+          }
+        }
+
+        if (!ele.sort || ele.sort === '') {
+          ele.sort = 'none'
+        }
+        if (!ele.filter) {
+          ele.filter = []
+        }
+        if (!ele.compareCalc) {
+          ele.compareCalc = compareItem
+        }
+      })
+      if (view.type === 'chart-mix') {
+        view.yaxisExt.forEach(function(ele) {
+          if (!ele.chartType) {
+            ele.chartType = 'bar'
+          }
+          if (ele.chartId) {
+            ele.summary = ''
+          } else {
+            if (!ele.summary || ele.summary === '') {
+              if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
+                ele.summary = 'count'
+              } else {
+                ele.summary = 'sum'
+              }
+            }
+          }
+
+          if (!ele.sort || ele.sort === '') {
+            ele.sort = 'none'
+          }
+          if (!ele.filter) {
+            ele.filter = []
+          }
+          if (!ele.compareCalc) {
+            ele.compareCalc = compareItem
+          }
+        })
+      }
+      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'
+        }
+      })
+      view.extBubble.forEach(function(ele) {
+        if (!ele.summary || ele.summary === '') {
+          if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
+            ele.summary = 'count'
+          } else {
+            ele.summary = 'sum'
+          }
+        }
+      })
+      if (view.type === 'label') {
+        if (view.xaxis.length > 1) {
+          view.xaxis.splice(1, view.xaxis.length)
+        }
+      }
+      if (
+        view.type.startsWith('pie') ||
+        view.type.startsWith('funnel') ||
+        view.type.startsWith('text') ||
+        view.type.startsWith('gauge') ||
+        view.type === 'treemap' ||
+        view.type === 'liquid' ||
+        view.type === 'word-cloud' ||
+        view.type === 'waterfall' ||
+        view.type.includes('group')
+      ) {
+        if (view.yaxis.length > 1) {
+          view.yaxis.splice(1, view.yaxis.length)
+        }
+      }
+      if (view.type === 'line-stack' && trigger === 'chart') {
+        view.customAttr.size.lineArea = true
+      }
+      if (view.type === 'line' && trigger === 'chart') {
+        view.customAttr.size.lineArea = false
+      }
+      if (view.type === 'treemap' && trigger === 'chart') {
+        view.customAttr.label.show = true
+      }
+      if (
+        view.type === 'liquid' ||
+        (view.type.includes('table') && view.render === 'echarts') ||
+        view.type.includes('text') ||
+        view.type.includes('gauge') ||
+        view.type === 'table-pivot'
+      ) {
+        view.drillFields = []
+      }
+      view.customFilter.forEach(function(ele) {
+        if (ele && !ele.filter) {
+          ele.filter = []
+        }
+      })
+      view.xaxis = JSON.stringify(view.xaxis)
+      view.viewFields = JSON.stringify(view.viewFields)
+      view.xaxisExt = JSON.stringify(view.xaxisExt)
+      view.yaxis = JSON.stringify(view.yaxis)
+      view.yaxisExt = JSON.stringify(view.yaxisExt)
+      view.customAttr = JSON.stringify(view.customAttr)
+      view.customStyle = JSON.stringify(view.customStyle)
+      view.customFilter = JSON.stringify(view.customFilter)
+      view.extStack = JSON.stringify(view.extStack)
+      view.drillFields = JSON.stringify(view.drillFields)
+      view.extBubble = JSON.stringify(view.extBubble)
+      view.senior = JSON.stringify(view.senior)
+      delete view.data
+      return view
+    },
+    lostFocus() {
+      this.chartTitleEditer = false
+    },
+    handleTitleEditer() {
+      if (
+        this.mainActiveName !== 'PanelEdit' ||
+        this.mobileLayoutStatus ||
+        this.previewVisible
+      ) { return }
+      this.chartTitleEditer = true
+      this.chartTitleUpdate = this.chart.title
+      this.$nextTick(() => {
+        this.$refs.chartTitle.focus()
+      })
+    },
+    getChartDetail() {
+      getChartDetails(this.chart.id, this.panelInfo.id, {
+        queryFrom: 'panel_edit'
+      }).then((response) => {
+        const chartView = JSON.parse(JSON.stringify(response.data))
+        chartView.viewFields = chartView.viewFields
+          ? JSON.parse(chartView.viewFields)
+          : []
+        chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : []
+        chartView.xaxisExt = chartView.xaxisExt
+          ? JSON.parse(chartView.xaxisExt)
+          : []
+        chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : []
+        chartView.yaxisExt = chartView.yaxisExt
+          ? JSON.parse(chartView.yaxisExt)
+          : []
+        chartView.extStack = chartView.extStack
+          ? JSON.parse(chartView.extStack)
+          : []
+        chartView.drillFields = chartView.drillFields
+          ? JSON.parse(chartView.drillFields)
+          : []
+        chartView.extBubble = chartView.extBubble
+          ? JSON.parse(chartView.extBubble)
+          : []
+        chartView.customAttr = chartView.customAttr
+          ? JSON.parse(chartView.customAttr)
+          : {}
+        chartView.customStyle = chartView.customStyle
+          ? JSON.parse(chartView.customStyle)
+          : {}
+        chartView.customFilter = chartView.customFilter
+          ? JSON.parse(chartView.customFilter)
+          : {}
+        chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {}
+        const viewSave = this.buildParam(chartView, true, 'chart', false, false)
+        if (!viewSave) return
+        viewEditSave(this.panelInfo.id, viewSave).then(() => {
+          this.chart.title = this.chartTitleUpdate
+          bus.$emit('aside-set-title', this.chart.title)
+        })
+        this.$store.commit('recordViewEdit', {
+          viewId: this.chart.id,
+          hasEdit: true
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep.chart-input-title {
+  word-break: break-word;
+  font: 12px / 1.231 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
+    'Microsoft YaHei', 'PingFang SC', sans-serif, 'Segoe UI Symbol';
+  overflow: visible;
+  margin: 0;
+  padding: 0;
+  font-weight: 400;
+  font-family: inherit;
+  border-radius: 2px;
+  line-height: 26px;
+  padding-left: 10px;
+  padding-right: 10px;
+  background: transparent;
+  outline: none;
+  border-width: 0px 0px 1px;
+  border-image: initial;
+  border-bottom: 1px solid rgb(200, 203, 204);
+  z-index: 2;
+  height: 21px;
+  min-width: 20%;
+  max-width: 50%;
+  .el-input__inner {
+    height: 21px;
+    font-size: 12px;
+    color: #182b50;
+    font-weight: 400;
+    font-family: inherit;
+    border-radius: 0;
+    border: none;
+    line-height: 21px;
+    background: transparent;
+  }
+
+  .el-input__suffix {
+    .el-input__icon {
+      line-height: 21px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
index a358884bb1..96776d5955 100644
--- a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
+++ b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
@@ -70,14 +70,6 @@ export default {
       }
     }
   },
-  watch: {
-    content: {
-      handler(newValue) {
-        this.$emit('onRemarkChange', newValue)
-      }
-    }
-  },
-
   computed: {
     customStyle() {
       let style = {}
@@ -115,6 +107,13 @@ export default {
       'canvasStyleData'
     ])
   },
+  watch: {
+    content: {
+      handler(newValue) {
+        this.$emit('onRemarkChange', newValue)
+      }
+    }
+  },
   created() {
     if (!this.showTable) {
       this.init.plugins = this.init.plugins.replace(' table', '')
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index 30aee75973..a2bce9adfd 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -11,7 +11,7 @@
       style="cursor: default;display: block;"
     >
       <div>
-        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
+        <chart-title-update :chart-info="chartInfo" />
         <title-remark
           v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
           style="text-shadow: none!important;"
@@ -47,10 +47,11 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import ChartTitleUpdate from '../ChartTitleUpdate.vue'
 
 export default {
   name: 'LabelNormal',
-  components: { TitleRemark },
+  components: { TitleRemark, ChartTitleUpdate },
   props: {
     chart: {
       type: Object,
@@ -110,12 +111,10 @@ export default {
     }
   },
   computed: {
-    // bg_class() {
-    //   return {
-    //     background: hexColorToRGBA('#ffffff', 0),
-    //     borderRadius: this.borderRadius
-    //   }
-    // }
+    chartInfo() {
+      const { id, title } = this.chart
+      return { id, title }
+    }
   },
   watch: {
     chart() {
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 4a1db6ac92..131cf96f45 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -18,7 +18,7 @@
       style="cursor: default;display: block;"
     >
       <div>
-        <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
+        <chart-title-update :chart-info="chartInfo" />
         <title-remark
           v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
           style="text-shadow: none!important;"
@@ -59,10 +59,11 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import TitleRemark from '@/views/chart/view/TitleRemark'
 import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
+import ChartTitleUpdate from '../ChartTitleUpdate.vue'
 
 export default {
   name: 'LabelNormalText',
-  components: { TitleRemark, ViewTrackBar },
+  components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
   props: {
     chart: {
       type: Object,
@@ -137,13 +138,11 @@ export default {
   computed: {
     trackBarStyleTime() {
       return this.trackBarStyle
+    },
+    chartInfo() {
+      const { id, title } = this.chart
+      return { id, title }
     }
-    // bg_class() {
-    //   return {
-    //     background: hexColorToRGBA('#ffffff', 0),
-    //     borderRadius: this.borderRadius
-    //   }
-    // }
   },
   watch: {
     chart() {
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index ca3d2a9cbb..b1f059322c 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -291,7 +291,6 @@
           ['oracle', 'sqlServer', 'pg', 'redshift', 'db2'].includes(form.type)
         "
         class="schema-label"
-        prop="configuration.schema"
       >
         <template slot="label">
           <span class="name">{{ $t('datasource.schema') }}<i class="required" /></span>
@@ -308,6 +307,8 @@
           filterable
           :placeholder="$t('fu.search_bar.please_select')"
           class="de-select"
+          @change="validatorSchema"
+          @blur="validatorSchema"
         >
           <el-option
             v-for="item in schemas"
@@ -316,6 +317,12 @@
             :value="item"
           />
         </el-select>
+        <div
+          v-if="configurationSchema"
+          class="el-form-item__error"
+        >
+          {{ $t('datasource.please_choose_schema') }}
+        </div>
       </el-form-item>
 
       <el-form-item
@@ -896,13 +903,6 @@ export default {
             trigger: 'blur'
           }
         ],
-        'configuration.schema': [
-          {
-            required: true,
-            message: i18n.t('datasource.please_input_connect_timeout'),
-            trigger: 'blur'
-          }
-        ],
         url: [
           {
             required: true,
@@ -919,6 +919,7 @@ export default {
         ]
       },
       api_table_title: '',
+      configurationSchema: false,
       schemas: [],
       showEmpty: false,
       canEdit: false,
@@ -1013,9 +1014,10 @@ export default {
       certinKey: false
     }
   },
-  watch: {},
-  created() {},
   methods: {
+    validatorSchema() {
+      this.configurationSchema = !this.form.configuration.schema
+    },
     getSchema() {
       this.$refs.DsConfig.validate((valid) => {
         if (valid) {