From ddf7207fc4326d418b9983084c4310c19d057847 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Thu, 9 Nov 2023 10:57:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20antv=E7=BB=84=E5=90=88=E5=9B=BE?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=20=E9=A2=9C=E8=89=B2=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B8=90=E5=8F=98=E4=B8=8E=E9=80=8F=E6=98=8E?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shapeAttr/ColorSelector.vue    |  1 -
 .../src/components/selector/ColorSelector.vue | 15 ++++++++---
 .../src/utils/chartmix.js                     |  6 +++++
 .../src/views/antv/chartmix/index.vue         | 26 +++++++++++++++----
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index df0d5314a6..d67d0dfa8f 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -120,7 +120,6 @@
                 v-show="showProperty('customColor')"
                 class="custom-color-style"
               >
-                aaa
                 <div
                   v-for="(item,index) in colorForm.seriesColors"
                   :key="index"
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue
index 2a64243d27..b452a8077b 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue
@@ -53,18 +53,27 @@
           </el-popover>
         </el-form-item>
 
+        <el-form-item
+          :label="$t('chart.gradient')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="colorForm.gradient"
+            @change="changeColorCase"
+          />
+        </el-form-item>
 
-<!--        <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+        <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="changeColorCase"/>
-        </el-form-item>-->
+        </el-form-item>
       </el-form>
     </el-col>
   </div>
 </template>
 
 <script>
-import {COLOR_PANEL, DEFAULT_COLOR_CASE} from '@/utils/map'
+import {COLOR_PANEL, DEFAULT_COLOR_CASE} from '../../utils/map'
 
 export default {
   name: 'ColorSelector',
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js
index 697800dd8d..1402516f78 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/chartmix.js
@@ -63,6 +63,12 @@ export function hexColorToRGBA(hex, alpha) {
   }
 }
 
+export function setGradientColor(rawColor, show = false, angle = 0) {
+  const item = rawColor.split(',')
+  item.splice(3, 1, '0.3)')
+  return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
+}
+
 
 
 
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index 29e5a6af84..d09f5bd268 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -33,7 +33,7 @@
 
 <script>
 import {Mix} from '@antv/g2plot'
-import {uuid, hexColorToRGBA} from '../../../utils/chartmix'
+import {uuid, hexColorToRGBA, setGradientColor} from '../../../utils/chartmix'
 import ViewTrackBar from '../../../components/views/ViewTrackBar'
 import {getRemark} from "../../../components/views/utils";
 import {
@@ -41,12 +41,13 @@ import {
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
   transAxisPosition,
-  getLineDash
+  getLineDash, DEFAULT_COLOR_CASE
 } from '../../../utils/map';
 import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
 import _ from 'lodash';
 import {clear} from 'size-sensor'
 import {valueFormatter} from '../../../utils/formatter'
+import fa from "element-ui/src/locale/lang/fa";
 
 export default {
   name: 'ChartComponent',
@@ -276,7 +277,9 @@ export default {
       let yaxisCount = yaxisList.length;
 
       let customAttr = undefined;
+      let gradient = false;
       let colors = undefined;
+      let alpha = DEFAULT_COLOR_CASE.alpha;
       let labelSetting = undefined;
       let labelPosition = 'middle';
       if (this.chart.customAttr) {
@@ -284,6 +287,8 @@ export default {
         if (customAttr) {
           if (customAttr.color) {
             colors = customAttr.color.colors;
+            alpha = customAttr.color.alpha;
+            gradient = customAttr.color.gradient;
           }
           if (customAttr.label) {
             labelSetting = customAttr.label.show ? {
@@ -322,6 +327,12 @@ export default {
           }
         }
 
+        let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined;
+        if (color && gradient) {
+          color = setGradientColor(color, true, 270)
+          console.log(color)
+        }
+
         return {
           type: _chartType,
           name: t.name,
@@ -347,7 +358,7 @@ export default {
             yAxis: {
               position: 'left',
             },
-            color: colors && _index < colors.length ? colors[_index] : undefined,
+            color: color,
             label: _labelSetting,
           }
         }
@@ -366,7 +377,6 @@ export default {
 
         names.push(t.name);
 
-
         const _chartType = this.getChartType(yaxisExtList[_index].chartType);
 
         if (_labelSetting) {
@@ -377,6 +387,12 @@ export default {
           }
         }
 
+        let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined;
+        if (color && gradient) {
+          color = setGradientColor(color, true, 270)
+          console.log(color)
+        }
+
         return {
           type: _chartType,
           name: t.name,
@@ -402,7 +418,7 @@ export default {
             yAxis: {
               position: 'right',
             },
-            color: colors && (yaxisCount + _index) < colors.length ? colors[yaxisCount + _index] : undefined,
+            color: color,
             label: _labelSetting,
           }
         }