From 0e1fadb936e7784ce8a8916862f3a969fe74c1f0 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Thu, 13 Jun 2024 14:15:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E6=9F=B1=E7=BA=BF=E7=BB=84=E5=90=88=E5=9B=BE?=
 =?UTF-8?q?&=E5=A0=86=E5=8F=A0=E6=9F=B1=E7=BA=BF=E7=BB=84=E5=90=88?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chart/manage/ChartDataManage.java         | 35 ++++++-
 .../dataease/chart/utils/ChartDataBuild.java  | 91 ++++++++++++++++++-
 .../visualization/UserViewEnlarge.vue         |  6 +-
 core/core-frontend/src/locales/zh-CN.ts       |  2 +
 .../editor/drag-item/DimensionItem.vue        | 26 +++++-
 .../components/editor/drag-item/QuotaItem.vue |  6 +-
 .../editor/drag-label/DimensionLabel.vue      |  2 +-
 .../editor/drag-label/QuotaLabel.vue          |  2 +-
 .../editor-senior/components/AssistLine.vue   |  2 +-
 .../editor/editor-style/ChartStyle.vue        |  2 +-
 .../views/chart/components/editor/index.vue   |  3 +-
 .../chart/components/editor/util/chart.ts     | 14 +++
 .../js/panel/charts/others/chart-mix.ts       | 43 ++++++++-
 .../components/js/panel/common/common_antv.ts |  3 +-
 .../src/views/chart/components/js/util.ts     |  2 +-
 15 files changed, 213 insertions(+), 26 deletions(-)

diff --git a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java
index 91714ddf36..29f3647ec8 100644
--- a/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java
+++ b/core/core-backend/src/main/java/io/dataease/chart/manage/ChartDataManage.java
@@ -109,12 +109,26 @@ public class ChartDataManage {
         List<ChartViewFieldDTO> allFields = getAllChartFields(view);
         ChartViewDTO chartViewDTO = null;
 
-        if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
+        if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
+            // 需要排除掉除类别轴以外所有的排序
+            view.getXAxisExt().forEach(dto -> dto.setSort("none"));
+            view.getExtBubble().forEach(dto -> dto.setSort("none"));
+            view.getExtStack().forEach(dto -> dto.setSort("none"));
+            view.getYAxis().forEach(dto -> dto.setSort("none"));
+            view.getYAxisExt().forEach(dto -> dto.setSort("none"));
+
             //左轴右轴需要分别调用一次查询
             String viewJson = (String) JsonUtil.toJSONString(view);
             Map<String, Object> data = new HashMap<>();
             //针对左轴，删除yAxisExt
             ChartViewDTO view1 = JsonUtil.parseObject(viewJson, ChartViewDTO.class);
+            if (!StringUtils.equalsIgnoreCase(view.getType(), "chart-mix-group")) {
+                view1.setXAxisExt(new ArrayList<>());
+            }
+            if (!StringUtils.equalsIgnoreCase(view.getType(), "chart-mix-stack")) {
+                view1.setExtStack(new ArrayList<>());
+            }
+            view1.setExtBubble(new ArrayList<>());
             view1.setYAxisExt(new ArrayList<>());
             if (view1.getSenior() != null) {
                 ChartSeniorAssistCfgDTO assistLineCfg1 = JsonUtil.parseObject((String) JsonUtil.toJSONString(view1.getSenior().get("assistLineCfg")), ChartSeniorAssistCfgDTO.class);
@@ -140,13 +154,17 @@ public class ChartDataManage {
                 }
             }
             view2.setXAxisExt(view2.getExtBubble());
+            view2.setExtStack(new ArrayList<>());
             view2.setExtBubble(new ArrayList<>());
             ChartViewDTO right = calcData(view2, chartExtRequest, allFields, viewFields);
             data.put("right", right.getData());
 
             //重新组装
             chartViewDTO = BeanUtils.copyBean(new ChartViewDTO(), left);
+            chartViewDTO.setXAxisExt(view.getXAxisExt());
+            chartViewDTO.setExtStack(view.getExtStack());
             chartViewDTO.setYAxisExt(view.getYAxisExt());
+            chartViewDTO.setExtBubble(view.getExtBubble());
             chartViewDTO.setData(data);
             chartViewDTO.setSenior(view.getSenior());
         } else {
@@ -166,12 +184,12 @@ public class ChartDataManage {
                 || ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
                 || StringUtils.equalsIgnoreCase(view.getType(), "flow-map")
                 || StringUtils.equalsIgnoreCase(view.getType(), "sankey")
-                || StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")
+                || StringUtils.containsIgnoreCase(view.getType(), "chart-mix")
         ) {
             xAxis.addAll(xAxisExt);
         }
         List<ChartViewFieldDTO> yAxis = new ArrayList<>(view.getYAxis());
-        if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")
+        if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")
                 || StringUtils.equalsIgnoreCase(view.getType(), "bidirectional-bar")
                 || StringUtils.equalsIgnoreCase(view.getType(), "quadrant")
                 || StringUtils.containsIgnoreCase(view.getType(), "progress-bar")) {
@@ -831,8 +849,15 @@ public class ChartDataManage {
             } else if (StringUtils.containsIgnoreCase(view.getType(), "bidirectional-bar")
                     || StringUtils.containsIgnoreCase(view.getType(), "progress-bar")) {
                 mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, new ArrayList<>(), yAxis, view, data, isDrill);
-            } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix") && !StringUtils.containsIgnoreCase(view.getType(), "stack")) {
                 mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix") && StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+                if (CollectionUtils.isNotEmpty(extStack)) {
