feat: antv组合图插件 颜色设置增加渐变与透明度

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"

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',

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
+}
+
 
 
 

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,
           }
         }