diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 33a7063acc..d3763ce312 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -64,13 +64,13 @@
                   :key="index"
                   style="display: flex;align-items: center;margin: 2px 0;"
                 >
-                  <span class="span-label" :title="item.name">{{ item.name }}</span>
                   <el-color-picker
                     v-model="item.color"
                     class="color-picker-style"
                     :predefine="predefineColors"
                     @change="switchCustomColor(index)"
                   />
+                  <span class="span-label" :title="item.name">{{ item.name }}</span>
                 </div>
               </div>
 
@@ -394,17 +394,18 @@ export default {
   }
 
 .span-label {
-  width: 100px;
+  width: 300px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
+  padding: 0 8px;
 }
 
 .custom-color-style {
   height: 300px;
   overflow-y: auto;
-  padding: 4px;
+  padding: 4px 12px;
   border: 1px solid #e6e6e6;
 }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
index 902097eaed..eab065a1ef 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelectorExt.vue
@@ -1,3 +1,4 @@
+<!--暂时没用，但保留-->
 <template>
   <div style="width: 100%">
     <el-col>