+                    mapChart = ChartDataBuild.transMixChartStackDataAntV(xAxisBase, xAxis, extStack, yAxis, view, data, isDrill);
+                } else {
+                    //右轴还是走原逻辑
+                    mapChart = ChartDataBuild.transMixChartDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
+                }
             } else if (StringUtils.containsIgnoreCase(view.getType(), "label")) {
                 mapChart = ChartDataBuild.transLabelChartData(xAxis, yAxis, view, data, isDrill);
             } else if (StringUtils.containsIgnoreCase(view.getType(), "quadrant")) {
@@ -1316,7 +1341,7 @@ public class ChartDataManage {
             xAxis.addAll(xAxisExt);
         }
         List<ChartViewFieldDTO> yAxis = new ArrayList<>(view.getYAxis());
-        if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
+        if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
             List<ChartViewFieldDTO> yAxisExt = new ArrayList<>(view.getYAxisExt());
             yAxis.addAll(yAxisExt);
         }
diff --git a/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java b/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java
index 58ebef4c2c..ee8e78edc4 100644
--- a/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java
+++ b/core/core-backend/src/main/java/io/dataease/chart/utils/ChartDataBuild.java
@@ -5,6 +5,7 @@ import io.dataease.i18n.Lang;
 import io.dataease.i18n.Translator;
 import io.dataease.utils.IDUtils;
 import io.dataease.utils.JsonUtil;
+import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ArrayUtils;
 import org.apache.commons.lang3.BooleanUtils;
 import org.apache.commons.lang3.ObjectUtils;
@@ -172,7 +173,7 @@ public class ChartDataBuild {
                 axisChartDataDTO.setCategory(StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName()));
                 buildDynamicValue(view, axisChartDataDTO, row, size, extSize);
 
-                Map<String, Object> object = JsonUtil.parse((String) JsonUtil.toJSONString(axisChartDataDTO) , HashMap.class);
+                Map<String, Object> object = JsonUtil.parse((String) JsonUtil.toJSONString(axisChartDataDTO), HashMap.class);
 
                 object.put("x", new BigDecimal(row[0]));
                 object.put("y", new BigDecimal(row[1]));
@@ -515,7 +516,7 @@ public class ChartDataBuild {
     }
 
     // antV组合图形
