From a8e6e2d0e127c13ecdcb814ce72b09492d17244d Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Wed, 21 Jul 2021 17:36:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A0=86=E5=8F=A0=E5=9B=BE=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=A0=86=E5=8F=A0=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/domain/ChartViewWithBLOBs.java       |   2 +
 .../dataease/base/mapper/ChartViewMapper.xml  |  25 +-
 .../io/dataease/provider/QueryProvider.java   |  13 +
 .../provider/doris/DorisQueryProvider.java    |  98 +++++++
 .../provider/mysql/MysqlQueryProvider.java    | 117 ++++++++
 .../provider/oracle/OracleQueryProvider.java  | 102 ++++++-
 .../sqlserver/SqlserverQueryProvider.java     |  10 +
 .../service/chart/ChartViewService.java       | 264 +++++++++++++-----
 .../db/migration/V16__alter_chart_view.sql    |   3 +
 .../src/main/resources/generatorConfig.xml    |   8 +-
 frontend/src/lang/en.js                       |   1 +
 frontend/src/lang/tw.js                       |   3 +-
 frontend/src/lang/zh.js                       |   3 +-
 .../components/drag-item/ChartDragItem.vue    | 152 ++++++++++
 frontend/src/views/chart/group/Group.vue      |   3 +
 frontend/src/views/chart/view/ChartEdit.vue   | 169 ++++++-----
 16 files changed, 826 insertions(+), 147 deletions(-)
 create mode 100644 backend/src/main/resources/db/migration/V16__alter_chart_view.sql
 create mode 100644 frontend/src/views/chart/components/drag-item/ChartDragItem.vue

diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java b/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
index bc06da0a28..a3510da1c9 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
@@ -13,6 +13,8 @@ public class ChartViewWithBLOBs extends ChartView implements Serializable {
 
     private String yAxis;
 
+    private String extStack;
+
     private String customAttr;
 
     private String customStyle;
diff --git a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
index 2d91efd41a..d89b3a0613 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
@@ -16,6 +16,7 @@
   <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewWithBLOBs">
     <result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
     <result column="y_axis" jdbcType="LONGVARCHAR" property="yAxis" />
+    <result column="ext_stack" jdbcType="LONGVARCHAR" property="extStack" />
     <result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" />
     <result column="custom_style" jdbcType="LONGVARCHAR" property="customStyle" />
     <result column="custom_filter" jdbcType="LONGVARCHAR" property="customFilter" />
@@ -84,7 +85,7 @@
     style_priority
   </sql>
   <sql id="Blob_Column_List">
-    x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot
+    x_axis, y_axis, ext_stack, custom_attr, custom_style, custom_filter, snapshot
   </sql>
   <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
     select
@@ -139,14 +140,14 @@
       table_id, `type`, title, 
       create_by, create_time, update_time, 
       style_priority, x_axis, y_axis, 
-      custom_attr, custom_style, custom_filter, 
-      snapshot)
+      ext_stack, custom_attr, custom_style, 
+      custom_filter, snapshot)
     values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{sceneId,jdbcType=VARCHAR}, 
       #{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR}, 
       #{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, 
       #{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR}, #{yAxis,jdbcType=LONGVARCHAR}, 
-      #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}, 
-      #{snapshot,jdbcType=LONGVARCHAR})
+      #{extStack,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, 
+      #{customFilter,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
     insert into chart_view
@@ -187,6 +188,9 @@
       <if test="yAxis != null">
         y_axis,
       </if>
+      <if test="extStack != null">
+        ext_stack,
+      </if>
       <if test="customAttr != null">
         custom_attr,
       </if>
@@ -237,6 +241,9 @@
       <if test="yAxis != null">
         #{yAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="extStack != null">
+        #{extStack,jdbcType=LONGVARCHAR},
+      </if>
       <if test="customAttr != null">
         #{customAttr,jdbcType=LONGVARCHAR},
       </if>
@@ -296,6 +303,9 @@
       <if test="record.yAxis != null">
         y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="record.extStack != null">
+        ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
+      </if>
       <if test="record.customAttr != null">
         custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
       </if>
@@ -327,6 +337,7 @@
       style_priority = #{record.stylePriority,jdbcType=VARCHAR},
       x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
+      ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
       custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
       custom_style = #{record.customStyle,jdbcType=LONGVARCHAR},
       custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
@@ -387,6 +398,9 @@
       <if test="yAxis != null">
         y_axis = #{yAxis,jdbcType=LONGVARCHAR},
       </if>
+      <if test="extStack != null">
+        ext_stack = #{extStack,jdbcType=LONGVARCHAR},
+      </if>
       <if test="customAttr != null">
         custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
       </if>
@@ -415,6 +429,7 @@
       style_priority = #{stylePriority,jdbcType=VARCHAR},
       x_axis = #{xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{yAxis,jdbcType=LONGVARCHAR},
+      ext_stack = #{extStack,jdbcType=LONGVARCHAR},
       custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
       custom_style = #{customStyle,jdbcType=LONGVARCHAR},
       custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
