diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 92bb45d204..dcbef97a90 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -9,7 +9,7 @@
         <el-col>
           <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
             <el-form-item :label="$t('chart.color')" class="form-item">
-              <colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />
+              <el-color-picker v-model="colorForm.color" style="cursor: pointer;z-index: 1004;" @change="changeBackgroundStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
               <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index 069954d350..a095862393 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -34,7 +34,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />
+              <el-color-picker v-model="legendForm.textStyle.color" style="cursor: pointer;z-index: 999;" @change="changeLegendStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.text_h_position')" class="form-item">
               <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue
index f9be20bc1c..ceb6e763ec 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -12,7 +12,7 @@
               <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
             </el-form-item>
             <el-form-item :label="$t('chart.color')" class="form-item">
-              <colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+              <el-color-picker v-model="splitForm.name.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
               <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
@@ -23,13 +23,13 @@
               <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
             </el-form-item>
             <el-form-item :label="$t('chart.axis_color')" class="form-item">
-              <colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+              <el-color-picker v-model="splitForm.axisLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label')" class="form-item">
               <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
             </el-form-item>
             <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-              <colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+              <el-color-picker v-model="splitForm.axisLabel.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
               <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
@@ -40,7 +40,7 @@
               <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
             </el-form-item>
             <el-form-item :label="$t('chart.split_color')" class="form-item">
-              <colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+              <el-color-picker v-model="splitForm.splitLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeSplitStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.shadow')" class="form-item">
               <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index f67c4b42cd..04b2987196 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -28,7 +28,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />
+              <el-color-picker v-model="titleForm.color" style="cursor: pointer;z-index: 999;" @change="changeTitleStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.text_h_position')" class="form-item">
               <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 9b7ae420b0..cbb988ba02 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -22,7 +22,7 @@
               <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-              <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
+              <el-color-picker v-model="axisForm.nameTextStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeXAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
               <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
@@ -35,7 +35,7 @@
             </el-form-item>
             <span v-show="axisForm.splitLine.show">
               <el-form-item :label="$t('chart.axis_color')" class="form-item">
-                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
+                <el-color-picker v-model="axisForm.splitLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeXAxisStyle" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
                 <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
@@ -54,7 +54,7 @@
             </el-form-item>
             <span v-show="axisForm.axisLabel.show">
               <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
+                <el-color-picker v-model="axisForm.axisLabel.color" style="cursor: pointer;z-index: 1004;" @change="changeXAxisStyle" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
                 <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 2af4893f26..f44934bb2c 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -22,7 +22,7 @@
               <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
-              <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
+              <el-color-picker v-model="axisForm.nameTextStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeYAxisStyle" />
             </el-form-item>
             <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
               <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
@@ -35,7 +35,7 @@
             </el-form-item>
             <span v-show="axisForm.splitLine.show">
               <el-form-item :label="$t('chart.axis_color')" class="form-item">
-                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
+                <el-color-picker v-model="axisForm.splitLine.lineStyle.color" style="cursor: pointer;z-index: 1004;" @change="changeYAxisStyle" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
                 <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
@@ -54,7 +54,7 @@
             </el-form-item>
             <span v-show="axisForm.axisLabel.show">
               <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
-                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
+                <el-color-picker v-model="axisForm.axisLabel.color" style="cursor: pointer;z-index: 1004;" @change="changeYAxisStyle" />
               </el-form-item>
               <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
                 <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 1baffa05a0..c6248dfdf6 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -21,21 +21,21 @@
               </el-form-item>
 
               <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
-                <colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
+                <el-color-picker v-model="colorForm.dimensionColor" style="cursor: pointer;z-index: 1003;" @change="changeColorCase" />
               </el-form-item>
               <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
-                <colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
+                <el-color-picker v-model="colorForm.quotaColor" style="cursor: pointer;z-index: 1004;" @change="changeColorCase" />
               </el-form-item>
             </div>
             <div v-if="sourceType==='view' || sourceType==='panelTable'">
               <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
-                <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
+                <el-color-picker v-model="colorForm.tableHeaderBgColor" style="cursor: pointer;z-index: 1002;" @change="changeColorCase" />
               </el-form-item>
               <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
-                <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
+                <el-color-picker v-model="colorForm.tableItemBgColor" style="cursor: pointer;z-index: 1003;" @change="changeColorCase" />
               </el-form-item>
               <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
-                <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
+                <el-color-picker v-model="colorForm.tableFontColor" style="cursor: pointer;z-index: 1004;" @change="changeColorCase" />
               </el-form-item>
               <!--              暂时不支持该功能-->
               <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index 7695ef9779..52e9132019 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -21,7 +21,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
+              <el-color-picker v-model="labelForm.color" style="cursor: pointer;z-index: 999;" @change="changeLabelAttr" />
             </el-form-item>
             <el-form-item :label="$t('chart.label_position')" class="form-item">
               <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
@@ -54,7 +54,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
+              <el-color-picker v-model="labelForm.color" style="cursor: pointer;z-index: 999;" @change="changeLabelAttr" />
             </el-form-item>
             <el-form-item class="form-item">
               <span slot="label">
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 575be0d1e4..78133fcc37 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -24,7 +24,7 @@
               </el-select>
             </el-form-item>
             <el-form-item :label="$t('chart.text_color')" class="form-item">
-              <colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />
+              <el-color-picker v-model="tooltipForm.textStyle.color" style="cursor: pointer;z-index: 999;" @change="changeTooltipAttr" />
             </el-form-item>
             <el-form-item class="form-item">
               <span slot="label">
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
index 6df37ee2cf..3c9e9f1477 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
@@ -12,7 +12,7 @@
               <el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
             </el-col>
             <el-col :span="18">
-              <colorPicker v-model="panel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" />
+              <el-color-picker v-model="panel.color" style="cursor: pointer;z-index: 1004;" />
             </el-col>
           </el-row>
           <el-row style="height: 60px;margin-top:10px;overflow: hidden">