-    public static Map<String, Object> transMixChartDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis,List<ChartViewFieldDTO> xAxisExt,  List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
+    public static Map<String, Object> transMixChartDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> xAxisExt, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
         Map<String, Object> map = new HashMap<>();
 
         List<Series> series = new ArrayList<>();
@@ -583,7 +584,7 @@ public class ChartDataBuild {
                 }
                 axisChartDataDTO.setCategory(
                         StringUtils.defaultIfBlank(b.toString(),
-                        StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName())));
+                                StringUtils.defaultIfBlank(yAxis.get(j).getChartShowName(), yAxis.get(j).getName())));
                 buildDynamicValue(view, axisChartDataDTO, d, size, extSize);
                 series.get(j).getData().add(axisChartDataDTO);
             }
@@ -593,6 +594,90 @@ public class ChartDataBuild {
         return map;
     }
 
+    public static Map<String, Object> transMixChartStackDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> extStack, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
+
+        if (CollectionUtils.isEmpty(extStack)) {
+            return transMixChartDataAntV(xAxisBase, xAxis, new ArrayList<>(), yAxis, view, data, isDrill);
+        }
+
+        Map<String, Object> map = new HashMap<>();
+
+        List<Series> series = new ArrayList<>();
+        for (ChartViewFieldDTO y : yAxis) {
+            Series series1 = new Series();
+            series1.setName(y.getName());
+            series1.setType(y.getChartType());
+            series1.setData(new ArrayList<>());
+            series.add(series1);
+        }
+
+        for (int i1 = 0; i1 < data.size(); i1++) {
+            String[] row = data.get(i1);
+
+            StringBuilder a = new StringBuilder();
+            if (isDrill) {
+                a.append(row[xAxis.size() - 1]);
+            } else {
+                for (int i = 0; i < xAxis.size(); i++) {
+                    if (i == xAxis.size() - 1) {
+                        a.append(row[i]);
+                    } else {
+                        a.append(row[i]).append("\n");
+                    }
+                }
+            }
+
+            // yAxis最后的数据对应extLabel和extTooltip，将他们从yAxis中去掉，同时转换成动态值
+            int size = xAxis.size() + extStack.size() + yAxis.size();
+            int extSize = view.getExtLabel().size() + view.getExtTooltip().size();
+
+            int i = xAxis.size();
+            AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+            axisChartDataDTO.setField(a.toString());
+            axisChartDataDTO.setName(a.toString());
+            axisChartDataDTO.setCategory(row[xAxis.size()]);
+
+            List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+            List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+            for (int k = 0; k < xAxis.size(); k++) {
+                ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                chartDimensionDTO.setId(xAxis.get(k).getId());
+                chartDimensionDTO.setValue(row[k]);
+                dimensionList.add(chartDimensionDTO);
+            }
+            ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+            chartDimensionDTO.setId(extStack.get(0).getId());
+            chartDimensionDTO.setValue(row[xAxis.size()]);
+            dimensionList.add(chartDimensionDTO);
+            axisChartDataDTO.setDimensionList(dimensionList);
+
+            int j = i - xAxis.size();
+            int valueIndex = xAxis.size() + extStack.size();
+            if (ObjectUtils.isNotEmpty(yAxis)) {
+                ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                chartQuotaDTO.setId(yAxis.get(j).getId());
+                quotaList.add(chartQuotaDTO);
+                axisChartDataDTO.setQuotaList(quotaList);
+                try {
+                    axisChartDataDTO.setValue(StringUtils.isEmpty(row[valueIndex]) ? null : new BigDecimal(row[valueIndex]));
+                } catch (Exception e) {
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                buildDynamicValue(view, axisChartDataDTO, row, size, extSize);
+            } else {
+                axisChartDataDTO.setQuotaList(quotaList);
+                axisChartDataDTO.setValue(new BigDecimal(0));
+            }
+
+            series.get(j).getData().add(axisChartDataDTO);
+        }
+
+
+        map.put("data", series);
+        return map;
+    }
+
     // 基础图形
     public static Map<String, Object> transChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
         Map<String, Object> map = new HashMap<>();
