diff --git a/frontend/src/components/GradientColorSelector/DeColorPicker.vue b/frontend/src/components/GradientColorSelector/DeColorPicker.vue
index 7bbc039149..8a2831b96f 100644
--- a/frontend/src/components/GradientColorSelector/DeColorPicker.vue
+++ b/frontend/src/components/GradientColorSelector/DeColorPicker.vue
@@ -1,486 +1,540 @@
 <template>
-	<div class="c__color-picker">
+  <div class="c__color-picker">
 
-		<el-popover
-			placement="bottom"
-			title=""
-			width="314"
-			poper-class=""
-			trigger="click"
-			v-model="visible"
-			@hide="whenHide"
-		>
-		
-			
-			<!-- 颜色面板 -->
-			<div class="" v-show="visible">
-				<div class="gradient-div">
+    <el-popover
+      v-model="visible"
+      placement="bottom"
+      title=""
+      width="314"
+      poper-class=""
+      trigger="click"
+      @hide="whenHide"
+    >
 
-					<div class="gradient-check" :class="activeIndex === 0 ? 'active' : ''" @click="checkGradient(0)">
-						<div :style="{background: startColor}"></div>
-					</div>
-					<span class="gradient-div-span" :style="{background: gradientColor}" />
-					<div class="gradient-check" :class="activeIndex === 1 ? 'active' : ''" @click="checkGradient(1)">
-						<div :style="{background: endColor}"></div>
-					</div>
-				</div>
-				<!-- 画布 -->
-				<div class="c__canvas">
-					<canvas :id="canvasId" :width="width" :height="height" @click="onCanvasClick"
-						@mousedown="onCanvasMousedown"></canvas>
-					<!-- 当前选中小块 -->
-					<em class="c__cur" :id="curId" @mousedown="function(e){onCanvasMousedown(e,'cur')}"></em>
-					<!-- 左侧色条选中小块 -->
-					<em class="c__bar" :id="barId" @mousedown="function(e){onCanvasMousedown(e,'bar')}"></em>
-					<!-- 透明度控制条 -->
-					<div class="c__alpha-silder" v-if="showAlpha">
-						<div class="c__alpha-silder-bar" :style="alphaBarStyle" @click="onAlphaClick" @mousedown="onAlphaMousedown"></div>
-						<em class="c__alpha" :id="alphaId" :style="{left:alpha*100 + '%'}" @mousedown="onAlphaMousedown"></em>
-					</div>
-				</div>
-				<!-- 底部按钮栏 -->
-				<div class="c__control">
-					<input class="c__input" :value="innerValues[0]" />
-					<input class="c__input" :value="innerValues[1]" />
-					<div class="c__btns">
-						<div class="c__btn-clear" @click="curColor=''">清空</div>
-						<div class="c__btn-confirm" @click="confirm">确定</div>
-					</div>
-				</div>
-			</div>
-			<!-- 颜色显示方块 -->
-			<div class="c__block" slot="reference" :style="{background: formatBgColor(value)}" />
-		</el-popover>
-	</div>
+      <!-- 颜色面板 -->
+      <div
+        v-show="visible"
+        class=""
+      >
+        <div class="gradient-div">
+
+          <div
+            class="gradient-check"
+            :class="activeIndex === 0 ? 'active' : ''"
+            @click="checkGradient(0)"
+          >
+            <div :style="{background: startColor}" />
+          </div>
+          <span
+            class="gradient-div-span"
+            :style="{background: gradientColor}"
+          />
+          <div
+            class="gradient-check"
+            :class="activeIndex === 1 ? 'active' : ''"
+            @click="checkGradient(1)"
+          >
+            <div :style="{background: endColor}" />
+          </div>
+        </div>
+        <!-- 画布 -->
+        <div class="c__canvas">
+          <canvas
+            :id="canvasId"
+            :width="width"
+            :height="height"
+            @click="onCanvasClick"
+            @mousedown="onCanvasMousedown"
+          />
+          <!-- 当前选中小块 -->
+          <em
+            :id="curId"
+            class="c__cur"
+            @mousedown="function(e){onCanvasMousedown(e,'cur')}"
+          />
+          <!-- 左侧色条选中小块 -->
+          <em
+            :id="barId"
+            class="c__bar"
+            @mousedown="function(e){onCanvasMousedown(e,'bar')}"
+          />
+          <!-- 透明度控制条 -->
+          <div
+            v-if="showAlpha"
+            class="c__alpha-silder"
+          >
+            <div
+              class="c__alpha-silder-bar"
+              :style="alphaBarStyle"
+              @click="onAlphaClick"
+              @mousedown="onAlphaMousedown"
+            />
+            <em
+              :id="alphaId"
+              class="c__alpha"
+              :style="{left:alpha*100 + '%'}"
+              @mousedown="onAlphaMousedown"
+            />
+          </div>
+        </div>
+        <!-- 底部按钮栏 -->
+        <div class="c__control">
+          <input
+            class="c__input"
+            :value="innerValues[0]"
+          >
+          <input
+            class="c__input"
+            :value="innerValues[1]"
+          >
+          <div class="c__btns">
+            <div
+              class="c__btn-clear"
+              @click="curColor=''"
+            >清空</div>
+            <div
+              class="c__btn-confirm"
+              @click="confirm"
+            >确定</div>
+          </div>
+        </div>
+      </div>
+      <!-- 颜色显示方块 -->
+      <div
+        slot="reference"
+        class="c__block"
+        :style="{background: formatBgColor(value)}"
+      />
+    </el-popover>
+  </div>
 </template>
 
 <script>
