feat(图表): 柱线组合图优化颜色展示

core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java

@@ -527,6 +527,8 @@ public class ChartDataBuild {
             series1.setData(new ArrayList<>());
             series.add(series1);
         }
+        Set<String> categories = new HashSet<>();
+
         for (int i1 = 0; i1 < data.size(); i1++) {
             String[] d = data.get(i1);
 
@@ -582,13 +584,16 @@ public class ChartDataBuild {
                 } catch (Exception e) {
                     axisChartDataDTO.setValue(new BigDecimal(0));
                 }
-                axisChartDataDTO.setCategory(
-                        StringUtils.defaultIfBlank(b.toString(),
-                                StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName())));
+                String category = StringUtils.defaultIfBlank(b.toString(),
+                        StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName()));
+                axisChartDataDTO.setCategory(category);
+                categories.add(category);
+
                 buildDynamicValue(view, axisChartDataDTO, d, size, extSize);
                 series.get(j).getData().add(axisChartDataDTO);
             }
         }
+        series.get(0).setCategories(categories);
 
         map.put("data", series);
         return map;
@@ -610,6 +615,7 @@ public class ChartDataBuild {
             series1.setData(new ArrayList<>());
             series.add(series1);
         }
+        Set<String> categories = new HashSet<>();
 
         for (int i1 = 0; i1 < data.size(); i1++) {
             String[] row = data.get(i1);
@@ -635,7 +641,11 @@ public class ChartDataBuild {
             AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
             axisChartDataDTO.setField(a.toString());
             axisChartDataDTO.setName(a.toString());
-            axisChartDataDTO.setCategory(row[xAxis.size()]);
+            String category = row[xAxis.size()];
+            axisChartDataDTO.setCategory(category);
+            if (category != null) {
+                categories.add(category);
+            }
 
             List<ChartDimensionDTO> dimensionList = new ArrayList<>();
             List<ChartQuotaDTO> quotaList = new ArrayList<>();
@@ -673,6 +683,8 @@ public class ChartDataBuild {
             series.get(j).getData().add(axisChartDataDTO);
         }
 
+        series.get(0).setCategories(categories);
+
 
         map.put("data", series);
         return map;

core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts

@@ -12,7 +12,7 @@ import {
   setGradientColor
 } from '../../common/common_antv'
 import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
-import { cloneDeep, isEmpty, defaultTo, map, filter, union } from 'lodash-es'
+import { cloneDeep, isEmpty, defaultTo, map, filter, union, slice } from 'lodash-es'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import {
   CHART_MIX_AXIS_TYPE,
@@ -61,7 +61,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
   }
   drawChart(drawOptions: G2PlotDrawOptions<DualAxes>): DualAxes {
     const { chart, action, container } = drawOptions
-    if (!chart.data.left.data?.length && !chart.data.right.data?.length) {
+    if (!chart.data?.left?.data?.length && !chart.data?.right?.data?.length) {
       return
     }
     const left = cloneDeep(chart.data?.left?.data)
@@ -89,6 +89,8 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
     const customAttr = parseJson(chart.customAttr)
     let color = customAttr.basicStyle.colors
 
+    const colorSize = color.length
+
     color = color.map(ele => {
       const tmp = hexColorToRGBA(ele, customAttr.basicStyle.alpha)
       if (customAttr.basicStyle.gradient) {
@@ -98,6 +100,14 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       }
     })
 
+    const color2StartNum = defaultTo(left[0]?.categories?.length, 1)
+    const color2StartIndex = color2StartNum % colorSize
+
+    const color2 =
+      color2StartIndex === 0
+        ? cloneDeep(color)
+        : union(slice(color, color2StartIndex), slice(color, 0, color2StartIndex))
+
     // options
     const initOptions: DualAxesOptions = {
       data: [data1, data2],
@@ -115,7 +125,7 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
         },
         {
           geometry: data2Type,
-          color: seriesField2 ? color : color[1],
+          color: seriesField2 ? color2 : color2[0],
           seriesField: seriesField2
         }
       ],

sdk/api/api-base/src/main/java/io/dataease/api/chart/dto/Series.java

@@ -4,6 +4,7 @@ import lombok.Getter;
 import lombok.Setter;
 
 import java.util.List;
+import java.util.Set;
 
 /**
  * @Author gin
@@ -14,4 +15,5 @@ public class Series {
     private String name;
     private String type;
     private List<Object> data;
+    private Set<String> categories;
 }