diff --git a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
index f64e025875..fcaa3ec7f8 100644
--- a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
+++ b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
@@ -64,12 +64,12 @@
           show-position="viewDialog"
         />
         <chart-component-s2
-          v-if="optType === 'details' && sourceViewType !== 'chart-mix'"
+          v-if="optType === 'details' && !sourceViewType.includes('chart-mix')"
           :view="viewInfo"
           show-position="viewDialog"
           ref="chartComponentDetails"
         />
-        <template v-else-if="optType === 'details' && sourceViewType === 'chart-mix'">
+        <template v-else-if="optType === 'details' && sourceViewType.includes('chart-mix')">
           <el-tabs class="tab-header" v-model="activeName" @tab-change="handleClick">
             <el-tab-pane :label="t('chart.drag_block_value_axis_left')" name="left"></el-tab-pane>
             <el-tab-pane :label="t('chart.drag_block_value_axis_right')" name="right"></el-tab-pane>
@@ -214,7 +214,7 @@ const dialogInit = (canvasStyle, view, item, opt) => {
 const dataDetailsOpt = () => {
   nextTick(() => {
     const viewDataInfo = dvMainStore.getViewDataDetails(viewInfo.value.id)
-    if (sourceViewType.value === 'chart-mix') {
+    if (sourceViewType.value.includes('chart-mix')) {
       chartComponentDetails.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.left)
       chartComponentDetails2.value?.renderChartFromDialog(viewInfo.value, viewDataInfo.right)
     } else {
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 57acae5d4a..434c9c3266 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -883,6 +883,8 @@ export default {
     last_layer: '当前已经是最后一级',
     radar_size: '大小',
     chart_mix: '柱线组合图',
+    chart_mix_group_column: '分组柱线组合图',
+    chart_mix_stack_column: '堆叠柱线组合图',
     axis_value: '轴值',
     axis_value_min: '最小值',
     axis_value_max: '最大值',
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
index e69fe28df5..a748ecf58a 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
@@ -226,7 +226,13 @@ onMounted(() => {
           class="drop-style"
           :class="themes === 'dark' ? 'dark-dimension-quota' : ''"
         >
-          <el-dropdown-item @click.prevent>
+          <el-dropdown-item
+            @click.prevent
+            v-if="
+              !chart.type.includes('chart-mix') ||
+              (chart.type.includes('chart-mix') && type === 'dimension')
+            "
+          >
             <el-dropdown
               :effect="themes"
               popper-class="data-dropdown_popper_mr9"
@@ -305,7 +311,14 @@ onMounted(() => {
             </el-dropdown>
           </el-dropdown-item>
 
-          <el-dropdown-item @click.prevent v-if="item.deType === 1" divided>
+          <el-dropdown-item
+            @click.prevent
+            v-if="item.deType === 1"
+            :divided="
+              !chart.type.includes('chart-mix') ||
+              (chart.type.includes('chart-mix') && type === 'dimension')
+            "
+          >
             <el-dropdown
               :effect="themes"
               placement="right-start"
@@ -495,7 +508,14 @@ onMounted(() => {
               </template>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item class="menu-item-padding" divided :command="beforeClickItem('rename')">
+          <el-dropdown-item
+            class="menu-item-padding"
+            :divided="
+              !chart.type.includes('chart-mix') ||
+              (chart.type.includes('chart-mix') && type === 'dimension')
+            "
+            :command="beforeClickItem('rename')"
+          >
             <el-icon>
               <icon name="icon_edit_outlined"></icon>
             </el-icon>
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
index 23aee8dbe6..4669542aa9 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
@@ -665,7 +665,10 @@ onMounted(() => {
           <el-dropdown-item
             @click.prevent
             v-if="
-              props.type !== 'extLabel' && props.type !== 'extTooltip' && props.type !== 'extBubble'
+              props.type !== 'extLabel' &&
+              props.type !== 'extTooltip' &&
+              props.type !== 'extBubble' &&
+              !chart.type.includes('chart-mix')
             "
             :divided="chart.type !== 'table-info'"
           >
@@ -739,6 +742,7 @@ onMounted(() => {
             "
             :icon="Filter"
             :command="beforeClickItem('filter')"
+            :divided="chart.type.includes('chart-mix')"
           >
             <span>{{ t('chart.filter') }}...</span>
           </el-dropdown-item>
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-label/DimensionLabel.vue b/core/core-frontend/src/views/chart/components/editor/drag-label/DimensionLabel.vue
index 3e1ee38c7a..0b222a7e63 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-label/DimensionLabel.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-label/DimensionLabel.vue
@@ -21,7 +21,7 @@ const props = defineProps({
         (props.view.type.includes('bar') ||
           props.view.type.includes('line') ||
           props.view.type.includes('scatter') ||
-          props.view.type === 'chart-mix' ||
+          props.view.type.includes('chart-mix') ||
           props.view.type === 'waterfall' ||
           props.view.type === 'area' ||
           props.view.type === 'area-stack')
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue b/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue
index 7ae53b8c58..f5a5bbfb63 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-label/QuotaLabel.vue
@@ -45,7 +45,7 @@ const props = defineProps({
     <span v-else-if="props.view.type && props.view.type.includes('tree')">{{
       t('chart.drag_block_treemap_size')
     }}</span>
-    <span v-else-if="props.view.type && props.view.type === 'chart-mix'">{{
+    <span v-else-if="props.view.type && props.view.type.includes('chart-mix')">{{
       t('chart.drag_block_value_axis_main')
     }}</span>
     <span v-else-if="props.view.type && props.view.type === 'liquid'">{{
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
index ca434bda5c..6167b5180c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
@@ -41,7 +41,7 @@ const quotaExtFields = computed<Array<any>>(() => {
 })
 
 const useQuotaExt = computed<boolean>(() => {
-  return props.chart.type === 'chart-mix'
+  return props.chart.type.includes('chart-mix')
 })
 
 const state = reactive({
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index 4480a36c4d..84ab972fe2 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -124,7 +124,7 @@ const onChangeXAxisForm = (val, prop) => {
 }
 
 const onChangeYAxisForm = (val, prop) => {
-  if (prop === 'show' && chart.value.type === 'chart-mix') {
+  if (prop === 'show' && chart.value.type.includes('chart-mix')) {
     chart.value.customStyle.yAxisExt.show = val.show
     onChangeYAxisExtForm(chart.value.customStyle.yAxisExt, 'show')
   }
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 562247d497..1356650bb7 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -614,7 +614,7 @@ const addAxis = (e, axis: AxisType) => {
       emitter.emit('removeAxis', { axisType: 'yAxis', axis, editType: 'remove' })
     }
   }
-  if (view.value.type === 'chart-mix') {
+  if (view.value.type.includes('chart-mix')) {
     if (axis === 'yAxis') {
       if (view.value.yAxisExt.length > 0) {
         const chartType = view.value.yAxisExt[0].chartType
@@ -1032,7 +1032,6 @@ const saveRename = ref => {
   ref.validate(valid => {
     if (valid) {
       const { renameType, index, chartShowName } = state.itemForm
-      console.log(renameType)
       let axisType, axis
       switch (renameType) {
         case 'quota':
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 4e12c2bfbe..d0ed6c2213 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -1374,6 +1374,20 @@ export const CHART_TYPE_CONFIGS = [
         value: 'chart-mix',
         title: t('chart.chart_mix'),
         icon: 'chart-mix'
+      },
+      {
+        render: 'antv',
+        category: 'dual_axes',
+        value: 'chart-mix-group',
+        title: t('chart.chart_mix_group_column'),
+        icon: 'chart-mix'
+      },
+      {
+        render: 'antv',
+        category: 'dual_axes',
+        value: 'chart-mix-stack',
+        title: t('chart.chart_mix_stack_column'),
+        icon: 'chart-mix'
       }
     ]
   },
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
index 126d7f4d3b..9a5baf3149 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts
@@ -72,6 +72,9 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
     const data1Type = 'column'
     const data2Type = 'line'
 
+    const isGroup = this.name === 'chart-mix-group' && chart.xAxisExt?.length > 0
+    const isStack = this.name === 'chart-mix-stack' && chart.extStack?.length > 0
+    const seriesField = isGroup ? 'category' : isStack ? 'category' : undefined
     const seriesField2 = chart.extBubble?.length > 0 ? 'category' : undefined
 
     const data1 = defaultTo(left[0]?.data, [])
@@ -104,7 +107,11 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       geometryOptions: [
         {
           geometry: data1Type,
-          color: color[0]
+          color: isGroup || isStack ? color : color[0],
+
+          isGroup: isGroup,
+          isStack: isStack,
+          seriesField: seriesField
         },
         {
           geometry: data2Type,
@@ -398,11 +405,12 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
       o.legend.itemName = {
         formatter: (text: string, item: any, index: number) => {
           let name = undefined
-          if (index === 0 && text === 'value') {
+          if (item.viewId === 'left-axes-view' && text === 'value') {
             name = left[0]?.name
-          } else if (index === 1 && text === 'valueExt') {
+          } else if (item.viewId === 'right-axes-view' && text === 'valueExt') {
             name = right[0]?.name
           }
+          item.id = item.id + '__' + index //防止重复的图例出现问题，但是左右轴如果有相同的怎么办
           if (name === undefined) {
             return text
           } else {
@@ -447,3 +455,32 @@ export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
     super(name, DEFAULT_DATA)
   }
 }
+
+export class GroupColumnLineMix extends ColumnLineMix {
+  axis: AxisType[] = [...this['axis'], 'xAxisExt']
+  axisConfig = {
+    ...this['axisConfig'],
+    yAxis: {
+      name: `${t('chart.drag_block_value_axis_left')} / ${t('chart.column_quota')}`,
+      limit: 1,
+      type: 'q'
+    }
+  }
+  constructor(name = 'chart-mix-group') {
+    super(name)
+  }
+}
+export class StackColumnLineMix extends ColumnLineMix {
+  axis: AxisType[] = [...this['axis'], 'extStack']
+  axisConfig = {
+    ...this['axisConfig'],
+    yAxis: {
+      name: `${t('chart.drag_block_value_axis_left')} / ${t('chart.column_quota')}`,
+      limit: 1,
+      type: 'q'
+    }
+  }
+  constructor(name = 'chart-mix-stack') {
+    super(name)
+  }
+}
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index 59bdf7fc60..2a9a384724 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -676,7 +676,8 @@ export function getAnalyse(chart: Chart) {
       return (
         dynamicLineFields?.includes(item.fieldId) &&
         (!!_.find(quotaFields, d => d.id === item.fieldId) ||
-          (!!_.find(quotaExtFields, d => d.id === item.fieldId) && chart.type === 'chart-mix'))
+          (!!_.find(quotaExtFields, d => d.id === item.fieldId) &&
+            chart.type.includes('chart-mix')))
       )
     })
     const lines = fixedLines.concat(dynamicLines)
diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts
index cbd0c170a6..9bc8765741 100644
--- a/core/core-frontend/src/views/chart/components/js/util.ts
+++ b/core/core-frontend/src/views/chart/components/js/util.ts
@@ -467,7 +467,7 @@ export const exportExcelDownload = (chart, callBack?) => {
     viewInfo: chart,
     viewName: excelName
   }
-  if (chart.type === 'chart-mix') {
+  if (chart.type.includes('chart-mix')) {
     const req1 = getExcelDownloadRequest(chart.data.left)
     const req2 = getExcelDownloadRequest(chart.data.right)
     request = {