diff --git a/backend/src/main/java/io/dataease/provider/QueryProvider.java b/backend/src/main/java/io/dataease/provider/QueryProvider.java
index f8ea8f174e..07c77d29d7 100644
--- a/backend/src/main/java/io/dataease/provider/QueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/QueryProvider.java
@@ -36,10 +36,23 @@ public abstract class QueryProvider {
 
     public abstract String getSQLAsTmp(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
 
+    public abstract String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack);
+
+    public abstract String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack);
+
     public abstract String searchTable(String table);
 
     public abstract String getSQLSummary(String table, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
 
+    /**
+     * 单指标汇总
+     *
+     * @param sql
+     * @param yAxis
+     * @param customFilter
+     * @param extFilterRequestList
+     * @return
+     */
     public abstract String getSQLSummaryAsTmp(String sql, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
 
     public abstract String wrapSql(String sql);
diff --git a/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java b/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
index 6d93e4d8b3..839599a566 100644
--- a/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
@@ -263,6 +263,104 @@ public class DorisQueryProvider extends QueryProvider {
         return getSQL("(" + sql + ")", xAxis, yAxis, customFilter, extFilterRequestList);
     }
 
+    @Override
+    public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        SQLObj tableObj = SQLObj.builder()
+                .tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(DorisConstants.KEYWORD_TABLE, table))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 0))
+                .build();
+        List<SQLObj> xFields = new ArrayList<>();
+        List<SQLObj> xWheres = new ArrayList<>();
+        List<SQLObj> xOrders = new ArrayList<>();
+        List<ChartViewFieldDTO> xList = new ArrayList<>();
+        xList.addAll(xAxis);
+        xList.addAll(extStack);
+        if (CollectionUtils.isNotEmpty(xList)) {
+            for (int i = 0; i < xList.size(); i++) {
+                ChartViewFieldDTO x = xList.get(i);
+                String originField = String.format(DorisConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getDataeaseName());
+                String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
+                // 处理横轴字段
+                xFields.add(getXFields(x, originField, fieldAlias));
+                // 处理横轴过滤
+                xWheres.addAll(getXWheres(x, originField, fieldAlias));
+                // 处理横轴排序
+                if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
+                    xOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(x.getSort())
+                            .build());
+                }
+            }
+        }
+        List<SQLObj> yFields = new ArrayList<>();
+        List<SQLObj> yWheres = new ArrayList<>();
+        List<SQLObj> yOrders = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(yAxis)) {
+            for (int i = 0; i < yAxis.size(); i++) {
+                ChartViewFieldDTO y = yAxis.get(i);
+                String originField = String.format(DorisConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getDataeaseName());
+                String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
+                // 处理纵轴字段
+                yFields.add(getYFields(y, originField, fieldAlias));
+                // 处理纵轴过滤
+                yWheres.addAll(getYWheres(y, originField, fieldAlias));
+                // 处理纵轴排序
+                if (StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none")) {
+                    yOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(y.getSort())
+                            .build());
+                }
+            }
+        }
+        // 处理视图中字段过滤
+        List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
+        // 处理仪表板字段过滤
+        List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
+        // 构建sql所有参数
+        List<SQLObj> fields = new ArrayList<>();
+        fields.addAll(xFields);
+        fields.addAll(yFields);
+        List<SQLObj> wheres = new ArrayList<>();
+        wheres.addAll(xWheres);
+        if (customWheres != null) wheres.addAll(customWheres);
+        if (extWheres != null) wheres.addAll(extWheres);
+        List<SQLObj> groups = new ArrayList<>();
+        groups.addAll(xFields);
+        // 外层再次套sql
+        List<SQLObj> orders = new ArrayList<>();
+        orders.addAll(xOrders);
+        orders.addAll(yOrders);
+        List<SQLObj> aggWheres = new ArrayList<>();
+        aggWheres.addAll(yWheres);
+
+        STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
+        ST st_sql = stg.getInstanceOf("querySql");
+        if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
+        if (CollectionUtils.isNotEmpty(yFields)) st_sql.add("aggregators", yFields);
+        if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
+        if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
+        String sql = st_sql.render();
+
+        ST st = stg.getInstanceOf("querySql");
+        SQLObj tableSQL = SQLObj.builder()
+                .tableName(String.format(DorisConstants.BRACKETS, sql))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
+                .build();
+        if (CollectionUtils.isNotEmpty(aggWheres)) st.add("filters", aggWheres);
+        if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
+        if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
+        return st.render();
+    }
+
+    @Override
+    public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        return getSQLStack("(" + table + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
+    }
+
     @Override
     public String searchTable(String table) {
         return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
diff --git a/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java b/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
index 7a3e858797..41d9e3ea12 100644
--- a/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
@@ -254,6 +254,123 @@ public class MysqlQueryProvider extends QueryProvider {
         return getSQL("(" + sqlFix(sql) + ")", xAxis, yAxis, customFilter, extFilterRequestList);
     }
 
+    @Override
+    public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        SQLObj tableObj = SQLObj.builder()
+                .tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(MySQLConstants.KEYWORD_TABLE, table))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 0))
+                .build();
+        List<SQLObj> xFields = new ArrayList<>();
+        List<SQLObj> xWheres = new ArrayList<>();
+        List<SQLObj> xOrders = new ArrayList<>();
+        List<ChartViewFieldDTO> xList = new ArrayList<>();
+        xList.addAll(xAxis);
+        xList.addAll(extStack);
+        if (CollectionUtils.isNotEmpty(xList)) {
+            for (int i = 0; i < xList.size(); i++) {
+                ChartViewFieldDTO x = xList.get(i);
+                String originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
+                String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
+                // 处理横轴字段
+                xFields.add(getXFields(x, originField, fieldAlias));
+                // 处理横轴过滤
+                xWheres.addAll(getXWheres(x, originField, fieldAlias));
+                // 处理横轴排序
+                if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
+                    xOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(x.getSort())
+                            .build());
+                }
+            }
+        }
+        List<SQLObj> yFields = new ArrayList<>();
+        List<SQLObj> yWheres = new ArrayList<>();
+        List<SQLObj> yOrders = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(yAxis)) {
+            for (int i = 0; i < yAxis.size(); i++) {
+                ChartViewFieldDTO y = yAxis.get(i);
+                String originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getOriginName());
+                String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
+                // 处理纵轴字段
+                yFields.add(getYFields(y, originField, fieldAlias));
+                // 处理纵轴过滤
+                yWheres.addAll(getYWheres(y, originField, fieldAlias));
+                // 处理纵轴排序
+                if (StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none")) {
+                    yOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(y.getSort())
+                            .build());
+                }
+            }
+        }
+        List<SQLObj> stackFields = new ArrayList<>();
+        List<SQLObj> stackOrders = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(extStack)) {
+            for (int i = 0; i < extStack.size(); i++) {
+                ChartViewFieldDTO stack = extStack.get(i);
+                String originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), stack.getOriginName());
+                String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
+                // 处理横轴字段
+                stackFields.add(getXFields(stack, originField, fieldAlias));
+                // 处理横轴排序
+                if (StringUtils.isNotEmpty(stack.getSort()) && !StringUtils.equalsIgnoreCase(stack.getSort(), "none")) {
+                    stackOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(stack.getSort())
+                            .build());
+                }
+            }
+        }
+        // 处理视图中字段过滤
+        List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
+        // 处理仪表板字段过滤
+        List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
+        // 构建sql所有参数
+        List<SQLObj> fields = new ArrayList<>();
+        fields.addAll(xFields);
+        fields.addAll(yFields);
+        List<SQLObj> wheres = new ArrayList<>();
+        wheres.addAll(xWheres);
+        if (customWheres != null) wheres.addAll(customWheres);
+        if (extWheres != null) wheres.addAll(extWheres);
+        List<SQLObj> groups = new ArrayList<>();
+        groups.addAll(xFields);
+        // 外层再次套sql
+        List<SQLObj> orders = new ArrayList<>();
+        orders.addAll(xOrders);
+        orders.addAll(yOrders);
+        List<SQLObj> aggWheres = new ArrayList<>();
+        aggWheres.addAll(yWheres);
+
+        STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
+        ST st_sql = stg.getInstanceOf("querySql");
+        if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
+        if (CollectionUtils.isNotEmpty(yFields)) st_sql.add("aggregators", yFields);
+        if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
+        if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
+        String sql = st_sql.render();
+
+        ST st = stg.getInstanceOf("querySql");
+        SQLObj tableSQL = SQLObj.builder()
+                .tableName(String.format(MySQLConstants.BRACKETS, sql))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
+                .build();
+        if (CollectionUtils.isNotEmpty(aggWheres)) st.add("filters", aggWheres);
+        if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
+        if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
+        return st.render();
+    }
+
+    @Override
+    public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        return getSQLStack("(" + sqlFix(table) + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
+    }
+
     @Override
     public String searchTable(String table) {
         return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
diff --git a/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java b/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
index 1ea83f57a8..f9701a4362 100644
--- a/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
@@ -107,8 +107,7 @@ public class OracleQueryProvider extends QueryProvider {
     }
 
 
-
-    private List<SQLObj> xFields(String table, List<DatasetTableField> fields){
+    private List<SQLObj> xFields(String table, List<DatasetTableField> fields) {
         SQLObj tableObj = SQLObj.builder()
                 .tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(OracleConstants.KEYWORD_TABLE, table))
                 .tableAlias(String.format(OracleConstants.ALIAS_FIX, String.format(TABLE_ALIAS_PREFIX, 0)))
@@ -155,6 +154,7 @@ public class OracleQueryProvider extends QueryProvider {
         }
         return xFields;
     }
+
     private String sqlColumn(List<SQLObj> xFields) {
         String[] array = xFields.stream().map(f -> {
             return f.getFieldAlias();
@@ -287,6 +287,104 @@ public class OracleQueryProvider extends QueryProvider {
         return getSQL("(" + sqlFix(sql) + ")", xAxis, yAxis, customFilter, extFilterRequestList);
     }
 
+    @Override
+    public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        SQLObj tableObj = SQLObj.builder()
+                .tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(OracleConstants.KEYWORD_TABLE, table))
+                .tableAlias(String.format(OracleConstants.ALIAS_FIX, String.format(TABLE_ALIAS_PREFIX, 0)))
+                .build();
+        List<SQLObj> xFields = new ArrayList<>();
+        List<SQLObj> xWheres = new ArrayList<>();
+        List<SQLObj> xOrders = new ArrayList<>();
+        List<ChartViewFieldDTO> xList = new ArrayList<>();
+        xList.addAll(xAxis);
+        xList.addAll(extStack);
+        if (CollectionUtils.isNotEmpty(xList)) {
+            for (int i = 0; i < xList.size(); i++) {
+                ChartViewFieldDTO x = xList.get(i);
+                String originField = String.format(OracleConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
+                String fieldAlias = String.format(OracleConstants.ALIAS_FIX, String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i));
+                // 处理横轴字段
+                xFields.add(getXFields(x, originField, fieldAlias));
+                // 处理横轴过滤
+                xWheres.addAll(getXWheres(x, originField, fieldAlias));
+                // 处理横轴排序
+                if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
+                    xOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(x.getSort())
+                            .build());
+                }
+            }
+        }
+        List<SQLObj> yFields = new ArrayList<>();
+        List<SQLObj> yWheres = new ArrayList<>();
+        List<SQLObj> yOrders = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(yAxis)) {
+            for (int i = 0; i < yAxis.size(); i++) {
+                ChartViewFieldDTO y = yAxis.get(i);
+                String originField = String.format(OracleConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getOriginName());
+                String fieldAlias = String.format(OracleConstants.ALIAS_FIX, String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i));
+                // 处理纵轴字段
+                yFields.add(getYFields(y, originField, fieldAlias));
+                // 处理纵轴过滤
+                yWheres.addAll(getYWheres(y, originField, fieldAlias));
+                // 处理纵轴排序
+                if (StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none")) {
+                    yOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(y.getSort())
+                            .build());
+                }
+            }
+        }
+        // 处理视图中字段过滤
+        List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
+        // 处理仪表板字段过滤
+        List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
+        // 构建sql所有参数
+        List<SQLObj> fields = new ArrayList<>();
+        fields.addAll(xFields);
+        fields.addAll(yFields);
+        List<SQLObj> wheres = new ArrayList<>();
+        wheres.addAll(xWheres);
+        if (customWheres != null) wheres.addAll(customWheres);
+        if (extWheres != null) wheres.addAll(extWheres);
+        List<SQLObj> groups = new ArrayList<>();
+        groups.addAll(xFields);
+        // 外层再次套sql
+        List<SQLObj> orders = new ArrayList<>();
+        orders.addAll(xOrders);
+        orders.addAll(yOrders);
+        List<SQLObj> aggWheres = new ArrayList<>();
+        aggWheres.addAll(yWheres);
+
+        STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
+        ST st_sql = stg.getInstanceOf("querySql");
+        if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
+        if (CollectionUtils.isNotEmpty(yFields)) st_sql.add("aggregators", yFields);
+        if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
+        if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
+        String sql = st_sql.render();
+
+        ST st = stg.getInstanceOf("querySql");
+        SQLObj tableSQL = SQLObj.builder()
+                .tableName(String.format(OracleConstants.BRACKETS, sql))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
+                .build();
+        if (CollectionUtils.isNotEmpty(aggWheres)) st.add("filters", aggWheres);
+        if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
+        if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
+        return st.render();
+    }
+
+    @Override
+    public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        return getSQLStack("(" + sqlFix(table) + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
+    }
+
     @Override
     public String searchTable(String table) {
         return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
diff --git a/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java b/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
index 9151ad4649..05a9c67061 100644
--- a/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
@@ -271,6 +271,16 @@ public class SqlserverQueryProvider extends QueryProvider {
         return getSQL(" (" + sqlFix(sql) + ") AS tmp ", xAxis, yAxis, customFilter, extFilterRequestList);
     }
 
+    @Override
+    public String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack) {
+        return null;
+    }
+
     @Override
     public String searchTable(String table) {
         return "SELECT table_name FROM information_schema.TABLES WHERE table_name ='" + table + "'";
diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 0c5caffd99..45f3143590 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -134,6 +134,8 @@ public class ChartViewService {
         }.getType());
         List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
