diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 213041cd4..72baf89fc 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -345,3 +345,8 @@
   width: 100%;
   box-sizing: border-box;
 }
+.no-animation {
+  .vue-grid-item {
+    transition: none
+  }
+}
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 382b126f4..7479ef0b4 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -3,6 +3,7 @@
     <grid-layout
       ref="layout"
       v-if="gridLayoutShow"
+      :class="firstInit ? 'no-animation' : ''"
       :col-num="12"
       :maxRows="12"
       :is-draggable="!panelLock"
@@ -124,6 +125,7 @@ export default {
       fromRoute,
       gridLayoutLoading: false,
       gridLayoutShow: false,
+      firstInit: true,
       filter: {}, // chart列表查询条件
       copyDataList: [],
       noData: false, // no data
@@ -267,7 +269,7 @@ export default {
     }
   },
   created () {
-
+    this.firstInit = true
   },
   mounted () {
     this.init()
@@ -281,6 +283,7 @@ export default {
       deep: true,
       handler (n, o) {
         this.gridLayoutShow = false
+        this.firstInit = true
         this.gridLayoutLoading = true
         this.noData = !n || n.length < 1
         const tempList = n.map(item => {
@@ -322,6 +325,9 @@ export default {
           setTimeout(() => {
             this.gridLayoutShow = true
           })
+          setTimeout(() => {
+            this.firstInit = false
+          },200)
           this.gridLayoutLoading = false
         })
       }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 965a9dfb0..c71fbf303 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -25,14 +25,15 @@
               <div v-if="systemNameShow[0].error"  class="el-form-item__error" style="top: 10px;left: 164px"> {{systemNameShow[0].error}}</div>
         </span>
       </div>
-      <div class="system-chart-config" v-loading="loading" v-for="(item, index) in chartConfig.param.datasource " :key="index">
+      <transition name="el-zoom-in-top">
+        <div class="system-chart-config" v-loading="loading" v-for="(item, index) in chartConfig.param.datasource " :key="index" v-show="systemNameShow[0].show">
         <div class="system-chart-config-left">
           <ul>
             <li
               v-for="(system,index1) in systemData"
               :key="index1"
               class="system-chart-item"
-              :class="item.type === system.system ? 'is-select' : ''"
+              :class="system.name == chartConfig.param.datasource[index].type  ? 'is-select' : ''"
               @click="changeSystem(system, index)"
             >{{system.name}}</li>
           </ul>
@@ -44,7 +45,7 @@
               class="form-item--half-width"
               prop="param.systemGroup"
             >
-              <el-select size="small" v-model="item.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange(index)">
+              <el-select size="small" v-model="item.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange(index)"   popper-class="right-box-select-top prevent-clickoutside">
                   <el-option v-for="group in groupList" :value="group.name" :key="group.name" :label="group.name"/>
               </el-select>
             </el-form-item>
@@ -54,7 +55,7 @@
               class="form-item--half-width"
               prop="param.systemSelect"
             >
-              <el-select size="small" v-model="item.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange(index)">
+              <el-select size="small" v-model="item.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange(index)" popper-class="right-box-select-top prevent-clickoutside">
                 <el-option v-for="selectItem in selectList" :value="selectItem.name" :key="selectItem.name" :label="selectItem.name"/>
               </el-select>
             </el-form-item>
@@ -90,6 +91,7 @@
           </div>
         </div>
       </div>
+      </transition>
       <!--title-->
       <div class="form__sub-title">
         <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>