-	export default {
-		name: "DeColorPicker",
-		props: {
-			/* 绑定的色值 */
-			value: {
-				type: Array,
-				default:['rgba(144,202,249,1)', 'rgba(1,87,155,1)']
-			},
-			/* 是否禁用 */
-			disabled: {
-				type: Boolean,
-				default: false
-			},
-			/* 是否使用透明度 */
-			showAlpha: {
-				type: Boolean,
-				default: false
-			},
-			/* 颜色类型，可选值：hex，rgb */
-			colorFormat: {
-				type: String,
-				default: 'hex'
-			},
-			baseId: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				canvasId: this.baseId + 'canvas-' + Date.now(), // 画布 id，防止多组件时冲突
-				curId: this.baseId + 'cur-' + Date.now(), // 当前选中小块 id，防止多组件时冲突
-				barId: this.baseId + 'bar-' + Date.now(), // 左侧色条选中小块 id，防止多组件时冲突
-				alphaId: this.baseId + 'alpha-' + Date.now(), // 透明度选中小块 id，防止多组件时冲突
-				canvas: null, // 画布
-				ctx: null, // 画布实例
-				curColor: '', // 当前选中颜色
-				activeColor: '', // bar选中颜色
-				alpha: 1, // 透明度
-				width: 286, // canvas宽度
-				height: 200, // canvas高度
-				activeIndex: 0,
-				innerValues: {
-					0: this.value[0],
-					1: this.value[1],
-				},
-				visible: false
-			}
-		},
-		computed:{
-			alphaBarStyle(){
-				return 'background: linear-gradient(to right, rgba(255, 69, 0, 0) 0%, ' + this.activeColor + ' 100%);';
-			},
-			startColor() {
-				return this.innerValues[0]
-			},
-			endColor() {
-				return this.innerValues[1]
-			},
-			gradientColor() {
-				return 'linear-gradient(90.0deg,'+this.innerValues[0]+' 0.0,'+this.innerValues[1]+' 100.0%)'
-			},
-			valueJson() {
-				return JSON.stringify(this.value)
-			}
-		},
-		watch: {
-			innerValues: {
-				handler(old, val) {
-					if(old === val) return
-					
-					this.curColor = this.innerValues[this.activeIndex];
-					this.resetCurColor();
-				}
-			}
-			
-		},
-		created() {
-			var _this = this;
-			JSON.parse(JSON.stringify(this.value)).forEach((item, index) => {
-				this.innerValues[index] = item
-			})
-			this.setAlpha()
-			this.handler = function(e) {
-				// _this.visible = false
-			}
-			document.body.addEventListener('click', this.handler)
-			this.$nextTick(() => {
-				this.curColor = this.innerValues[this.activeIndex];
-				this.activeColor = this.innerValues[this.activeIndex];
-				this.resetCurColor();
-				this.init();
-			})
-		},
-		beforeDestroy() {
-			document.body.removeEventListener('click', this.handler);
-		},
-		methods: {
-			setAlpha() {
-				const curColor = this.innerValues[this.activeIndex]
-				var reg = /^(rgb|RGB)/;
-				if (!reg.test(curColor)){
-					curColor = this.hex2rgb(curColor.slice(0,7));
-				}
-				var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, "").split(',');
-				if(colorArr.length === 4) {
-					this.alpha = colorArr[3]
-					return
-				}
-				this.alpha = 1
-				
-			},
-			formatBgColor(color) {
-				return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)'
-			},
-			triggerHide() {
-				this.visible = false
-			},
-			whenHide() {
-				JSON.parse(JSON.stringify(this.value)).forEach((item, index) => {
-					this.innerValues[index] = item
-				})
-				this.$nextTick(() => {
-					this.curColor = this.innerValues[this.activeIndex];
-					this.activeColor = this.innerValues[this.activeIndex];
-					this.resetCurColor();
-					this.init();
-				})
-			},
-			/* 初始化 */
-			init() {
-				this.canvas = document.getElementById(this.canvasId);
-				this.$nextTick(() => {
-					this.ctx = this.canvas.getContext('2d');
-					this.makeColorBar();
-					this.makeColorBox(this.innerValues[this.activeIndex]);
-				})
-				
-			},
-			/* 绘制左侧面板颜色选择条 */
-			makeColorBar() {
-				var gradientBar = this.ctx.createLinearGradient(0, 0, 0, this.height);
-				gradientBar.addColorStop(0, '#f00');
-				gradientBar.addColorStop(1 / 6, '#f0f');
-				gradientBar.addColorStop(2 / 6, '#00f');
-				gradientBar.addColorStop(3 / 6, '#0ff');
-				gradientBar.addColorStop(4 / 6, '#0f0');
-				gradientBar.addColorStop(5 / 6, '#ff0');
-				gradientBar.addColorStop(1, '#f00');
+export default {
+  name: 'DeColorPicker',
+  props: {
+    /* 绑定的色值 */
+    value: {
+      type: Array,
+      default: () => {
+        return ['rgba(144,202,249,1)', 'rgba(1,87,155,1)']
+      }
+    },
+    /* 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /* 是否使用透明度 */
+    showAlpha: {
+      type: Boolean,
+      default: false
+    },
+    /* 颜色类型，可选值：hex，rgb */
+    colorFormat: {
+      type: String,
+      default: 'hex'
+    },
+    baseId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      canvasId: this.baseId + 'canvas-' + Date.now(), // 画布 id，防止多组件时冲突
+      curId: this.baseId + 'cur-' + Date.now(), // 当前选中小块 id，防止多组件时冲突
+      barId: this.baseId + 'bar-' + Date.now(), // 左侧色条选中小块 id，防止多组件时冲突
+      alphaId: this.baseId + 'alpha-' + Date.now(), // 透明度选中小块 id，防止多组件时冲突
+      canvas: null, // 画布
+      ctx: null, // 画布实例
+      curColor: '', // 当前选中颜色
+      activeColor: '', // bar选中颜色
+      alpha: 1, // 透明度
+      width: 286, // canvas宽度
+      height: 200, // canvas高度
+      activeIndex: 0,
+      innerValues: {
+        0: this.value[0],
+        1: this.value[1]
+      },
+      visible: false
+    }
+  },
+  computed: {
+    alphaBarStyle() {
+      return 'background: linear-gradient(to right, rgba(255, 69, 0, 0) 0%, ' + this.activeColor + ' 100%);'
+    },
+    startColor() {
+      return this.innerValues[0]
+    },
+    endColor() {
+      return this.innerValues[1]
+    },
+    gradientColor() {
+      return 'linear-gradient(90.0deg,' + this.innerValues[0] + ' 0.0,' + this.innerValues[1] + ' 100.0%)'
+    },
+    valueJson() {
+      return JSON.stringify(this.value)
+    }
+  },
+  watch: {
+    innerValues: {
+      handler(old, val) {
+        if (old === val) return
 
-				this.ctx.fillStyle = gradientBar;
-				this.ctx.fillRect(0, 0, 20, this.height);
-			},
-			/* 绘制颜色选择区域 */
-			makeColorBox(color) {
-				var gradientBase = this.ctx.createLinearGradient(30, 0, this.width, 0);
-				gradientBase.addColorStop(1, color);
-				gradientBase.addColorStop(0, 'rgba(255,255,255,1)');
-				this.ctx.fillStyle = gradientBase;
-				this.ctx.fillRect(30, 0, this.width, this.height);
+        this.curColor = this.innerValues[this.activeIndex]
+        this.resetCurColor()
+      }
+    }
 
-				var my_gradient1 = this.ctx.createLinearGradient(0, 0, 0, this.height);
-				my_gradient1.addColorStop(0, 'rgba(0,0,0,0)');
-				my_gradient1.addColorStop(1, 'rgba(0,0,0,1)');
-				this.ctx.fillStyle = my_gradient1;
-				this.ctx.fillRect(30, 0, this.width, this.height);
-			},
-			/* canvas点击 */
-			onCanvasClick(e) {
-				var ePos = {
-					x: e.offsetX || e.layerX,
-					y: e.offsetY || e.layerY
-				}
-				var rgbaStr = '#000';
-				if (ePos.x >= 0 && ePos.x < 20) {
-					// in
-					rgbaStr = this.getRgbaAtPoint(ePos, 'bar');
-					var barBlock = document.getElementById(this.barId);
-					barBlock.style.top = ePos.y + 'px';
-					this.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')');
-					this.innerValues[this.activeIndex] ='rgba(' + rgbaStr.slice(0, 3).join() + ',' + this.alpha + ')'
-						
-					this.$emit('active-change', this.innerValues);
-				} else if (ePos.x >= 30) {
-					rgbaStr = this.getRgbaAtPoint(ePos, 'box');
-					var cur = document.getElementById(this.curId);
-					cur.style.left = ePos.x + 'px';
-					cur.style.top = ePos.y + 'px';
-				} else {
-					return;
-				}
-				this.setCurColor(rgbaStr);
-			},
-			/* canvas鼠标按下，绑定鼠标拖动函数 */
-			onCanvasMousedown(ev, type) {
-				var self = this;
-				var ePos = {
-					x: ev.layerX || ev.offsetX,
-					y: ev.layerY || ev.offsetY
-				}
-				var offsetTop = parseInt(ev.target.offsetTop);
-				var offsetLeft = parseInt(ev.target.offsetLeft);
-				if (type === 'cur' || (ePos.x >= 30 && ePos.x < 30 + this.width && ePos.y >= 0 && ePos.y < this.height)) {
-					var cur = document.getElementById(this.curId);
-					document.onmouseup = function() {
-						document.onmouseup = document.onmousemove = null;
-					}
-					document.onmousemove = function(e) {
-						try {
-							var pos = {
-								x: e.clientX - ev.clientX + ev.offsetX + offsetLeft,
-								y: e.clientY - ev.clientY + ev.offsetY + offsetTop
-							}
+  },
+  created() {
+    JSON.parse(JSON.stringify(this.value)).forEach((item, index) => {
+      this.innerValues[index] = item
+    })
+    this.setAlpha()
+    this.handler = function(e) {
+      // _this.visible = false
+    }
+    document.body.addEventListener('click', this.handler)
+    this.$nextTick(() => {
+      this.curColor = this.innerValues[this.activeIndex]
+      this.activeColor = this.innerValues[this.activeIndex]
+      this.resetCurColor()
+      this.init()
+    })
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('click', this.handler)
+  },
+  methods: {
+    setAlpha() {
+      let curColor = this.innerValues[this.activeIndex]
+      var reg = /^(rgb|RGB)/
+      if (!reg.test(curColor)) {
+        curColor = this.hex2rgb(curColor.slice(0, 7))
+      }
+      var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, '').split(',')
+      if (colorArr.length === 4) {
+        this.alpha = colorArr[3]
+        return
+      }
+      this.alpha = 1
+    },
+    formatBgColor(color) {
+      return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)'
+    },
+    triggerHide() {
+      this.visible = false
+    },
+    whenHide() {
+      JSON.parse(JSON.stringify(this.value)).forEach((item, index) => {
+        this.innerValues[index] = item
+      })
+      this.$nextTick(() => {
+        this.curColor = this.innerValues[this.activeIndex]
+        this.activeColor = this.innerValues[this.activeIndex]
+        this.resetCurColor()
+        this.init()
+      })
+    },
+    /* 初始化 */
+    init() {
+      this.canvas = document.getElementById(this.canvasId)
+      this.$nextTick(() => {
+        this.ctx = this.canvas.getContext('2d')
+        this.makeColorBar()
+        this.makeColorBox(this.innerValues[this.activeIndex])
+      })
+    },
+    /* 绘制左侧面板颜色选择条 */
+    makeColorBar() {
+      var gradientBar = this.ctx.createLinearGradient(0, 0, 0, this.height)
+      gradientBar.addColorStop(0, '#f00')
+      gradientBar.addColorStop(1 / 6, '#f0f')
+      gradientBar.addColorStop(2 / 6, '#00f')
+      gradientBar.addColorStop(3 / 6, '#0ff')
+      gradientBar.addColorStop(4 / 6, '#0f0')
+      gradientBar.addColorStop(5 / 6, '#ff0')
+      gradientBar.addColorStop(1, '#f00')
 
-							pos.x = pos.x <= 30 ? 30 : pos.x && (pos.x > self.width - 1 ? self.width - 1 : pos.x);
-							pos.y = pos.y <= 0 ? 0 : pos.y && (pos.y > self.height - 1 ? self.height - 1 : pos.y);
+      this.ctx.fillStyle = gradientBar
+      this.ctx.fillRect(0, 0, 20, this.height)
+    },
+    /* 绘制颜色选择区域 */
+    makeColorBox(color) {
+      var gradientBase = this.ctx.createLinearGradient(30, 0, this.width, 0)
+      gradientBase.addColorStop(1, color)
+      gradientBase.addColorStop(0, 'rgba(255,255,255,1)')
+      this.ctx.fillStyle = gradientBase
+      this.ctx.fillRect(30, 0, this.width, this.height)
 
-							var rgbaStr = self.getRgbaAtPoint(pos, 'box');
-							self.setCurColor(rgbaStr);
-							cur.style.left = pos.x + 'px';
-							cur.style.top = pos.y + 'px';
-						} catch (e) {
-						}
-					}
-				} else if (ePos.x <= 20 && ePos.y <= this.height) {
-					var bar = document.getElementById(this.barId);
-					document.onmouseup = function() {
-						document.onmouseup = document.onmousemove = null;
-					}
-					document.onmousemove = function(e) {
-						try {
-							var pos = {
-								x: 0,
-								y: e.clientY - ev.clientY + ev.offsetY + offsetTop
-							}
+      var my_gradient1 = this.ctx.createLinearGradient(0, 0, 0, this.height)
+      my_gradient1.addColorStop(0, 'rgba(0,0,0,0)')
+      my_gradient1.addColorStop(1, 'rgba(0,0,0,1)')
+      this.ctx.fillStyle = my_gradient1
+      this.ctx.fillRect(30, 0, this.width, this.height)
+    },
+    /* canvas点击 */
+    onCanvasClick(e) {
+      var ePos = {
+        x: e.offsetX || e.layerX,
+        y: e.offsetY || e.layerY
+      }
+      var rgbaStr = '#000'
+      if (ePos.x >= 0 && ePos.x < 20) {
+        // in
+        rgbaStr = this.getRgbaAtPoint(ePos, 'bar')
+        var barBlock = document.getElementById(this.barId)
+        barBlock.style.top = ePos.y + 'px'
+        this.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')')
+        this.innerValues[this.activeIndex] = 'rgba(' + rgbaStr.slice(0, 3).join() + ',' + this.alpha + ')'
 
-							pos.y = pos.y <= 0 ? 0 : pos.y && (pos.y > self.height - 1 ? self.height - 1 : pos
-								.y);
+        this.$emit('active-change', this.innerValues)
+      } else if (ePos.x >= 30) {
+        rgbaStr = this.getRgbaAtPoint(ePos, 'box')
+        var cur = document.getElementById(this.curId)
+        cur.style.left = ePos.x + 'px'
+        cur.style.top = ePos.y + 'px'
+      } else {
+        return
+      }
+      this.setCurColor(rgbaStr)
+    },
+    /* canvas鼠标按下，绑定鼠标拖动函数 */
+    onCanvasMousedown(ev, type) {
+      var self = this
+      var ePos = {
+        x: ev.layerX || ev.offsetX,
+        y: ev.layerY || ev.offsetY
+      }
+      var offsetTop = parseInt(ev.target.offsetTop)
+      var offsetLeft = parseInt(ev.target.offsetLeft)
+      if (type === 'cur' || (ePos.x >= 30 && ePos.x < 30 + this.width && ePos.y >= 0 && ePos.y < this.height)) {
+        var cur = document.getElementById(this.curId)
+        document.onmouseup = function() {
+          document.onmouseup = document.onmousemove = null
+        }
+        document.onmousemove = function(e) {
+          try {
+            var pos = {
+              x: e.clientX - ev.clientX + ev.offsetX + offsetLeft,
+              y: e.clientY - ev.clientY + ev.offsetY + offsetTop
+            }
 
-							var rgbaStr = self.getRgbaAtPoint(pos, 'box');
-							bar.style.top = pos.y + 'px';
-							self.activeColor = 'rgb(' + rgbaStr.slice(0, 3).join() + ')';
-							self.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')');
-							self.innerValues[self.activeIndex] = self.activeColor
-							self.$emit('active-change', self.innerValues);
-						} catch (e) {
-						}
-					}
-				}
-			},
-			/* 透明度控制条点击 */
-			onAlphaClick(e){
-				var x = e.offsetX || e.layerX;
-				var bar = document.getElementById(this.alphaId);
-				var parentNode = bar.parentNode;
-				this.alpha = parseFloat(x/parentNode.clientWidth).toFixed(2);
-				this.resetCurColor();
-			},
-			/* 透明度控制 */
-			onAlphaMousedown(ev){
-				var self = this;
-				var ePos = {
-					x: ev.layerX || ev.offsetX,
-					y: ev.layerY || ev.offsetY
-				}
-				var offsetTop = parseInt(ev.target.offsetTop);
-				var offsetLeft = parseInt(ev.target.offsetLeft);
-				var bar = document.getElementById(this.alphaId);
-				var parentNode = bar.parentNode;
-				document.onmouseup = function() {
-					document.onmouseup = document.onmousemove = null;
-				}
-				document.onmousemove = function(e) {
-					try {
-						var pos = {
-							x: e.clientX - ev.clientX + ev.offsetX + offsetLeft,
-							y: 0
-						}
-				
-						pos.x = pos.x <= 0 ? 0 : pos.x && (pos.x > parentNode.clientWidth ? parentNode.clientWidth : pos
-							.x);
-				
-						self.alpha = parseFloat(pos.x/parentNode.clientWidth).toFixed(2);
-						self.resetCurColor();
-					} catch (e) {
-					}
-				}
-			},
-			/* 透明度变化重新计算当前颜色值 */
-			resetCurColor(){
-				var curColor = this.curColor;
-				var alpha = this.alpha;
-				var reg = /^(rgb|RGB)/;
-				if (!reg.test(curColor)){
-					curColor = this.hex2rgb(curColor.slice(0,7));
-				}
-				var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, "").split(',');
-				colorArr[3] = alpha;
-				this.setCurColor(colorArr);
-			},
-			/* 设置当前颜色值 */
-			setCurColor(rgbaStr) {
-				var txt = 'a';
-				if (rgbaStr.length === 4 && parseFloat(rgbaStr[3]) === 1 || !this.showAlpha) {
-					rgbaStr = rgbaStr.slice(0, 3);
-					txt = '';
-				}
-				if (this.colorFormat === 'hex') {
-					this.curColor = this.rgb2hex('rgb' + txt + '(' + rgbaStr.join() + ')');
-				} else if (this.colorFormat === 'rgb') {
-					this.curColor = 'rgb' + txt + '(' + rgbaStr.join() + ')';
-				}
-				this.innerValues[this.activeIndex] = this.curColor
-				this.activeColor = this.innerValues[this.activeIndex];
-				
-				this.sendChange();
-			},
-			/* 确认按钮点击 */
-			confirm() {
-				const values = []
-				Object.keys(this.innerValues).forEach(key => {
-					values.push(this.innerValues[key])
-				})
-				this.$emit('input', values);
-				this.visible = false
-				this.sendChange();
-			},
-			/* 触发change回调 */
-			sendChange() {
-				const values = []
-				Object.keys(this.innerValues).forEach(key => {
-					values.push(this.innerValues[key])
-				})
-				this.$emit('change', values);
-			},
-			/* 获取rgb */
-			getRgbaAtPoint(pos, area) {
-				if (area == 'bar') {
-					var imgData = this.ctx.getImageData(0, 0, 20, this.height);
-				} else {
-					var imgData = this.ctx.getImageData(0, 0, this.width, this.height);
-				}
-				var data = imgData.data;
-				var dataIndex = (pos.y * imgData.width + pos.x) * 4;
-				/* 开始消除误差 */
-				if (pos.x >= 30 && pos.y > this.height - 3) {
-					return [0, 0, 0, this.alpha];
-				}
-				if (pos.x >= 30 && pos.y <= 1) {
-					data[dataIndex] = 255;
-				}
-				if (pos.x >= 30 && pos.x <= 31) {
-					return [
-						data[dataIndex],
-						data[dataIndex],
-						data[dataIndex],
-						this.alpha
-					]
-				}
-				if (pos.x >= this.width - 1) {
-					return [
-						data[dataIndex],
-						0,
-						0,
-						this.alpha
-					]
-				}
-				/* 消除误差结束 */
-				return [
-					data[dataIndex],
-					data[dataIndex + 1],
-					data[dataIndex + 2],
-					this.alpha
-				];
-			},
-			/* rgb/rgba色值转16进制 */
-			rgb2hex(rgb) {
-				var reg = /^(rgb|RGB)/;
-				var a;
-				if (reg.test(rgb)) {
-					var colorArr = rgb.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, "").split(',');
-					var alpha = (colorArr && colorArr[3] || "").trim()
-					var hex = "#" + ((1 << 24) + (parseInt(colorArr[0]) << 16) + (parseInt(colorArr[1]) << 8) + parseInt(
-						colorArr[2])).toString(16).slice(1);
-					if (alpha != '' && alpha != '1') {
-						a = ((alpha * 255) | 1 << 8).toString(16).slice(1);
-						hex = hex + a;
-					}
-					return hex;
-				} else {
-					return rgb
-				}
-			},
-			/* 16进制色值转rgb */
-			hex2rgb(hex) {
-				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
-				var color = hex.toLowerCase();
-				if (reg.test(color)) {
-					if (color.length === 4) {
-						var colorNew = "#";
-						for (var i = 1; i < color.length; i += 1) {
-							colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
-						}
-						color = colorNew;
-					}
-					var colorChange = [];
-					for (var i = 1; i < color.length; i += 2) {
-						colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
-					}
-					return "rgb(" + colorChange.join(",") + ")";
-				} else {
-					return color;
-				}
-			},
-			checkGradient(index) {
-				this.activeIndex = index
-				this.curColor = this.innerValues[this.activeIndex];
-				this.activeColor = this.innerValues[this.activeIndex];
-				this.setAlpha()
-				this.$nextTick(() => {
-					this.resetCurColor();
-					this.init()
-				})
-			}
-		}
-	}
+            pos.x = pos.x <= 30 ? 30 : pos.x && (pos.x > self.width - 1 ? self.width - 1 : pos.x)
+            pos.y = pos.y <= 0 ? 0 : pos.y && (pos.y > self.height - 1 ? self.height - 1 : pos.y)
+
+            var rgbaStr = self.getRgbaAtPoint(pos, 'box')
+            self.setCurColor(rgbaStr)
+            cur.style.left = pos.x + 'px'
+            cur.style.top = pos.y + 'px'
+          } catch (e) {
+            console.error(e)
+          }
+        }
+      } else if (ePos.x <= 20 && ePos.y <= this.height) {
+        var bar = document.getElementById(this.barId)
+        document.onmouseup = function() {
+          document.onmouseup = document.onmousemove = null
+        }
+        document.onmousemove = function(e) {
+          try {
+            var pos = {
+              x: 0,
+              y: e.clientY - ev.clientY + ev.offsetY + offsetTop
+            }
+
+            pos.y = pos.y <= 0 ? 0 : pos.y && (pos.y > self.height - 1 ? self.height - 1 : pos
+              .y)
+
+            var rgbaStr = self.getRgbaAtPoint(pos, 'box')
+            bar.style.top = pos.y + 'px'
+            self.activeColor = 'rgb(' + rgbaStr.slice(0, 3).join() + ')'
+            self.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')')
+            self.innerValues[self.activeIndex] = self.activeColor
+            self.$emit('active-change', self.innerValues)
+          } catch (e) {
+            console.error(e)
+          }
+        }
+      }
+    },
+    /* 透明度控制条点击 */
+    onAlphaClick(e) {
+      var x = e.offsetX || e.layerX
+      var bar = document.getElementById(this.alphaId)
+      var parentNode = bar.parentNode
+      this.alpha = parseFloat(x / parentNode.clientWidth).toFixed(2)
+      this.resetCurColor()
+    },
+    /* 透明度控制 */
+    onAlphaMousedown(ev) {
+      var self = this
+
+      var offsetLeft = parseInt(ev.target.offsetLeft)
+      var bar = document.getElementById(this.alphaId)
+      var parentNode = bar.parentNode
+      document.onmouseup = function() {
+        document.onmouseup = document.onmousemove = null
+      }
+      document.onmousemove = function(e) {
+        try {
+          var pos = {
+            x: e.clientX - ev.clientX + ev.offsetX + offsetLeft,
+            y: 0
+          }
+
+          pos.x = pos.x <= 0 ? 0 : pos.x && (pos.x > parentNode.clientWidth ? parentNode.clientWidth : pos
+            .x)
+
+          self.alpha = parseFloat(pos.x / parentNode.clientWidth).toFixed(2)
+          self.resetCurColor()
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    },
+    /* 透明度变化重新计算当前颜色值 */
+    resetCurColor() {
+      var curColor = this.curColor
+      var alpha = this.alpha
+      var reg = /^(rgb|RGB)/
+      if (!reg.test(curColor)) {
+        curColor = this.hex2rgb(curColor.slice(0, 7))
+      }
+      var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, '').split(',')
+      colorArr[3] = alpha
+      this.setCurColor(colorArr)
+    },
+    /* 设置当前颜色值 */
+    setCurColor(rgbaStr) {
+      var txt = 'a'
+      if (rgbaStr.length === 4 && parseFloat(rgbaStr[3]) === 1 || !this.showAlpha) {
+        rgbaStr = rgbaStr.slice(0, 3)
+        txt = ''
+      }
+      if (this.colorFormat === 'hex') {
+        this.curColor = this.rgb2hex('rgb' + txt + '(' + rgbaStr.join() + ')')
+      } else if (this.colorFormat === 'rgb') {
+        this.curColor = 'rgb' + txt + '(' + rgbaStr.join() + ')'
+      }
+      this.innerValues[this.activeIndex] = this.curColor
+      this.activeColor = this.innerValues[this.activeIndex]
+
+      this.sendChange()
+    },
+    /* 确认按钮点击 */
+    confirm() {
+      const values = []
+      Object.keys(this.innerValues).forEach(key => {
+        values.push(this.innerValues[key])
+      })
+      this.$emit('input', values)
+      this.visible = false
+      this.sendChange()
+    },
+    /* 触发change回调 */
+    sendChange() {
+      const values = []
+      Object.keys(this.innerValues).forEach(key => {
+        values.push(this.innerValues[key])
+      })
+      this.$emit('change', values)
+    },
+    /* 获取rgb */
+    getRgbaAtPoint(pos, area) {
+      let imgData = null
+      if (area === 'bar') {
+        imgData = this.ctx.getImageData(0, 0, 20, this.height)
+      } else {
+        imgData = this.ctx.getImageData(0, 0, this.width, this.height)
+      }
+      var data = imgData.data
+      var dataIndex = (pos.y * imgData.width + pos.x) * 4
+      /* 开始消除误差 */
+      if (pos.x >= 30 && pos.y > this.height - 3) {
+        return [0, 0, 0, this.alpha]
+      }
+      if (pos.x >= 30 && pos.y <= 1) {
+        data[dataIndex] = 255
+      }
+      if (pos.x >= 30 && pos.x <= 31) {
+        return [
+          data[dataIndex],
+          data[dataIndex],
+          data[dataIndex],
+          this.alpha
+        ]
+      }
+      if (pos.x >= this.width - 1) {
+        return [
+          data[dataIndex],
+          0,
+          0,
+          this.alpha
+        ]
+      }
+      /* 消除误差结束 */
+      return [
+        data[dataIndex],
+        data[dataIndex + 1],
+        data[dataIndex + 2],
+        this.alpha
+      ]
+    },
+    /* rgb/rgba色值转16进制 */
+    rgb2hex(rgb) {
+      var reg = /^(rgb|RGB)/
+      var a
+      if (reg.test(rgb)) {
+        var colorArr = rgb.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, '').split(',')
+        var alpha = (colorArr && colorArr[3] || '').trim()
+        var hex = '#' + ((1 << 24) + (parseInt(colorArr[0]) << 16) + (parseInt(colorArr[1]) << 8) + parseInt(
+          colorArr[2])).toString(16).slice(1)
+        if (alpha !== '' && alpha !== '1') {
+          a = ((alpha * 255) | 1 << 8).toString(16).slice(1)
+          hex = hex + a
+        }
+        return hex
+      } else {
+        return rgb
+      }
+    },
+    /* 16进制色值转rgb */
+    hex2rgb(hex) {
+      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+      var color = hex.toLowerCase()
+      if (reg.test(color)) {
+        if (color.length === 4) {
+          var colorNew = '#'
+          for (var i = 1; i < color.length; i += 1) {
+            colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+          }
+          color = colorNew
+        }
+        var colorChange = []
+        for (let i = 1; i < color.length; i += 2) {
+          colorChange.push(parseInt('0x' + color.slice(i, i + 2)))
+        }
+        return 'rgb(' + colorChange.join(',') + ')'
+      } else {
+        return color
+      }
+    },
+    checkGradient(index) {
+      this.activeIndex = index
+      this.curColor = this.innerValues[this.activeIndex]
+      this.activeColor = this.innerValues[this.activeIndex]
+      this.setAlpha()
+      this.$nextTick(() => {
+        this.resetCurColor()
+        this.init()
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss">
@@ -532,7 +586,7 @@
 		border-radius: 50%;
 		box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px 2px rgb(0 0 0 / 40%);
 	}
-	
+
 	.c__bar,.c__alpha{
 		background-color: #fff;
 		position: absolute;
@@ -548,7 +602,7 @@
 		left: 0;
 		top: 0;
 	}
-	
+
 	.c__alpha{
 		width: 5px;
 		height: 20px;
@@ -659,8 +713,8 @@
 			width: 16px;
 			height: 16px;
 			border-radius: 2px;
-    	border: 1px solid #e6e6e6;
+			border: 1px solid #e6e6e6;
 			margin: 1px 1px;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/GradientColorSelector/base.js b/frontend/src/components/GradientColorSelector/base.js
index 4851dd95fd..557047a9a5 100644
--- a/frontend/src/components/GradientColorSelector/base.js
+++ b/frontend/src/components/GradientColorSelector/base.js
@@ -88,8 +88,8 @@ export const gradientColorCases = [
     name: '渐变色1',
     value: 'gradient1',
     colors: [
-      ['rgba(144,202,249,0.5)', 'rgba(1,87,155,0.9)'], 
-      ['rgba(127,222,234,1)', 'rgba(0,77,65,1)'], 
+      ['rgba(144,202,249,0.5)', 'rgba(1,87,155,0.9)'],
+      ['rgba(127,222,234,1)', 'rgba(0,77,65,1)'],
       ['rgba(129,199,132,1)', 'rgba(26,94,32,1)'],
       ['rgba(255,213,79,1)', 'rgba(230,81,0,1)'],
       ['rgba(186,105,200,1)', 'rgba(74,20,140,1)'],
@@ -100,4 +100,4 @@ export const gradientColorCases = [
 
 export const isGradientValue = value => {
   return value && gradientColorCases.some(item => item.value === value)
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/GradientColorSelector/index.vue b/frontend/src/components/GradientColorSelector/index.vue
index fd607f6cac..e770b40f41 100644
--- a/frontend/src/components/GradientColorSelector/index.vue
+++ b/frontend/src/components/GradientColorSelector/index.vue
@@ -1,13 +1,28 @@
 <template>
   <div>
-    <div v-if="colorDto.value" class="color-div-base selected-div">
+    <div
+      v-if="colorDto.value"
+      class="color-div-base selected-div"
+    >
       <div style="float: left;display: flex;align-items: center;">
-        <span v-for="(c,index) in colorDto.colors" :key="index" class="color-span-base" :style="{background: formatBgColor(c, true)}" />
+        <span
+          v-for="(c,index) in colorDto.colors"
+          :key="index"
+          class="color-span-base"
+          :style="{background: formatBgColor(c, true)}"
+        />
       </div>
-      <span style="margin-left: 4px;">
-      </span>
-      <span class="reset-span" @click="reset">
-        <el-tooltip class="item" effect="dark" content="重置" placement="top">
+      <span style="margin-left: 4px;" />
+      <span
+        class="reset-span"
+        @click="reset"
+      >
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="重置"
+          placement="top"
+        >
           <i class="el-icon-refresh" />
         </el-tooltip>
       </span>
@@ -17,41 +32,88 @@
       popper-class="gradient-popper"
       :width="popWidth"
       :append-to-body="true"
-      @show="whenShow"
       trigger="click"
+      @show="whenShow"
     >
       <div class="custom-switch-div">
         <el-switch
           v-model="enableCustom"
           active-text="自定义"
-          inactive-text="">
-        </el-switch>
+          inactive-text=""
+        />
       </div>
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane v-for="(pane, i) in tabPanes" :key="i" :label="pane.label" :name="pane.name">
-          <div class="color-tab-content" :id="'color-tab-content-' + i" @click="handler">
-            <div v-for="option in pane.datas" :key="option.value" class="el-select-dropdown__item color-div-base" :class="option.value === colorDto.value ? 'selected hover editor' : ''" @click="selectNode(option)">
-              <div v-if="option.value !== colorDto.value || !enableCustom" style="float: left;display: flex;align-items: center;">
-                <span v-for="(c,index) in option.colors" :key="index" class="color-span-base" :style="{background: formatBgColor(c)}" />
+      <el-tabs
+        v-model="activeName"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane
+          v-for="(pane, i) in tabPanes"
+          :key="i"
+          :label="pane.label"
+          :name="pane.name"
+        >
+          <div
+            :id="'color-tab-content-' + i"
+            class="color-tab-content"
+            @click="handler"
+          >
+            <div
+              v-for="option in pane.datas"
+              :key="option.value"
+              class="el-select-dropdown__item color-div-base"
+              :class="option.value === colorDto.value ? 'selected hover editor' : ''"
+              @click="selectNode(option)"
+            >
+              <div
+                v-if="option.value !== colorDto.value || !enableCustom"
+                style="float: left;display: flex;align-items: center;"
+              >
+                <span
+                  v-for="(c,index) in option.colors"
+                  :key="index"
+                  class="color-span-base"
+                  :style="{background: formatBgColor(c)}"
+                />
               </div>
-              <span v-if="option.value !== colorDto.value || !enableCustom" style="margin-left: 4px;">{{ option.name }}</span>
+              <span
+                v-if="option.value !== colorDto.value || !enableCustom"
+                style="margin-left: 4px;"
+              >{{ option.name }}</span>
 
-              <span v-else v-for="(co,index) in option.colors" :key="index" class="color-span-base is-editor" >
-                <el-color-picker v-if="i === 0" v-model="option.colors[index]" @change="switchColorItem(option.colors, index)"/>
-                <de-color-picker ref="de-color-picker" :id="option.value + index" :base-id="option.value + index" show-alpha color-format="rgb" v-else v-model="option.colors[index]" @change="switchColorItem(option.colors, index)"/>
+              <span
+                v-for="(co,index) in option.colors"
+                v-else
+                :key="index"
+                class="color-span-base is-editor"
+              >
+                <el-color-picker
+                  v-if="i === 0"
+                  v-model="option.colors[index]"
+                  @change="switchColorItem(option.colors, index)"
+                />
+                <de-color-picker
+                  v-else
+                  :id="option.value + index"
+                  ref="de-color-picker"
+                  v-model="option.colors[index]"
+                  :base-id="option.value + index"
+                  show-alpha
+                  color-format="rgb"
+                  @change="switchColorItem(option.colors, index)"
+                />
               </span>
-              
+
             </div>
           </div>
         </el-tab-pane>
-        
+
       </el-tabs>
 
       <el-select
         ref="colorSelect"
         slot="reference"
         v-model="colorDto.value"
-        
+
         class="form-gender-select"
         popper-class="gradient-tree-select"
         :placeholder="$t('commons.please_select')"
@@ -63,16 +125,16 @@
           :label="item.label"
           :value="item.id"
         />
-          
+
       </el-select>
     </el-popover>
   </div>
 </template>
 
 <script>
-import {colorCases, gradientColorCases} from './base'
+import { colorCases, gradientColorCases } from './base'
 import DeColorPicker from './DeColorPicker'
-export default{
+export default {
   name: 'GradientColorSelector',
   components: {
     DeColorPicker
@@ -113,7 +175,7 @@ export default{
     }
   },
   computed: {
-    
+
   },
   mounted() {
     this._updateH()
@@ -130,10 +192,10 @@ export default{
     },
     scrollToSelected() {
       const index = this.activeName === 'simple' ? 0 : 1
-      const parents = document.getElementById("color-tab-content-" + index)
-      if(!parents) return
-      const items = parents.getElementsByClassName("color-div-base selected")
-      if(items && items.length) {
+      const parents = document.getElementById('color-tab-content-' + index)
+      if (!parents) return
+      const items = parents.getElementsByClassName('color-div-base selected')
+      if (items && items.length) {
         const top = items[0].offsetTop || 0
         parents.scrollTo(0, top)
       }
@@ -149,8 +211,8 @@ export default{
         this.colorDto.colors = this.colorCases[0].colors
         haspPropValue = false
       }
-      this.activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient' 
-      if(haspPropValue) {
+      this.activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
+      if (haspPropValue) {
         this.tabPanes[this.activeName === 'simple' ? 0 : 1].datas.forEach(item => {
           if (item.value === this.colorDto.value) {
             item.colors = JSON.parse(JSON.stringify(this.colorDto.colors))
@@ -160,24 +222,22 @@ export default{
     },
     handler(e) {
       const whiteClassName = 'c__block el-popover__reference'
-      if(!e || !e.target || !e.target.className) return
-      if(!this.$refs || !this.$refs['de-color-picker']) return
+      if (!e || !e.target || !e.target.className) return
+      if (!this.$refs || !this.$refs['de-color-picker']) return
       let id = null
       if (e.target.className === whiteClassName) {
-        if(!e.target.parentElement || !e.target.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement.id) return
+        if (!e.target.parentElement || !e.target.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement || !e.target.parentElement.parentElement.parentElement.id) return
         id = e.target.parentElement.parentElement.parentElement.id
       }
-      
-      const widget = this.$refs['de-color-picker'] 
-      if (Array.isArray(widget)) {
 
+      const widget = this.$refs['de-color-picker']
+      if (Array.isArray(widget)) {
         widget.forEach(item => {
           (!id || id !== item.$el.id) && item.triggerHide && item.triggerHide()
         })
         return
       }
       (!id || id !== widget.$el.id) && widget.triggerHide && widget.triggerHide()
-      
     },
     handleClick() {
       this.enableCustom = false
@@ -185,9 +245,8 @@ export default{
         this.scrollToSelected()
       })
       const widget = this.$refs['de-color-picker']
-      if(!widget) return
+      if (!widget) return
       if (Array.isArray(widget)) {
-
         widget.forEach(item => {
           item.triggerHide && item.triggerHide()
         })
@@ -215,10 +274,10 @@ export default{
     },
     formatBgColor(color, useValue) {
       let activeName = this.activeName
-      if(useValue) {
+      if (useValue) {
         activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
       }
-      if(activeName === 'simple') {
+      if (activeName === 'simple') {
         return color
       }
       return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)'
@@ -236,13 +295,13 @@ export default{
       this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
     },
     reset() {
-      if(this.colorDto.value) {
+      if (this.colorDto.value) {
         let activeName = 'simple'
-        if(this.gradientColorCases.some(item => item.value === this.colorDto.value)) {
+        if (this.gradientColorCases.some(item => item.value === this.colorDto.value)) {
           activeName = 'gradient'
         }
         (activeName === 'simple' ? colorCases : gradientColorCases).forEach(curcase => {
-          if(curcase.value === this.colorDto.value) {
+          if (curcase.value === this.colorDto.value) {
             this.colorDto.colors = JSON.parse(JSON.stringify(curcase.colors))
             this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
           }
@@ -250,7 +309,7 @@ export default{
       }
     }
   }
-} 
+}
 </script>
 
 <style lang="scss">
@@ -263,7 +322,7 @@ export default{
   margin-top: 1px !important;
   border-top: none;
   height: 300px;
-  
+
   .popper__arrow {
     display: none;
   }
@@ -321,4 +380,4 @@ export default{
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index c7987c5207..ead8013c8f 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -10,20 +10,19 @@ const linearCOlor = (start, end) => {
     x2: 0,
     y2: 1,
     colorStops: [
-      {offset: 0, color: start},
-      {offset: 1, color: end},
+      { offset: 0, color: start },
+      { offset: 1, color: end }
     ],
     global: false
   }
 }
 const fillGradientColor = (data, colors) => {
-  if(!data || !data.length) return data
-  const dataLen = data.length
+  if (!data || !data.length) return data
   const colorLen = colors.length
   data.forEach((item, index) => {
     const colorIndex = index % colorLen
     const colorArr = colors[colorIndex]
-    if(Array.isArray(colorArr)) {
+    if (Array.isArray(colorArr)) {
       item.itemStyle = {
         normal: {
           areaColor: linearCOlor(colorArr[0], colorArr[1]),
@@ -44,7 +43,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
   let isGradient = false
   if (chart.customAttr) {
     customAttr = JSON.parse(chart.customAttr)
-    
+
     if (customAttr.color) {
       const colorValue = customAttr.color.value
       isGradient = isGradientValue(colorValue)
@@ -99,8 +98,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
       }
       const valueArr = chart.data.series[0].data
       // visualMap
-      if(!isGradient) {
-        
+      if (!isGradient) {
         if (valueArr && valueArr.length > 0) {
           const values = []
           valueArr.forEach(function(ele) {
@@ -124,11 +122,10 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
           chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
         }
         if (themeStyle) {
-          
           chart_option.visualMap.textStyle = { color: themeStyle }
         }
       }
-      
+
       for (let i = 0; i < valueArr.length; i++) {
         const y = valueArr[i]
         y.name = chart.data.x[i]
@@ -138,7 +135,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
         chart_option.series[0].data = fillGradientColor(chart_option.series[0].data, customAttr.color.colors)
         delete chart_option.visualMap
       }
-      
+
       if (chart.senior) {
         const senior = JSON.parse(chart.senior)
 
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index 9d1b1fcc62..6d2a8037bc 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -8,10 +8,21 @@
         size="mini"
       >
         <div>
-          <el-form-item v-show="showProperty('value') && showProperty('gradient-color')" :label="$t('chart.color_case')" class="form-item">
-            <gradient-color-selector :color-dto="colorForm" @color-change="gradientColorChange"/>
+          <el-form-item
+            v-show="showProperty('value') && showProperty('gradient-color')"
+            :label="$t('chart.color_case')"
+            class="form-item"
+          >
+            <gradient-color-selector
+              :color-dto="colorForm"
+              @color-change="gradientColorChange"
+            />
           </el-form-item>
-          <el-form-item v-show="showProperty('value') && !showProperty('gradient-color')" :label="$t('chart.color_case')" class="form-item">
+          <el-form-item
+            v-show="showProperty('value') && !showProperty('gradient-color')"
+            :label="$t('chart.color_case')"
+            class="form-item"
+          >
             <el-popover
               placement="bottom"
               width="400"
@@ -267,7 +278,7 @@ import bus from '@/utils/bus'
 
 export default {
   name: 'ColorSelector',
-  components: {GradientColorSelector},
+  components: { GradientColorSelector },
   props: {
     param: {
       type: Object,