+        List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
+        }.getType());
         List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
         }.getType());
         List<ChartCustomFilterDTO> customFilter = fieldCustomFilter.stream().map(ele -> {
@@ -145,24 +147,19 @@ public class ChartViewService {
             return dto;
         }).collect(Collectors.toList());
 
-//        if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
-//            xAxis = new ArrayList<>();
-//            if (CollectionUtils.isEmpty(yAxis)) {
-//                ChartViewDTO dto = new ChartViewDTO();
-//                BeanUtils.copyBean(dto, view);
-//                return dto;
-//            }
-//        } else {
-//            if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
-//                ChartViewDTO dto = new ChartViewDTO();
-//                BeanUtils.copyBean(dto, view);
-//                return dto;
-//            }
-//        }
-        if (CollectionUtils.isEmpty(xAxis) && CollectionUtils.isEmpty(yAxis)) {
-            ChartViewDTO dto = new ChartViewDTO();
-            BeanUtils.copyBean(dto, view);
-            return dto;
+        if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
+            xAxis = new ArrayList<>();
+            if (CollectionUtils.isEmpty(yAxis)) {
+                ChartViewDTO dto = new ChartViewDTO();
+                BeanUtils.copyBean(dto, view);
+                return dto;
+            }
+        } else {
+            if (CollectionUtils.isEmpty(xAxis) && CollectionUtils.isEmpty(yAxis)) {
+                ChartViewDTO dto = new ChartViewDTO();
+                BeanUtils.copyBean(dto, view);
+                return dto;
+            }
         }
 
         // 过滤来自仪表板的条件
@@ -204,12 +201,16 @@ public class ChartViewService {
                 datasourceRequest.setTable(dataTableInfoDTO.getTable());
                 if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
                     datasourceRequest.setQuery(qp.getSQLSummary(dataTableInfoDTO.getTable(), yAxis, customFilter, extFilterList));
+                } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+                    datasourceRequest.setQuery(qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extStack));
                 } else {
                     datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList));
                 }
             } else if (StringUtils.equalsIgnoreCase(table.getType(), "sql")) {
                 if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
                     datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(dataTableInfoDTO.getSql(), yAxis, customFilter, extFilterList));
