diff --git a/Dockerfile b/Dockerfile
index b3a45d4f1a..a4c9265e79 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM registry.cn-qingdao.aliyuncs.com/dataease/fabric8-java-alpine-openjdk8-jre
+FROM registry.cn-qingdao.aliyuncs.com/dataease/fabric8-java-alpine-openjdk8-jre:map
 
 ARG IMAGE_TAG
 
diff --git a/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java b/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java
index 4f78726e6f..18b54e7a02 100644
--- a/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java
+++ b/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java
@@ -28,7 +28,6 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
-import javax.xml.crypto.Data;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index c978f9e800..153100e9c1 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -91,7 +91,9 @@ export default {
       httpRequest: {
         status: true,
         msg: ''
-      }
+      },
+      timeMachine: null,
+      changeIndex: 0
     }
   },
   computed: {
@@ -131,6 +133,9 @@ export default {
     chartType() {
       return this.chart.type
     },
+    hw() {
+      return this.outStyle.width * this.outStyle.height
+    },
     ...mapState([
       'canvasStyleData',
       'nowPanelTrackInfo'
@@ -163,6 +168,22 @@ export default {
       deep: true
     },
     // 监听外部的样式变化 （非实时性要求）
+    'hw': {
+      handler(newVal, oldVla) {
+        // console.log('hw:' + newVal + '---' + oldVla)
+        if (newVal !== oldVla) {
+          this.destroyTimeMachine()
+          this.changeIndex++
+          this.chartResize(this.changeIndex)
+        }
+        //
+        // if (this.$refs[this.element.propValue.id]) {
+        //   this.$refs[this.element.propValue.id].chartResize()
+        // }
+      },
+      deep: true
+    },
+    // 监听外部的样式变化 （非实时性要求）
     outStyle: {
       handler(newVal, oldVla) {
         //
@@ -392,10 +413,20 @@ export default {
         }
       }
     },
-    // chart
-    chartResize() {
+    destroyTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+
+    // 边框变化
+    chartResize(index) {
       if (this.$refs[this.element.propValue.id]) {
-        this.$refs[this.element.propValue.id].chartResize()
+        this.timeMachine = setTimeout(() => {
+          if (index === this.changeIndex) {
+            this.$refs[this.element.propValue.id].chartResize()
+          }
+          this.destroyTimeMachine()
+        }, 200)
       }
     }
   }
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 7ea65b4b82..ab5a35f136 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -13,7 +13,7 @@
               <div style="padding: 6px 10px;">
                 <div>
                   <span class="color-label">{{ $t('chart.system_case') }}</span>
-                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+                  <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption">
                     <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
                       <div style="float: left">
                         <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
@@ -187,10 +187,14 @@ export default {
     }
   },
   watch: {
-    'chart': {
+    'chart.id': {
       handler: function() {
         this.customColor = null
         this.colorIndex = 0
+      }
+    },
+    'chart': {
+      handler: function() {
         this.init()
       }
     }
@@ -199,17 +203,26 @@ export default {
     this.init()
   },
   methods: {
-    changeColorCase() {
+    changeColorOption() {
       const that = this
       const items = this.colorCases.filter(ele => {
         return ele.value === that.colorForm.value
       })
-      const val = JSON.parse(JSON.stringify(this.colorForm))
-      val.value = items[0].value
-      val.colors = items[0].colors
-      this.$emit('onColorChange', val)
-      this.customColor = null
+      // const val = JSON.parse(JSON.stringify(this.colorForm))
+      // val.value = items[0].value
+      // val.colors = items[0].colors
+      // this.colorForm.value = items[0].value
+      this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
+
+      this.customColor = this.colorForm.colors[0]
       this.colorIndex = 0
+
+      this.changeColorCase()
+    },
+    changeColorCase() {
+      this.$emit('onColorChange', this.colorForm)
+      // this.customColor = null
+      // this.colorIndex = 0
     },
     init() {
       const chart = JSON.parse(JSON.stringify(this.chart))
@@ -239,9 +252,7 @@ export default {
     },
 
     resetCustomColor() {
-      this.customColor = this.colorForm.colors[0]
-      this.colorIndex = 0
-      this.changeColorCase()
+      this.changeColorOption()
     }
   }
 }
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
index 20576c9bbc..aa53f162ec 100644
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@@ -11,7 +11,7 @@
           <el-input v-model="form.name" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('commons.description')" prop="desc">
-          <el-input v-model="form.desc" autocomplete="off"  />
+          <el-input v-model="form.desc" autocomplete="off" />
         </el-form-item>
         <el-form-item :label="$t('datasource.type')" prop="type">
           <el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" :disabled="formType=='modify' || (formType==='add' && params && !!params.type)" @change="changeType()">
@@ -61,26 +61,26 @@
             />
           </el-select>
         </el-form-item>
-        <el-collapse >
+        <el-collapse>
           <el-collapse-item :title="$t('datasource.priority')" name="1">
 
             <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
-              <el-input v-model="form.configuration.initialPoolSize" autocomplete="off"  type="number"  min="0" size="small" />
+              <el-input v-model="form.configuration.initialPoolSize" autocomplete="off" type="number" min="0" size="small" />
             </el-form-item>
             <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
-              <el-input v-model="form.configuration.minPoolSize" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
             </el-form-item>
             <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
-              <el-input v-model="form.configuration.maxPoolSize" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
             </el-form-item>
             <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.max_idle_time')" prop="configuration.maxIdleTime">
-              <el-input v-model="form.configuration.maxIdleTime" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.maxIdleTime" autocomplete="off" type="number" min="0"/>
             </el-form-item>
             <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.acquire_increment')" prop="configuration.acquireIncrement">
-              <el-input v-model="form.configuration.acquireIncrement" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.acquireIncrement" autocomplete="off" type="number" min="0"/>
             </el-form-item>
             <el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.connect_timeout')" prop="configuration.connectTimeout">
-              <el-input v-model="form.configuration.connectTimeout" autocomplete="off"  type="number" min="0"/>
+              <el-input v-model="form.configuration.connectTimeout" autocomplete="off" type="number" min="0"/>
             </el-form-item>
 
           </el-collapse-item>
@@ -114,7 +114,8 @@ export default {
   },
   data() {
     return {
-      form: { configuration: {
+      form: {
+        configuration: {
           initialPoolSize: 5,
           minPoolSize: 5,
           maxPoolSize: 50,
@@ -122,7 +123,8 @@ export default {
           acquireIncrement: 5,
           idleConnectionTestPeriod: 5,
           connectTimeout: 5
-        }},
+        }
+      },
       rule: {
         name: [{ required: true, message: this.$t('datasource.input_name'), trigger: 'blur' },
           { min: 2, max: 25, message: this.$t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
@@ -191,29 +193,28 @@ export default {
       this.form = Object.assign({}, row)
       this.originConfiguration = this.form.configuration
       this.form.configuration = JSON.parse(this.form.configuration)
-      if(!this.form.configuration.initialPoolSize){
+      if (!this.form.configuration.initialPoolSize) {
         this.form.configuration.initialPoolSize = 5
       }
-      if(!this.form.configuration.minPoolSize){
+      if (!this.form.configuration.minPoolSize) {
         this.form.configuration.minPoolSize = 5
       }
-      if(!this.form.configuration.maxPoolSize){
+      if (!this.form.configuration.maxPoolSize) {
         this.form.configuration.maxPoolSize = 50
       }
-      if(!this.form.configuration.maxIdleTime){
+      if (!this.form.configuration.maxIdleTime) {
         this.form.configuration.maxIdleTime = 30
       }
-      if(!this.form.configuration.acquireIncrement){
+      if (!this.form.configuration.acquireIncrement) {
         this.form.configuration.acquireIncrement = 5
       }
-      if(!this.form.configuration.idleConnectionTestPeriod){
+      if (!this.form.configuration.idleConnectionTestPeriod) {
         this.form.configuration.idleConnectionTestPeriod = 5
       }
-      if(!this.form.configuration.connectTimeout){
+      if (!this.form.configuration.connectTimeout) {
         this.form.configuration.connectTimeout = 5
       }
     },
-
     reset() {
       this.$refs.dsForm.resetFields()
     },
@@ -222,8 +223,8 @@ export default {
         this.$message.error(this.$t('datasource.please_choose_schema'))
         return
       }
-      if(this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0 || this.form.configuration.maxIdleTime < 0
-        || this.form.configuration.acquireIncrement < 0 || this.form.configuration.idleConnectionTestPeriod < 0 || this.form.configuration.connectTimeout < 0){
+      if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0 || this.form.configuration.maxIdleTime < 0
+        || this.form.configuration.acquireIncrement < 0 || this.form.configuration.idleConnectionTestPeriod < 0 || this.form.configuration.connectTimeout < 0) {
         this.$message.error(this.$t('datasource.no_less_then_0'))
         return
       }