diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
index 3c9e9f1477..0dd626b352 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">
-              <el-color-picker v-model="panel.color" style="cursor: pointer;z-index: 1004;" />
+              <el-color-picker v-model="panel.color" size="mini" style="cursor: pointer;z-index: 1004;" />
             </el-col>
           </el-row>
           <el-row style="height: 60px;margin-top:10px;overflow: hidden">
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
new file mode 100644
index 0000000000..1e6e1e162e
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelBackgroundColorSelector.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <background-color-selector :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
+
+export default {
+  components: { BackgroundColorSelector },
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    onChangeBackgroundForm(colorForm) {
+      this.$emit('onChangeBackgroundForm', colorForm)
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+  .avatar-uploader>>>.el-upload {
+    width: 100px;
+    height: 60px;
+    line-height: 70px;
+  }
+  .avatar-uploader>>>.el-upload-list li{
+    width: 100px !important;
+    height: 60px !important;
+  }
+  .disabled>>>.el-upload--picture-card {
+    display: none;
+  }
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .form-item-slider>>>.el-form-item__label{
+    font-size: 12px;
+    line-height: 38px;
+  }
+  .form-item>>>.el-form-item__label{
+    font-size: 12px;
+  }
+  .el-select-dropdown__item{
+    padding: 0 20px;
+  }
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
new file mode 100644
index 0000000000..79c710b340
--- /dev/null
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelColorSelector.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <color-selector :source-type="sourceType" :chart="chart" @onColorChange="onColorChange" />
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
+
+export default {
+  components: { ColorSelector },
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    },
+    sourceType: {
+      type: String,
+      default: 'view',
+      required: false
+    }
+  },
+  methods: {
+    onColorChange(colorForm) {
+      this.$emit('onColorChange', colorForm)
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+  .avatar-uploader>>>.el-upload {
+    width: 100px;
+    height: 60px;
+    line-height: 70px;
+  }
+  .avatar-uploader>>>.el-upload-list li{
+    width: 100px !important;
+    height: 60px !important;
+  }
+  .disabled>>>.el-upload--picture-card {
+    display: none;
+  }
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .form-item-slider>>>.el-form-item__label{
+    font-size: 12px;
+    line-height: 38px;
+  }
+  .form-item>>>.el-form-item__label{
+    font-size: 12px;
+  }
+  .el-select-dropdown__item{
+    padding: 0 20px;
+  }
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+</style>
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 30661989fc..1596a089f1 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -17,17 +17,17 @@
         <el-collapse-item :title="$t('chart.module_style')" name="component">
           <el-row style="background-color: #f7f8fa; margin: 5px">
             <!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
-            <background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+            <panel-background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-            <color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+            <panel-color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('panel.table')" name="table">
           <el-row style="background-color: #f7f8fa; margin: 5px">
-            <color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
+            <panel-color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
           </el-row>
         </el-collapse-item>
       </el-collapse>
@@ -38,10 +38,10 @@
 <script>
 import slider from './PreSubject/Slider'
 import BackgroundSelector from './PanelStyle/BackgroundSelector'
+import PanelBackgroundColorSelector from './PanelStyle/PanelBackgroundColorSelector'
+import PanelColorSelector from './PanelStyle/PanelColorSelector'
 import ComponentGap from './PanelStyle/ComponentGap'
 
-import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
-import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import bus from '@/utils/bus'
@@ -51,8 +51,8 @@ export default {
     slider,
     BackgroundSelector,
     ComponentGap,
-    ColorSelector,
-    BackgroundColorSelector
+    PanelColorSelector,
+    PanelBackgroundColorSelector
   },
   data() {
     return {