+                } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpStack(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extStack));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -219,6 +220,8 @@ public class ChartViewService {
                 String sql = dataSetTableService.getCustomSQLDatasource(dt, list, ds);
                 if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
                     datasourceRequest.setQuery(qp.getSQLSummaryAsTmp(sql, yAxis, customFilter, extFilterList));
+                } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpStack(sql, xAxis, yAxis, customFilter, extFilterList, extStack));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -245,6 +248,8 @@ public class ChartViewService {
             QueryProvider qp = ProviderFactory.getQueryProvider(ds.getType());
             if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
                 datasourceRequest.setQuery(qp.getSQLSummary(tableName, yAxis, customFilter, extFilterList));
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+                datasourceRequest.setQuery(qp.getSQLStack(tableName, xAxis, yAxis, customFilter, extFilterList, extStack));
             } else {
                 datasourceRequest.setQuery(qp.getSQL(tableName, xAxis, yAxis, customFilter, extFilterList));
             }
@@ -279,67 +284,24 @@ public class ChartViewService {
                     }
                 }
             }
-
-
         }
         if (StringUtils.containsIgnoreCase(view.getType(), "pie") && data.size() > 1000) {
             data = data.subList(0, 1000);
         }
 
+        Map<String, Object> map = new TreeMap<>();
         // 图表组件可再扩展
