feat: 新增渐变色AntV图库的所有柱状图、面积图、饼图、环形图、仪表盘

frontend/src/lang/en.js

@@ -915,6 +915,7 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    gradient: 'Gradient',
     layer_controller: 'Quota switch',
     suspension: 'Suspension',
     chart_background: 'Component background',

frontend/src/lang/tw.js

@@ -915,6 +915,7 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    gradient: '漸變',
     layer_controller: '指標切換',
     suspension: '懸浮',
     chart_background: '組件背景',

frontend/src/lang/zh.js

@@ -914,6 +914,7 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    gradient: '渐变',
     layer_controller: '指标切换',
     suspension: '悬浮',
     chart_background: '组件背景',

frontend/src/views/chart/chart/bar/bar_antv.js

@@ -103,6 +103,11 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   options.isPercent = chart.type === 'percentage-bar-stack'
   // custom color
   options.color = antVCustomColor(chart)
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(270) 0:#ffffff00 1:${ele}`
+    })
+  }
 
   // 开始渲染
   if (plot) {
@@ -199,6 +204,11 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   }
   // custom color
   options.color = antVCustomColor(chart)
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(0) 0:#ffffff00 1:${ele}`
+    })
+  }
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/chart.js

@@ -28,6 +28,7 @@ export const DEFAULT_COLOR_CASE = {
   tableBorderColor: '#E6E7E4',
   seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
   areaBorderColor: '#303133',
+  gradient: false,
   areaBaseColor: '#FFFFFF'
 }
 

frontend/src/views/chart/chart/gauge/gauge_antv.js

@@ -124,6 +124,8 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
       }
     }
   }
+  console.log('hasThreshold', hasThreshold)
+
   if (hasThreshold) {
     options.range = {
       color: theme.styleSheet.paletteQualitative10,
@@ -152,6 +154,17 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
     }
   }
 
+  if (customAttr.color.gradient) {
+    const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => `l(0) 0:#ffffff00 1:${ele}`)
+    if (!options.range) {
+      options.range = {
+        color: colorList
+      }
+    } else {
+      options.range.color = colorList
+    }
+  }
+
   // 开始渲染
   if (plot) {
     plot.destroy()

frontend/src/views/chart/chart/line/line_antv.js

@@ -178,6 +178,17 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
   }
   // custom color
   options.color = antVCustomColor(chart)
+  const areaColors = [...options.color, ...options.color]
+  if (customAttr.color.gradient) {
+    options.areaStyle = () => {
+      const cr = areaColors.shift()
+      if (cr) {
+        return {
+          fill: `l(270) 0:#ffffff00 1:${cr}`
+        }
+      }
+    }
+  }
 
   // 开始渲染
   if (plot) {

frontend/src/views/chart/chart/pie/pie_antv.js

@@ -82,6 +82,12 @@ export function basePieOptionAntV(plot, container, chart, action) {
   // custom color
   options.color = antVCustomColor(chart)
 
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(270) 0:#ffffff00 1:${ele}`
+    })
+  }
+
   // 开始渲染
   if (plot) {
     plot.destroy()
@@ -159,6 +165,12 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
   // custom color
   options.color = antVCustomColor(chart)
 
+  if (customAttr.color.gradient) {
+    options.color = options.color.map((ele) => {
+      return `l(270) 0:#ffffff00 1:${ele}`
+    })
+  }
+
   // 开始渲染
   if (plot) {
     plot.destroy()

frontend/src/views/chart/chart/util.js

@@ -280,6 +280,7 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -464,7 +465,8 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
-        'alpha'
+        'alpha',
+        'gradient'
       ],
       'size-selector-ant-v': [
         'lineWidth',
@@ -624,6 +626,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -703,6 +706,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -782,6 +786,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -861,6 +866,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1004,6 +1010,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1083,6 +1090,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1160,6 +1168,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1219,6 +1228,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1279,6 +1289,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1336,6 +1347,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [
@@ -1396,6 +1408,7 @@ export const TYPE_CONFIGS = [
         'value',
         'colorPanel',
         'customColor',
+        'gradient',
         'alpha'
       ],
       'size-selector-ant-v': [

frontend/src/views/chart/components/shapeAttr/ColorSelector.vue

@@ -151,6 +151,17 @@
             </el-popover>
           </el-form-item>
 
+          <el-form-item
+            v-show="showProperty('gradient')"
+            :label="$t('chart.gradient')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="colorForm.gradient"
+              @change="changeColorCase('gradient')"
+            />
+          </el-form-item>
+
           <el-form-item
             v-show="showProperty('quotaColor')"
             :label="$t('chart.quota_color')"
@@ -420,6 +431,7 @@ export default {
   },
   methods: {
     gradientColorChange(colorDto) {
+      console.log('gradientColorChange')
       const modifyNames = ['value', 'colors', 'seriesColors']
       modifyNames.forEach(item => {
         this.colorForm['modifyName'] = item