diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index d853803129..a0ce5881e3 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -228,6 +228,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -265,6 +266,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -307,6 +309,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -378,6 +382,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -450,6 +456,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -520,6 +528,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -588,6 +598,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'label-selector-ant-v': [
@@ -647,6 +658,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -718,6 +731,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -788,6 +803,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -838,6 +855,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -888,6 +907,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -937,6 +958,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'label-selector-ant-v': [
@@ -1015,6 +1037,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1081,6 +1105,8 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'colorPanel',
+        'customColor',
         'alpha'
       ],
       'label-selector-ant-v': [
@@ -1269,6 +1295,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1317,6 +1344,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1390,6 +1418,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1464,6 +1493,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1552,6 +1582,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1625,6 +1656,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1698,6 +1730,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1772,6 +1805,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1846,6 +1880,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1903,6 +1938,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -1962,6 +1998,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -2024,6 +2061,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -2074,6 +2112,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -2144,6 +2183,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
@@ -2199,6 +2239,7 @@ export const TYPE_CONFIGS = [
     propertyInner: {
       'color-selector': [
         'value',
+        'custom',
         'alpha'
       ],
       'size-selector': [
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 08293c58b9..4380729316 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -3,14 +3,14 @@
     <el-col>
       <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
         <div>
-          <el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
+          <el-form-item :label="$t('chart.color_case')" class="form-item">
             <el-popover
               placement="bottom"
               width="400"
               trigger="click"
             >
               <div style="padding: 6px 10px;">
-                <div>
+                <div v-show="showProperty('value')">
                   <span class="color-label">{{ $t('chart.system_case') }}</span>
                   <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
                     <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
@@ -22,23 +22,58 @@
                   </el-select>
                   <el-button size="mini" type="text" style="margin-left: 2px;" @click="resetCustomColor">{{ $t('commons.reset') }}</el-button>
                 </div>
-                <div style="display: flex;align-items: center;margin-top: 10px;">
-                  <span class="color-label">{{ $t('chart.custom_case') }}</span>
-                  <span>
-                    <el-radio-group v-model="customColor" class="color-type">
-                      <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
-                        <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
-                      </el-radio>
-                    </el-radio-group>
-                  </span>
+                <!--自定义配色方案-->
+                <div
+                  v-show="showProperty('custom')"
+                >
+                  <div style="display: flex;align-items: center;margin-top: 10px;">
+                    <span class="color-label">{{ $t('chart.custom_case') }}</span>
+                    <span>
+                      <el-radio-group v-model="customColor" class="color-type">
+                        <el-radio v-for="(c,index) in colorForm.colors" :key="index" :label="c" style="padding: 2px;" @change="switchColor(index)">
+                          <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+                        </el-radio>
+                      </el-radio-group>
+                    </span>
+                  </div>
+                  <div style="display: flex;align-items: center;margin-top: 10px;">
+                    <span class="color-label" />
+                    <span>
+                      <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
+                    </span>
+                  </div>
                 </div>
-                <div style="display: flex;align-items: center;margin-top: 10px;">
+                <!--自定义系列或维度枚举值颜色-->
+                <div v-show="showProperty('colorPanel')" style="display: flex;align-items: center;margin-top: 10px;">
                   <span class="color-label" />
                   <span>
-                    <el-color-picker v-model="customColor" class="color-picker-style" :predefine="predefineColors" @change="switchColorCase" />
+                    <span v-for="(c,index) in colorForm.colors" :key="index" style="padding: 2px;">
+                      <span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
+                    </span>
                   </span>
                 </div>
               </div>
+
+              <div
+                v-if="!batchOptStatus"
+                v-show="showProperty('customColor')"
+                class="custom-color-style"
+              >
+                <div
+                  v-for="(item,index) in colorForm.seriesColors"
+                  :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)"
+                  />
+                </div>
+              </div>
+
               <div slot="reference" style="cursor: pointer;margin-top: 2px;width: 180px;">
                 <span v-for="(c,index) in colorForm.colors" :key="index" :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
               </div>
@@ -81,6 +116,8 @@
 
 <script>
 import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
+import { getColors } from '@/views/chart/chart/util'
+import { mapState } from 'vuex'
 
 export default {
   name: 'ColorSelector',
@@ -209,6 +246,11 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapState([
+      'batchOptStatus'
+    ])
+  },
   mounted() {
     this.init()
   },
@@ -227,6 +269,10 @@ export default {
       this.customColor = this.colorForm.colors[0]
       this.colorIndex = 0
 
+      // reset custom color
+      this.colorForm.seriesColors = []
+      this.initCustomColor(true)
+
       this.changeColorCase(modifyName)
     },
     changeColorCase(modifyName) {
@@ -254,6 +300,8 @@ export default {
           }
 
           this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
+
+          this.initCustomColor()
         }
       }
     },
@@ -273,6 +321,24 @@ export default {
     },
     showProperty(property) {
       return this.propertyInner.includes(property)
+    },
+
+    switchCustomColor(index) {
+      this.colorForm.seriesColors[index].isCustom = true
+      this.switchColorCase()
+    },
+
+    initCustomColor(reset) {
+      if (this.chart.render && this.chart.render === 'antv' &&
+        (this.chart.type.includes('bar') ||
+          this.chart.type.includes('line') ||
+          this.chart.type.includes('pie') ||
+          this.chart.type === 'funnel' ||
+          this.chart.type === 'radar' ||
+          this.chart.type === 'scatter')) {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
+      }
     }
   }
 }
@@ -326,4 +392,19 @@ export default {
   .el-radio.is-checked{
     border: 1px solid #0a7be0;
   }
+
+.span-label {
+  width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.custom-color-style {
+  height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid #e6e6e6;
+}
 </style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index b5f4b023c8..364cdfa3b9 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1282,6 +1282,7 @@ export default {
       this.resetDrill()
       this.initFromPanel()
       this.getChart(this.param.id)
+      this.getData(this.param.id)
     },
     bindPluginEvent() {
       bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)