-        List<String> x = new ArrayList<>();
-        List<Series> series = new ArrayList<>();
-        for (ChartViewFieldDTO y : yAxis) {
-            Series series1 = new Series();
-            series1.setName(y.getName());
-            series1.setType(view.getType());
-            series1.setData(new ArrayList<>());
-            series.add(series1);
+        Map<String, Object> mapChart;
+        if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+            mapChart = transStackChartData(xAxis, yAxis, view, data, extStack);
+        } else {
+            mapChart = transChartData(xAxis, yAxis, view, data);
         }
-        for (String[] d : data) {
-            StringBuilder a = new StringBuilder();
-            for (int i = 0; i < xAxis.size(); i++) {
-                if (i == xAxis.size() - 1) {
-                    a.append(d[i]);
-                } else {
-                    a.append(d[i]).append("\n");
-                }
-            }
-            x.add(a.toString());
-            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
-                int j = i - xAxis.size();
-                try {
-                    series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
-                } catch (Exception e) {
-                    series.get(j).getData().add(new BigDecimal(0));
-                }
-            }
-        }
-        // table组件
-        List<ChartViewFieldDTO> fields = new ArrayList<>();
-        List<Map<String, Object>> tableRow = new ArrayList<>();
-        if (ObjectUtils.isNotEmpty(xAxis) && !StringUtils.equalsIgnoreCase("text", view.getType()) && !StringUtils.equalsIgnoreCase("gauge", view.getType())) {
-            fields.addAll(xAxis);
-        }
-        fields.addAll(yAxis);
-        data.forEach(ele -> {
-            Map<String, Object> d = new HashMap<>();
-            for (int i = 0; i < fields.size(); i++) {
-                ChartViewFieldDTO chartViewFieldDTO = fields.get(i);
-                if (chartViewFieldDTO.getDeType() == 0 || chartViewFieldDTO.getDeType() == 1) {
-                    d.put(fields.get(i).getDataeaseName(), StringUtils.isEmpty(ele[i]) ? "" : ele[i]);
-                } else if (chartViewFieldDTO.getDeType() == 2 || chartViewFieldDTO.getDeType() == 3) {
-                    d.put(fields.get(i).getDataeaseName(), new BigDecimal(StringUtils.isEmpty(ele[i]) ? "0" : ele[i]).setScale(2, RoundingMode.HALF_UP));
-                }
-            }
-            tableRow.add(d);
-        });
+        // table组件，明细表，也用于导出数据
+        Map<String, Object> mapTableNormal = transTableNormal(xAxis, yAxis, view, data, extStack);
 
-        Map<String, Object> map = new HashMap<>();
-        map.put("x", x);
-        map.put("series", series);
-        map.put("fields", fields);
-        map.put("tableRow", tableRow);
+        map.putAll(mapChart);
+        map.putAll(mapTableNormal);
 
         ChartViewDTO dto = new ChartViewDTO();
         BeanUtils.copyBean(dto, view);
@@ -384,6 +346,166 @@ public class ChartViewService {
         return result;
     }
 
