diff --git a/frontend/src/components/GradientColorSelector/index.vue b/frontend/src/components/GradientColorSelector/index.vue
index 8bffc71dab..1dcec6bf38 100644
--- a/frontend/src/components/GradientColorSelector/index.vue
+++ b/frontend/src/components/GradientColorSelector/index.vue
@@ -106,6 +106,7 @@
                 <el-color-picker
                   v-else
                   v-model="option.colors[index]"
+                  popper-class="gradient-picker-dropdown"
                   @change="switchColorItem(option.colors, option.value)"
                 />
               </span>
@@ -423,4 +424,7 @@ export default {
   width: 20px;
   height: 20px;
 }
+.gradient-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
 </style>
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index ef6702181f..b6d2577ca1 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -47,6 +47,9 @@
       </div>
 
     </div>
+    <div
+      :class="loading ? 'symbol-map-loading' : 'symbol-map-loaded'"
+    />
   </div>
 </template>
 
@@ -167,7 +170,8 @@ export default {
       borderRadius: '0px',
       mapCenter: null,
       linkageActiveParam: null,
-      buttonTextColor: null
+      buttonTextColor: null,
+      loading: true
     }
   },
 
@@ -222,6 +226,7 @@ export default {
       }
     },
     preDraw() {
+      this.loading = true
       // 基于准备好的dom，初始化echarts实例
       // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
       const that = this
@@ -253,6 +258,10 @@ export default {
             that.$refs.viewTrack.trackButtonClick()
           }
         })
+        this.myChart.off('finished')
+        this.myChart.on('finished', () => {
+          this.loading = false
+        })
       })
     },
     loadThemeStyle() {