+    private Map<String, Object> transChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data) {
+        Map<String, Object> map = new HashMap<>();
+
+        List<String> x = new ArrayList<>();
+        List<Series> series = new ArrayList<>();
+        for (ChartViewFieldDTO y : yAxis) {
+            Series series1 = new Series();
+            series1.setName(y.getName());
+            series1.setType(view.getType());
+            series1.setData(new ArrayList<>());
+            series.add(series1);
+        }
+        for (String[] d : data) {
+            StringBuilder a = new StringBuilder();
+            for (int i = 0; i < xAxis.size(); i++) {
+                if (i == xAxis.size() - 1) {
+                    a.append(d[i]);
+                } else {
+                    a.append(d[i]).append("\n");
+                }
+            }
+            x.add(a.toString());
+            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                int j = i - xAxis.size();
+                try {
+                    series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
+                } catch (Exception e) {
+                    series.get(j).getData().add(new BigDecimal(0));
+                }
+            }
+        }
+
+        map.put("x", x);
+        map.put("series", series);
+        return map;
+    }
+
+    private Map<String, Object> transStackChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, List<ChartViewFieldDTO> extStack) {
+        Map<String, Object> map = new HashMap<>();
+
+        List<String> x = new ArrayList<>();
+        List<String> stack = new ArrayList<>();
+        List<Series> series = new ArrayList<>();
+
+        if (CollectionUtils.isNotEmpty(extStack)) {
+            BigDecimal defaultValue = StringUtils.containsIgnoreCase(view.getType(), "line") ? new BigDecimal(0) : null;
+            // 构建横轴
+            for (String[] d : data) {
+                StringBuilder a = new StringBuilder();
+                for (int i = 0; i < xAxis.size(); i++) {
+                    if (i == xAxis.size() - 1) {
+                        a.append(d[i]);
+                    } else {
+                        a.append(d[i]).append("\n");
+                    }
+                }
+                x.add(a.toString());
+            }
+            x = x.stream().distinct().collect(Collectors.toList());
+            // 构建堆叠
+            for (String[] d : data) {
+                stack.add(d[xAxis.size()]);
+            }
+            stack = stack.stream().distinct().collect(Collectors.toList());
+            for (String s : stack) {
+                Series series1 = new Series();
+                series1.setName(s);
+                series1.setType(view.getType());
+                List<BigDecimal> list = new ArrayList<>();
+                for (int i = 0; i < x.size(); i++) {
+                    list.add(defaultValue);
+                }
+                series1.setData(list);
+                series.add(series1);
+            }
+            for (Series ss : series) {
+                for (int i = 0; i < x.size(); i++) {
+                    for (String[] row : data) {
+                        String stackColumn = row[xAxis.size()];
+                        if (StringUtils.equals(ss.getName(), stackColumn)) {
+                            StringBuilder a = new StringBuilder();
+                            for (int j = 0; j < xAxis.size(); j++) {
+                                if (j == xAxis.size() - 1) {
+                                    a.append(row[j]);
+                                } else {
+                                    a.append(row[j]).append("\n");
+                                }
+                            }
+                            if (StringUtils.equals(a.toString(), x.get(i))) {
+                                ss.getData().set(i, new BigDecimal(row[xAxis.size() + extStack.size()]));
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        } else {
+            for (ChartViewFieldDTO y : yAxis) {
+                Series series1 = new Series();
+                series1.setName(y.getName());
+                series1.setType(view.getType());
+                series1.setData(new ArrayList<>());
+                series.add(series1);
+            }
+            for (String[] d : data) {
+                StringBuilder a = new StringBuilder();
+                for (int i = 0; i < xAxis.size(); i++) {
+                    if (i == xAxis.size() - 1) {
+                        a.append(d[i]);
+                    } else {
+                        a.append(d[i]).append("\n");
+                    }
+                }
+                x.add(a.toString());
+                for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                    int j = i - xAxis.size();
+                    try {
+                        series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
+                    } catch (Exception e) {
+                        series.get(j).getData().add(new BigDecimal(0));
+                    }
+                }
+            }
+        }
+
+        map.put("x", x);
+        map.put("series", series);
+        return map;
+    }
+
+    private Map<String, Object> transTableNormal(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, List<ChartViewFieldDTO> extStack) {
+        Map<String, Object> map = new TreeMap<>();
+        List<ChartViewFieldDTO> fields = new ArrayList<>();
+        List<Map<String, Object>> tableRow = new ArrayList<>();
+        if (ObjectUtils.isNotEmpty(xAxis)) {
+            fields.addAll(xAxis);
+        }
+        if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+            if (ObjectUtils.isNotEmpty(extStack)) {
+                fields.addAll(extStack);
+            }
+        }
+        fields.addAll(yAxis);
+        data.forEach(ele -> {
+            Map<String, Object> d = new HashMap<>();
+            for (int i = 0; i < fields.size(); i++) {
+                ChartViewFieldDTO chartViewFieldDTO = fields.get(i);
+                if (chartViewFieldDTO.getDeType() == 0 || chartViewFieldDTO.getDeType() == 1) {
+                    d.put(fields.get(i).getDataeaseName(), StringUtils.isEmpty(ele[i]) ? "" : ele[i]);
+                } else if (chartViewFieldDTO.getDeType() == 2 || chartViewFieldDTO.getDeType() == 3) {
+                    d.put(fields.get(i).getDataeaseName(), new BigDecimal(StringUtils.isEmpty(ele[i]) ? "0" : ele[i]).setScale(2, RoundingMode.HALF_UP));
+                }
+            }
+            tableRow.add(d);
+        });
+        map.put("fields", fields);
+        map.put("tableRow", tableRow);
+        return map;
+    }
+
     private void checkName(ChartViewWithBLOBs chartView) {
 //        if (StringUtils.isEmpty(chartView.getId())) {
 //            return;
diff --git a/backend/src/main/resources/db/migration/V16__alter_chart_view.sql b/backend/src/main/resources/db/migration/V16__alter_chart_view.sql
new file mode 100644
index 0000000000..e0a424fc72
--- /dev/null
+++ b/backend/src/main/resources/db/migration/V16__alter_chart_view.sql
@@ -0,0 +1,3 @@
+ALTER TABLE `chart_view` ADD COLUMN `ext_stack` LONGTEXT COMMENT '堆叠项' AFTER `y_axis`;
+
+UPDATE `chart_view` SET `ext_stack` = '[]';
\ No newline at end of file
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index 890da30db5..8eb8a0cc3f 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -64,7 +64,7 @@
 
         <!--要生成的数据库表 -->
 
-<!--                <table tableName="datasource"/>-->
+                <table tableName="chart_view"/>
 <!--        <table tableName="sys_dict"/>-->
 <!--        <table tableName="sys_dict_item"/>-->
 <!--        <table tableName="dataset_table_field"/>-->
@@ -74,9 +74,9 @@
 <!--        </table>-->
 <!--        <table tableName="v_dataset"/>-->
 <!--        <table tableName="sys_auth_detail"/>-->
-        <table tableName="dataset_table_task">
-            <columnOverride column="extra_data" javaType="java.lang.String" jdbcType="VARCHAR" />
-        </table>
+<!--        <table tableName="dataset_table_task">-->
+<!--            <columnOverride column="extra_data" javaType="java.lang.String" jdbcType="VARCHAR" />-->
+<!--        </table>-->
 
 
     </context>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 75483877d3..07657cc4c9 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -819,6 +819,7 @@ export default {
     drag_block_funnel_split: 'Funnel Split',
     drag_block_radar_length: 'Branch Length',
     drag_block_radar_label: 'Branch Label',
+    stack_item: 'Stack Item',
     map_range: 'Map range',
     select_map_range: 'Please select map range',
     area: 'Area'
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 2f333dde3a..468514f291 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -821,7 +821,8 @@ export default {
     drag_block_radar_label: '分支標簽',
     map_range: '地圖範圍',
     select_map_range: '請選擇地圖範圍',
-    area: '地區'
+    area: '地區',
+    stack_item: '堆疊項'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b54dd28e7b..d759095305 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -821,7 +821,8 @@ export default {
     drag_block_radar_label: '分支标签',
     map_range: '地图范围',
     select_map_range: '请选择地图范围',
-    area: '地区'
+    area: '地区',
+    stack_item: '堆叠项'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
new file mode 100644
index 0000000000..c14a509fdc
--- /dev/null
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -0,0 +1,152 @@
+<template>
+  <span>
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
+      <span style="float: left">
+        <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+        <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+        <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+        <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+      </span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+    </el-tag>
+    <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
+      <span class="el-dropdown-link">
+        <el-tag size="small" class="item-axis">
+          <span style="float: left">
+            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+          </span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
+        </el-tag>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-sort" />
+                  <span>{{ $t('chart.sort') }}</span>
+                  <span class="summary-span">({{ $t('chart.'+item.sort) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeSort('none')">{{ $t('chart.none') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSort('asc')">{{ $t('chart.asc') }}</el-dropdown-item>
+                <el-dropdown-item :command="beforeSort('desc')">{{ $t('chart.desc') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
+            <span>{{ $t('chart.delete') }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </span>
+    </el-dropdown>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'ChartDragItem',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'remove':
+          this.removeItem()
+          break
+        default:
+          break
+      }
+    },
+    beforeClickItem(type) {
+      return {
+        type: type
+      }
+    },
+    sort(param) {
+      // console.log(param)
+      this.item.sort = param.type
+      this.$emit('onItemChange', this.item)
+    },
+    beforeSort(type) {
+      return {
+        type: type
+      }
+    },
+    removeItem() {
+      this.item.index = this.index
+      this.$emit('onItemRemove', this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .item-axis {
+    padding: 1px 6px;
+    margin: 0 3px 2px 3px;
+    text-align: left;
+    height: 24px;
+    line-height: 22px;
+    display: flex;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    width: 159px;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;;
+  }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
+
+  .item-span-style{
+    display: inline-block;
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 4bb6d3ab3e..c06ffd53bb 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -741,6 +741,9 @@ export default {
         background: DEFAULT_BACKGROUND_COLOR,
         split: DEFAULT_SPLIT
       })
+      view.xaxis = JSON.stringify([])
+      view.yaxis = JSON.stringify([])
+      view.extStack = JSON.stringify([])
       view.customFilter = JSON.stringify([])
       post('/chart/view/save', view).then(response => {
         this.closeCreateChart()
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 194af8b662..6518203885 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -286,6 +286,26 @@
                       </transition-group>
                     </draggable>
                   </el-row>
+                  <el-row v-if="chart.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
+                    <span style="width: 80px;text-align: right;">
+                      <span v-if="chart.type.includes('stack')">{{ $t('chart.stack_item') }}</span>
+                      /
+                      <span>{{ $t('chart.dimension') }}</span>
+                    </span>
+                    <draggable
+                      v-model="view.extStack"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      group="drag"
+                      animation="300"
+                      :move="onMove"
+                      style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                      @add="addStack"
+                    >
+                      <transition-group class="draggable-group">
+                        <chart-drag-item v-for="(item,index) in view.extStack" :key="item.id" :param="param" :index="index" :item="item" @onItemChange="stackItemChange" @onItemRemove="stackItemRemove" />
+                      </transition-group>
+                    </draggable>
+                  </el-row>
                   <div class="padding-lr filter-class" style="margin-top: 6px;">
                     <span>{{ $t('chart.result_filter') }}</span>
                     <!--                    <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
@@ -458,6 +478,7 @@ import draggable from 'vuedraggable'
 import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
 import FilterItem from '../components/drag-item/FilterItem'
+import ChartDragItem from '../components/drag-item/ChartDragItem'
 import ResultFilterEditor from '../components/filter/ResultFilterEditor'
 import ChartComponent from '../components/ChartComponent'
 import bus from '@/utils/bus'
@@ -489,7 +510,7 @@ import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
 import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
 import TableNormal from '../components/table/TableNormal'
 import LabelNormal from '../components/normal/LabelNormal'
-import html2canvas from 'html2canvasde'
+// import html2canvas from 'html2canvasde'
 import TableSelector from './TableSelector'
 import FieldEdit from '../../dataset/data/FieldEdit'
 import { areaMapping } from '@/api/map/map'
@@ -518,7 +539,8 @@ export default {
     ChartComponent,
     QuotaItem,
     DimensionItem,
-    draggable
+    draggable,
+    ChartDragItem
   },
   props: {
     param: {
@@ -693,6 +715,11 @@ export default {
           ele.filter = []
         }
       })
+      view.extStack.forEach(function(ele) {
+        if (!ele.sort || ele.sort === '') {
+          ele.sort = 'none'
+        }
+      })
       if (view.type.startsWith('pie') || view.type.startsWith('funnel') || view.type.startsWith('text') || view.type.startsWith('gauge')) {
         if (view.yaxis.length > 1) {
           view.yaxis.splice(1, view.yaxis.length)
@@ -714,6 +741,7 @@ export default {
       view.customAttr = JSON.stringify(view.customAttr)
       view.customStyle = JSON.stringify(view.customStyle)
       view.customFilter = JSON.stringify(view.customFilter)
+      view.extStack = JSON.stringify(view.extStack)
       post('/chart/view/save', view).then(response => {
         // this.get(response.data.id);
         // this.getData(response.data.id)
@@ -733,67 +761,67 @@ export default {
       })
     },
 
-    saveSnapshot() {
-      if (this.view.title && this.view.title.length > 50) {
-        this.$warning(this.$t('chart.title_limit'))
-        return
-      }
-      if (this.loading) {
-        return
-      }
-      this.loading = true
-      html2canvas(this.$refs.imageWrapper).then(canvas => {
-        const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
-        if (snapshot !== '') {
-          const view = JSON.parse(JSON.stringify(this.view))
-          view.id = this.view.id
-          view.sceneId = this.view.sceneId
-          view.name = this.view.name ? this.view.name : this.table.name
-          view.tableId = this.view.tableId
-          view.xaxis.forEach(function(ele) {
-            // if (!ele.summary || ele.summary === '') {
-            //   ele.summary = 'sum'
-            // }
-            if (!ele.sort || ele.sort === '') {
-              ele.sort = 'none'
-            }
-            if (!ele.filter) {
-              ele.filter = []
-            }
-          })
-          view.yaxis.forEach(function(ele) {
-            if (!ele.summary || ele.summary === '') {
-              if (ele.id === 'count') {
-                ele.summary = 'count'
-              } else {
-                ele.summary = 'sum'
-              }
-            }
-            if (!ele.sort || ele.sort === '') {
-              ele.sort = 'none'
-            }
-            if (!ele.filter) {
-              ele.filter = []
-            }
-          })
-          if (view.type.startsWith('pie') || view.type.startsWith('funnel') || view.type.startsWith('gauge')) {
-            if (view.yaxis.length > 1) {
-              view.yaxis.splice(1, view.yaxis.length)
-            }
-          }
-          view.xaxis = JSON.stringify(view.xaxis)
-          view.yaxis = JSON.stringify(view.yaxis)
-          view.customAttr = JSON.stringify(view.customAttr)
-          view.customStyle = JSON.stringify(view.customStyle)
-          view.customFilter = JSON.stringify(view.customFilter)
-          view.snapshot = snapshot
-          post('/chart/view/save', view).then(response => {
-            this.loading = false
-            this.$success(this.$t('commons.save_success'))
-          })
-        }
-      })
-    },
+    // saveSnapshot() {
+    //   if (this.view.title && this.view.title.length > 50) {
+    //     this.$warning(this.$t('chart.title_limit'))
+    //     return
+    //   }
+    //   if (this.loading) {
+    //     return
+    //   }
+    //   this.loading = true
+    //   html2canvas(this.$refs.imageWrapper).then(canvas => {
+    //     const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
+    //     if (snapshot !== '') {
+    //       const view = JSON.parse(JSON.stringify(this.view))
+    //       view.id = this.view.id
+    //       view.sceneId = this.view.sceneId
+    //       view.name = this.view.name ? this.view.name : this.table.name
+    //       view.tableId = this.view.tableId
+    //       view.xaxis.forEach(function(ele) {
+    //         // if (!ele.summary || ele.summary === '') {
+    //         //   ele.summary = 'sum'
+    //         // }
+    //         if (!ele.sort || ele.sort === '') {
+    //           ele.sort = 'none'
+    //         }
+    //         if (!ele.filter) {
+    //           ele.filter = []
+    //         }
+    //       })
+    //       view.yaxis.forEach(function(ele) {
+    //         if (!ele.summary || ele.summary === '') {
+    //           if (ele.id === 'count') {
+    //             ele.summary = 'count'
+    //           } else {
+    //             ele.summary = 'sum'
+    //           }
+    //         }
+    //         if (!ele.sort || ele.sort === '') {
+    //           ele.sort = 'none'
+    //         }
+    //         if (!ele.filter) {
+    //           ele.filter = []
+    //         }
+    //       })
+    //       if (view.type.startsWith('pie') || view.type.startsWith('funnel') || view.type.startsWith('gauge')) {
+    //         if (view.yaxis.length > 1) {
+    //           view.yaxis.splice(1, view.yaxis.length)
+    //         }
+    //       }
+    //       view.xaxis = JSON.stringify(view.xaxis)
+    //       view.yaxis = JSON.stringify(view.yaxis)
+    //       view.customAttr = JSON.stringify(view.customAttr)
+    //       view.customStyle = JSON.stringify(view.customStyle)
+    //       view.customFilter = JSON.stringify(view.customFilter)
+    //       view.snapshot = snapshot
+    //       post('/chart/view/save', view).then(response => {
+    //         this.loading = false
+    //         this.$success(this.$t('commons.save_success'))
+    //       })
+    //     }
+    //   })
+    // },
     closeEdit() {
       if (this.view.title && this.view.title.length > 50) {
         this.$warning(this.$t('chart.title_limit'))
@@ -813,6 +841,7 @@ export default {
           this.view = JSON.parse(JSON.stringify(response.data))
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
+          this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
           this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
           this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
           this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
@@ -1254,6 +1283,20 @@ export default {
         delete resultNode.children
       }
       return resultNode
+    },
+    addStack(e) {
+      this.dragCheckType(this.dimensionData, 'd')
+      if (this.view.extStack && this.view.extStack.length > 1) {
+        this.view.extStack = [this.view.extStack[0]]
+      }
+      this.save(true)
+    },
+    stackItemChange(item) {
+      this.save(true)
+    },
+    stackItemRemove(item) {
+      this.view.extStack.splice(item.index, 1)
+      this.save(true)
     }
   }
 }