From 9ec5e808809f9bf01d8737a268929a8b4863a406 Mon Sep 17 00:00:00 2001
From: xuwei-fit2cloud <wei@fit2cloud.com>
Date: Fri, 6 Aug 2021 10:27:57 +0800
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E5=B7=A5?=
 =?UTF-8?q?=E7=A8=8B=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitattributes | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .gitattributes

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..3c200cd4a9
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.sql linguist-language=java

From 911573673b18c59fb7eb7ff3b75678637fb39b8a Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 6 Aug 2021 16:15:59 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=95=A3=E7=82=B9=E5=9B=BE?=
 =?UTF-8?q?=E3=80=81=E6=B0=94=E6=B3=A1=E5=9B=BE?=
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  |  31 +++--
 .../java/io/dataease/dto/chart/Series.java    |   2 +-
 .../io/dataease/provider/QueryProvider.java   |   4 +
 .../provider/doris/DorisQueryProvider.java    | 114 +++++++++++++++++
 .../provider/mysql/MysqlQueryProvider.java    | 119 +++++++++++++++---
 .../provider/oracle/OracleQueryProvider.java  | 114 +++++++++++++++++
 .../service/chart/ChartViewService.java       |  70 ++++++++++-
 .../db/migration/V19__area_mapping.sql        |   2 +
 .../src/main/resources/generatorConfig.xml    |   2 +-
 frontend/src/lang/en.js                       |   5 +-
 frontend/src/lang/tw.js                       |   5 +-
 frontend/src/lang/zh.js                       |   5 +-
 frontend/src/views/chart/chart/chart.js       |  62 ++++++++-
 .../src/views/chart/chart/scatter/scatter.js  |  57 +++++++++
 .../views/chart/components/ChartComponent.vue |   5 +-
 .../components/drag-item/ChartDragItem.vue    |  51 +++++++-
 .../components/shape-attr/SizeSelector.vue    |  16 +++
 frontend/src/views/chart/group/Group.vue      |   1 +
 frontend/src/views/chart/view/ChartEdit.vue   |  79 +++++++++++-
 20 files changed, 708 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/views/chart/chart/scatter/scatter.js

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 5cb65dbda2..78322fe558 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java
@@ -15,6 +15,8 @@ public class ChartViewWithBLOBs extends ChartView implements Serializable {
 
     private String extStack;
 
+    private String extBubble;
+
     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 c5c452beef..10137408e3 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
@@ -17,6 +17,7 @@
     <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="ext_bubble" jdbcType="LONGVARCHAR" property="extBubble" />
     <result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" />
     <result column="custom_style" jdbcType="LONGVARCHAR" property="customStyle" />
     <result column="custom_filter" jdbcType="LONGVARCHAR" property="customFilter" />
@@ -86,8 +87,8 @@
     style_priority
   </sql>
   <sql id="Blob_Column_List">
-    x_axis, y_axis, ext_stack, custom_attr, custom_style, custom_filter, drill_fields, 
-    snapshot
+    x_axis, y_axis, ext_stack, ext_bubble, custom_attr, custom_style, custom_filter, 
+    drill_fields, snapshot
   </sql>
   <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewExample" resultMap="ResultMapWithBLOBs">
     select
@@ -142,16 +143,16 @@
       table_id, `type`, title, 
       create_by, create_time, update_time, 
       style_priority, x_axis, y_axis, 
-      ext_stack, custom_attr, custom_style, 
-      custom_filter, drill_fields, snapshot
-      )
+      ext_stack, ext_bubble, custom_attr, 
+      custom_style, custom_filter, drill_fields, 
+      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}, 
-      #{extStack,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, 
-      #{customFilter,jdbcType=LONGVARCHAR}, #{drillFields,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR}
-      )
+      #{extStack,jdbcType=LONGVARCHAR}, #{extBubble,jdbcType=LONGVARCHAR}, #{customAttr,jdbcType=LONGVARCHAR}, 
+      #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}, #{drillFields,jdbcType=LONGVARCHAR}, 
+      #{snapshot,jdbcType=LONGVARCHAR})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
     insert into chart_view
@@ -195,6 +196,9 @@
       <if test="extStack != null">
         ext_stack,
       </if>
+      <if test="extBubble != null">
+        ext_bubble,
+      </if>
       <if test="customAttr != null">
         custom_attr,
       </if>
@@ -251,6 +255,9 @@
       <if test="extStack != null">
         #{extStack,jdbcType=LONGVARCHAR},
       </if>
+      <if test="extBubble != null">
+        #{extBubble,jdbcType=LONGVARCHAR},
+      </if>
       <if test="customAttr != null">
         #{customAttr,jdbcType=LONGVARCHAR},
       </if>
@@ -316,6 +323,9 @@
       <if test="record.extStack != null">
         ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
       </if>
+      <if test="record.extBubble != null">
+        ext_bubble = #{record.extBubble,jdbcType=LONGVARCHAR},
+      </if>
       <if test="record.customAttr != null">
         custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
       </if>
@@ -351,6 +361,7 @@
       x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
       ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
+      ext_bubble = #{record.extBubble,jdbcType=LONGVARCHAR},
       custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
       custom_style = #{record.customStyle,jdbcType=LONGVARCHAR},
       custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
@@ -415,6 +426,9 @@
       <if test="extStack != null">
         ext_stack = #{extStack,jdbcType=LONGVARCHAR},
       </if>
+      <if test="extBubble != null">
+        ext_bubble = #{extBubble,jdbcType=LONGVARCHAR},
+      </if>
       <if test="customAttr != null">
         custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
       </if>
@@ -447,6 +461,7 @@
       x_axis = #{xAxis,jdbcType=LONGVARCHAR},
       y_axis = #{yAxis,jdbcType=LONGVARCHAR},
       ext_stack = #{extStack,jdbcType=LONGVARCHAR},
+      ext_bubble = #{extBubble,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/dto/chart/Series.java b/backend/src/main/java/io/dataease/dto/chart/Series.java
index bfbb353f71..2052dca0cd 100644
--- a/backend/src/main/java/io/dataease/dto/chart/Series.java
+++ b/backend/src/main/java/io/dataease/dto/chart/Series.java
@@ -15,5 +15,5 @@ import java.util.List;
 public class Series {
     private String name;
     private String type;
-    private List<BigDecimal> data;
+    private List<Object> data;
 }
diff --git a/backend/src/main/java/io/dataease/provider/QueryProvider.java b/backend/src/main/java/io/dataease/provider/QueryProvider.java
index b6c97d0a31..b0ba96cb2c 100644
--- a/backend/src/main/java/io/dataease/provider/QueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/QueryProvider.java
@@ -40,6 +40,10 @@ public abstract class QueryProvider {
 
     public abstract String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack);
 
+    public abstract String getSQLScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble);
+
+    public abstract String getSQLAsTmpScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble);
+
     public abstract String searchTable(String table);
 
     public abstract String getSQLSummary(String table, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
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 fc995d6e11..96d22045fe 100644
--- a/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
@@ -407,6 +407,120 @@ public class DorisQueryProvider extends QueryProvider {
         return getSQLStack("(" + table + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
     }
 
+    @Override
+    public String getSQLScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble) {
+        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<>();
+        if (CollectionUtils.isNotEmpty(xAxis)) {
+            for (int i = 0; i < xAxis.size(); i++) {
+                ChartViewFieldDTO x = xAxis.get(i);
+                String originField;
+                if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 2) {
+                    // 解析origin name中有关联的字段生成sql表达式
+                    originField = calcFieldRegex(x.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 1) {
+                    originField = String.format(DorisConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getDataeaseName());
+                } else {
+                    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<>();
+        List<ChartViewFieldDTO> yList = new ArrayList<>();
+        yList.addAll(yAxis);
+        yList.addAll(extBubble);
+        if (CollectionUtils.isNotEmpty(yList)) {
+            for (int i = 0; i < yList.size(); i++) {
+                ChartViewFieldDTO y = yList.get(i);
+                String originField;
+                if (ObjectUtils.isNotEmpty(y.getExtField()) && y.getExtField() == 2) {
+                    // 解析origin name中有关联的字段生成sql表达式
+                    originField = calcFieldRegex(y.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(y.getExtField()) && y.getExtField() == 1) {
+                    originField = String.format(DorisConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getDataeaseName());
+                } else {
+                    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 getSQLAsTmpScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble) {
+        return getSQLScatter("(" + table + ")", xAxis, yAxis, customFilter, extFilterRequestList, extBubble);
+    }
+
     @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 13ba47b27f..56ad71c2f8 100644
--- a/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
@@ -354,29 +354,116 @@ public class MysqlQueryProvider extends QueryProvider {
                 }
             }
         }
-        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);
+        // 处理视图中字段过滤
+        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 getSQLScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble) {
+        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<>();
+        if (CollectionUtils.isNotEmpty(xAxis)) {
+            for (int i = 0; i < xAxis.size(); i++) {
+                ChartViewFieldDTO x = xAxis.get(i);
                 String originField;
-                if (ObjectUtils.isNotEmpty(stack.getExtField()) && stack.getExtField() == 2) {
+                if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 2) {
                     // 解析origin name中有关联的字段生成sql表达式
-                    originField = calcFieldRegex(stack.getOriginName(), tableObj);
-                } else if (ObjectUtils.isNotEmpty(stack.getExtField()) && stack.getExtField() == 1) {
-                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), stack.getOriginName());
+                    originField = calcFieldRegex(x.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 1) {
+                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
                 } else {
-                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), stack.getOriginName());
+                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
                 }
                 String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
                 // 处理横轴字段
-                stackFields.add(getXFields(stack, originField, fieldAlias));
+                xFields.add(getXFields(x, originField, fieldAlias));
+                // 处理横轴过滤
+//                xWheres.addAll(getXWheres(x, originField, fieldAlias));
                 // 处理横轴排序
-                if (StringUtils.isNotEmpty(stack.getSort()) && !StringUtils.equalsIgnoreCase(stack.getSort(), "none")) {
-                    stackOrders.add(SQLObj.builder()
+                if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
+                    xOrders.add(SQLObj.builder()
                             .orderField(originField)
                             .orderAlias(fieldAlias)
-                            .orderDirection(stack.getSort())
+                            .orderDirection(x.getSort())
+                            .build());
+                }
+            }
+        }
+        List<SQLObj> yFields = new ArrayList<>();
+        List<SQLObj> yWheres = new ArrayList<>();
+        List<SQLObj> yOrders = new ArrayList<>();
+        List<ChartViewFieldDTO> yList = new ArrayList<>();
+        yList.addAll(yAxis);
+        yList.addAll(extBubble);
+        if (CollectionUtils.isNotEmpty(yList)) {
+            for (int i = 0; i < yList.size(); i++) {
+                ChartViewFieldDTO y = yList.get(i);
+                String originField;
+                if (ObjectUtils.isNotEmpty(y.getExtField()) && y.getExtField() == 2) {
+                    // 解析origin name中有关联的字段生成sql表达式
+                    originField = calcFieldRegex(y.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(y.getExtField()) && y.getExtField() == 1) {
+                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getOriginName());
+                } else {
+                    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());
                 }
             }
@@ -422,8 +509,8 @@ public class MysqlQueryProvider extends QueryProvider {
     }
 
     @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);
+    public String getSQLAsTmpScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble) {
+        return getSQLScatter("(" + sqlFix(table) + ")", xAxis, yAxis, customFilter, extFilterRequestList, extBubble);
     }
 
     @Override
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 124c383736..140387a1d3 100644
--- a/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
@@ -432,6 +432,120 @@ public class OracleQueryProvider extends QueryProvider {
         return getSQLStack("(" + sqlFix(table) + ")", xAxis, yAxis, customFilter, extFilterRequestList, extStack);
     }
 
+    @Override
+    public String getSQLScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble) {
+        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<>();
+        if (CollectionUtils.isNotEmpty(xAxis)) {
+            for (int i = 0; i < xAxis.size(); i++) {
+                ChartViewFieldDTO x = xAxis.get(i);
+                String originField;
+                if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 2) {
+                    // 解析origin name中有关联的字段生成sql表达式
+                    originField = calcFieldRegex(x.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 1) {
+                    originField = String.format(OracleConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
+                } else {
+                    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<>();
+        List<ChartViewFieldDTO> yList = new ArrayList<>();
+        yList.addAll(yAxis);
+        yList.addAll(extBubble);
+        if (CollectionUtils.isNotEmpty(yList)) {
+            for (int i = 0; i < yList.size(); i++) {
+                ChartViewFieldDTO y = yList.get(i);
+                String originField;
+                if (ObjectUtils.isNotEmpty(y.getExtField()) && y.getExtField() == 2) {
+                    // 解析origin name中有关联的字段生成sql表达式
+                    originField = calcFieldRegex(y.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(y.getExtField()) && y.getExtField() == 1) {
+                    originField = String.format(OracleConstants.KEYWORD_FIX, tableObj.getTableAlias(), y.getOriginName());
+                } else {
+                    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 getSQLAsTmpScatter(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extBubble) {
+        return getSQLScatter("(" + sqlFix(table) + ")", xAxis, yAxis, customFilter, extFilterRequestList, extBubble);
+    }
+
     @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 40405655c2..89c08d91e7 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -193,6 +193,8 @@ public class ChartViewService {
         }.getType());
         List<ChartViewFieldDTO> extStack = new Gson().fromJson(view.getExtStack(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
+        List<ChartViewFieldDTO> extBubble = new Gson().fromJson(view.getExtBubble(), new TypeToken<List<ChartViewFieldDTO>>() {
+        }.getType());
         List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
         }.getType());
         List<ChartCustomFilterDTO> customFilter = new ArrayList<>();
@@ -262,6 +264,8 @@ public class ChartViewService {
                     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 if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
+                    datasourceRequest.setQuery(qp.getSQLScatter(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extBubble));
                 } else {
                     datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -270,6 +274,8 @@ public class ChartViewService {
                     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 if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpScatter(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extBubble));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -281,6 +287,8 @@ public class ChartViewService {
                     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 if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpScatter(sql, xAxis, yAxis, customFilter, extFilterList, extBubble));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -309,6 +317,8 @@ public class ChartViewService {
                 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 if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
+                datasourceRequest.setQuery(qp.getSQLScatter(tableName, xAxis, yAxis, customFilter, extFilterList, extBubble));
             } else {
                 datasourceRequest.setQuery(qp.getSQL(tableName, xAxis, yAxis, customFilter, extFilterList));
             }
@@ -353,6 +363,8 @@ public class ChartViewService {
         Map<String, Object> mapChart;
         if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
             mapChart = transStackChartData(xAxis, yAxis, view, data, extStack);
+        } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
+            mapChart = transScatterData(xAxis, yAxis, view, data, extBubble);
         } else {
             mapChart = transChartData(xAxis, yAxis, view, data);
         }
@@ -405,6 +417,7 @@ 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<>();
 
@@ -442,6 +455,7 @@ public class ChartViewService {
         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<>();
 
@@ -473,7 +487,7 @@ public class ChartViewService {
                 Series series1 = new Series();
                 series1.setName(s);
                 series1.setType(view.getType());
-                List<BigDecimal> list = new ArrayList<>();
+                List<Object> list = new ArrayList<>();
                 for (int i = 0; i < x.size(); i++) {
                     list.add(defaultValue);
                 }
@@ -540,6 +554,60 @@ public class ChartViewService {
         return map;
     }
 
+    // 散点图
+    private Map<String, Object> transScatterData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, List<ChartViewFieldDTO> extBubble) {
+        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();
+                if (CollectionUtils.isNotEmpty(extBubble) && extBubble.size() > 0) {
+                    try {
+                        series.get(j).getData().add(new Object[]{
+                                a.toString(),
+                                new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]),
+                                new BigDecimal(StringUtils.isEmpty(d[xAxis.size() + yAxis.size()]) ? "0" : d[xAxis.size() + yAxis.size()])
+                        });
+                    } catch (Exception e) {
+                        series.get(j).getData().add(new Object[]{a.toString(), new BigDecimal(0), new BigDecimal(0)});
+                    }
+                } else {
+                    try {
+                        series.get(j).getData().add(new Object[]{
+                                a.toString(),
+                                new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i])
+                        });
+                    } catch (Exception e) {
+                        series.get(j).getData().add(new Object[]{a.toString(), 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<>();
diff --git a/backend/src/main/resources/db/migration/V19__area_mapping.sql b/backend/src/main/resources/db/migration/V19__area_mapping.sql
index adc3708806..93f5f7394e 100644
--- a/backend/src/main/resources/db/migration/V19__area_mapping.sql
+++ b/backend/src/main/resources/db/migration/V19__area_mapping.sql
@@ -1,5 +1,7 @@
 ALTER TABLE `chart_view` ADD COLUMN `ext_stack` LONGTEXT COMMENT '堆叠项' AFTER `y_axis`;
 UPDATE `chart_view` SET `ext_stack` = '[]';
+ALTER TABLE `chart_view` ADD COLUMN `ext_bubble` LONGTEXT COMMENT '气泡大小' AFTER `ext_stack`;
+UPDATE `chart_view` SET `ext_bubble` = '[]';
 
 ALTER TABLE `dataset_table_field` MODIFY COLUMN `origin_name` LONGTEXT;
 
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index 40d5d81156..d1fa9176c7 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -64,7 +64,7 @@
 
         <!--要生成的数据库表 -->
 
-<!--        <table tableName="sys_dict"/>-->
+        <table tableName="chart_view"/>
 <!--        <table tableName="sys_dict_item"/>-->
 <!--        <table tableName="dataset_table_field"/>-->
 <!--        <table tableName="v_chart">-->
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index a5d01bb93a..954a4248ff 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -828,7 +828,10 @@ export default {
     select_map_range: 'Please select map range',
     area: 'Area',
     placeholder_field: 'Drag Field To Here',
-    axis_label_rotate: 'Label Rotate'
+    axis_label_rotate: 'Label Rotate',
+    chart_scatter_bubble: 'Bubble',
+    chart_scatter: 'Scatter',
+    bubble_size: 'Bubble Size'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index a13981d643..e9461d3571 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -828,7 +828,10 @@ export default {
     area: '地區',
     stack_item: '堆疊項',
     placeholder_field: '拖動字段至此處',
-    axis_label_rotate: '標簽角度'
+    axis_label_rotate: '標簽角度',
+    chart_scatter_bubble: '氣泡圖',
+    chart_scatter: '散點圖',
+    bubble_size: '氣泡大小'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index f16b9216b7..8e2f3c2f25 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -828,7 +828,10 @@ export default {
     area: '地区',
     stack_item: '堆叠项',
     placeholder_field: '拖动字段至此处',
-    axis_label_rotate: '标签角度'
+    axis_label_rotate: '标签角度',
+    chart_scatter_bubble: '气泡图',
+    chart_scatter: '散点图',
+    bubble_size: '气泡大小'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index e01892261c..49f20bbba6 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -37,7 +37,9 @@ export const DEFAULT_SIZE = {
   quotaFontSize: 18,
   spaceSplit: 10,
   dimensionShow: true,
-  quotaShow: true
+  quotaShow: true,
+  scatterSymbol: 'circle',
+  scatterSymbolSize: 20
 }
 export const DEFAULT_LABEL = {
   show: false,
@@ -630,3 +632,61 @@ export const BASE_MAP = {
     }
   ]
 }
+
+export const BASE_SCATTER = {
+  title: {
+    text: '',
+    textStyle: {
+      fontWeight: 'normal'
+    }
+  },
+  grid: {
+    containLabel: true
+  },
+  tooltip: {},
+  legend: {
+    show: true,
+    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect',
+    data: []
+  },
+  xAxis: {
+    boundaryGap: false,
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [],
+  dataZoom: [
+    {
+      type: 'slider',
+      show: false,
+      xAxisIndex: [0],
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'slider',
+      show: false,
+      yAxisIndex: [0],
+      left: '93%',
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'inside',
+      xAxisIndex: [0],
+      start: 0,
+      end: 100
+    },
+    {
+      type: 'inside',
+      yAxisIndex: [0],
+      start: 0,
+      end: 100
+    }
+  ]
+}
diff --git a/frontend/src/views/chart/chart/scatter/scatter.js b/frontend/src/views/chart/chart/scatter/scatter.js
new file mode 100644
index 0000000000..0ed0b07ad0
--- /dev/null
+++ b/frontend/src/views/chart/chart/scatter/scatter.js
@@ -0,0 +1,57 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { componentStyle } from '../common/common'
+
+export function baseScatterOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    chart_option.xAxis.data = chart.data.x
+    for (let i = 0; i < chart.data.series.length; i++) {
+      const y = chart.data.series[i]
+      // color
+      y.itemStyle = {
+        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+      }
+      // size
+      if (customAttr.size) {
+        y.symbol = customAttr.size.scatterSymbol ? customAttr.size.scatterSymbol : 'circle'
+
+        const extBubble = JSON.parse(chart.extBubble)
+        if (extBubble && extBubble.length > 0) {
+          y.symbolSize = funcSize
+        } else {
+          y.symbolSize = customAttr.size.scatterSymbolSize ? customAttr.size.scatterSymbolSize : 20
+        }
+      }
+      // label
+      if (customAttr.label) {
+        y.label = customAttr.label
+      }
+      y.type = 'scatter'
+      chart_option.legend.data.push(y.name)
+      chart_option.series.push(y)
+    }
+  }
+  // console.log(chart_option);
+  componentStyle(chart_option, chart)
+  return chart_option
+}
+
+const funcSize = function(data) {
+  return data[2]
+}
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 6127982ef3..276ff69e26 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE, BASE_MAP } from '../chart/chart'
+import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE, BASE_MAP, BASE_SCATTER } from '../chart/chart'
 import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
 import { baseLineOption, stackLineOption } from '../chart/line/line'
 import { basePieOption, rosePieOption } from '../chart/pie/pie'
@@ -13,6 +13,7 @@ import { baseMapOption } from '../chart/map/map'
 import { baseFunnelOption } from '../chart/funnel/funnel'
 import { baseRadarOption } from '../chart/radar/radar'
 import { baseGaugeOption } from '../chart/gauge/gauge'
+import { baseScatterOption } from '../chart/scatter/scatter'
 // import eventBus from '@/components/canvas/utils/eventBus'
 import { uuid } from 'vue-uuid'
 import { geoJson } from '@/api/map/map'
@@ -95,6 +96,8 @@ export default {
         chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
       } else if (chart.type === 'gauge') {
         chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
+      } else if (chart.type === 'scatter') {
+        chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart)
       }
 
       if (chart.type === 'map') {
diff --git a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
index b747921862..329b7d9154 100644
--- a/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
+++ b/frontend/src/views/chart/components/drag-item/ChartDragItem.vue
@@ -10,6 +10,7 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+      <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
@@ -23,10 +24,32 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</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-item v-show="conf && conf.includes('summary')">
+            <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
+              <span class="el-dropdown-link inner-dropdown-menu">
+                <span>
+                  <i class="el-icon-notebook-2" />
+                  <span>{{ $t('chart.summary') }}</span>
+                  <span class="summary-span-item">({{ $t('chart.'+item.summary) }})</span>
+                </span>
+                <i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-if="item.id === 'count' || item.deType === 0 || item.deType === 1" :command="beforeSummary('count')">{{ $t('chart.count') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('stddev_pop')">{{ $t('chart.stddev_pop') }}</el-dropdown-item>
+                <el-dropdown-item v-if="item.id !== 'count' && item.deType !== 0 && item.deType !== 1" :command="beforeSummary('var_pop')">{{ $t('chart.var_pop') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item v-show="conf && conf.includes('sort')">
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
@@ -67,6 +90,10 @@ export default {
     index: {
       type: Number,
       required: true
+    },
+    conf: {
+      type: String,
+      required: true
     }
   },
   data() {
@@ -103,6 +130,16 @@ export default {
         type: type
       }
     },
+    summary(param) {
+      // console.log(param)
+      this.item.summary = param.type
+      this.$emit('onItemChange', this.item)
+    },
+    beforeSummary(type) {
+      return {
+        type: type
+      }
+    },
     removeItem() {
       this.item.index = this.index
       this.$emit('onItemRemove', this.item)
@@ -153,4 +190,16 @@ export default {
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
+  .summary-span-item{
+    margin-left: 4px;
+    color: #878d9f;
+  }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;
+    position: absolute;
+    right: 30px;
+  }
 </style>
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 375555c99f..3af460b3d5 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -135,6 +135,22 @@
           <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('scatter')" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
+          <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in lineSymbolOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
     </el-col>
     <!--      <el-popover-->
     <!--        placement="right"-->
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index d296e47dff..8cf053eaf8 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -747,6 +747,7 @@ export default {
       view.extStack = JSON.stringify([])
       view.customFilter = JSON.stringify([])
       view.drillFields = JSON.stringify([])
+      view.extBubble = JSON.stringify([])
       post('/chart/view/save', view).then(response => {
         this.closeCreateChart()
         this.$store.dispatch('chart/setTableId', null)
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index f4ffa1f64d..4489326f89 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -195,6 +195,16 @@
                             <svg-icon icon-class="map" class="chart-icon" />
                           </span>
                         </el-radio>
+                        <el-radio value="scatter" label="scatter">
+                          <span :title="$t('chart.chart_scatter')">
+                            <svg-icon icon-class="scatter" class="chart-icon" />
+                          </span>
+                        </el-radio>
+                      </div>
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
+                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                       </div>
@@ -247,9 +257,10 @@
                       :move="onMove"
                       class="drag-block-style"
                       @add="addDrill"
+                      @update="save(true)"
                     >
                       <transition-group class="draggable-group">
-                        <drill-item v-for="(item,index) in view.drillFields" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dillItemChange" @onDimensionItemRemove="drillItemRemove" />
+                        <drill-item v-for="(item,index) in view.drillFields" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="drillItemChange" @onDimensionItemRemove="drillItemRemove" />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.drillFields || view.drillFields.length === 0" class="drag-placeholder-style">
@@ -259,7 +270,7 @@
                   <el-row v-if="view.type !=='text' && view.type !== 'gauge'" class="padding-lr">
                     <span style="width: 80px;text-align: right;">
                       <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line'))">{{ $t('chart.drag_block_type_axis') }}</span>
+                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter'))">{{ $t('chart.drag_block_type_axis') }}</span>
                       <span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
                       <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
                       <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
@@ -275,6 +286,7 @@
                       :move="onMove"
                       class="drag-block-style"
                       @add="addXaxis"
+                      @update="save(true)"
                     >
                       <transition-group class="draggable-group">
                         <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
@@ -287,7 +299,7 @@
                   <el-row class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line'))">{{ $t('chart.drag_block_value_axis') }}</span>
+                      <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter'))">{{ $t('chart.drag_block_value_axis') }}</span>
                       <span v-else-if="view.type && view.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
                       <span v-else-if="view.type && view.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
                       <span v-else-if="view.type && view.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
@@ -305,6 +317,7 @@
                       :move="onMove"
                       class="drag-block-style"
                       @add="addYaxis"
+                      @update="save(true)"
                     >
                       <transition-group class="draggable-group">
                         <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
@@ -328,15 +341,40 @@
                       :move="onMove"
                       class="drag-block-style"
                       @add="addStack"
+                      @update="save(true)"
                     >
                       <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" />
+                        <chart-drag-item v-for="(item,index) in view.extStack" :key="item.id" :conf="'sort'" :param="param" :index="index" :item="item" @onItemChange="stackItemChange" @onItemRemove="stackItemRemove" />
                       </transition-group>
                     </draggable>
                     <div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
+                  <el-row v-if="view.type && view.type.includes('scatter')" class="padding-lr" style="margin-top: 6px;">
+                    <span style="width: 80px;text-align: right;">
+                      <span>{{ $t('chart.bubble_size') }}</span>
+                      /
+                      <span>{{ $t('chart.quota') }}</span>
+                    </span>
+                    <draggable
+                      v-model="view.extBubble"
+                      :disabled="!hasDataPermission('manage',param.privileges)"
+                      group="drag"
+                      animation="300"
+                      :move="onMove"
+                      class="drag-block-style"
+                      @add="addBubble"
+                      @update="save(true)"
+                    >
+                      <transition-group class="draggable-group">
+                        <chart-drag-item v-for="(item,index) in view.extBubble" :key="item.id" :conf="'summary'" :param="param" :index="index" :item="item" @onItemChange="bubbleItemChange" @onItemRemove="bubbleItemRemove" />
+                      </transition-group>
+                    </draggable>
+                    <div v-if="!view.extBubble || view.extBubble.length === 0" class="drag-placeholder-style">
+                      <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                    </div>
+                  </el-row>
                   <el-row class="padding-lr" 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">-->
@@ -350,6 +388,7 @@
                       :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="addCustomFilter"
+                      @update="save(true)"
                     >
                       <transition-group class="draggable-group">
                         <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index" :item="item" @onFilterItemRemove="filterItemRemove" @editItemFilter="showEditFilter" />
@@ -639,6 +678,7 @@ export default {
         yaxis: [],
         extStack: [],
         drillFields: [],
+        extBubble: [],
         show: true,
         type: 'bar',
         title: '',
@@ -804,6 +844,15 @@ export default {
           ele.sort = 'none'
         }
       })
+      view.extBubble.forEach(function(ele) {
+        if (!ele.summary || ele.summary === '') {
+          if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
+            ele.summary = 'count'
+          } else {
+            ele.summary = 'sum'
+          }
+        }
+      })
       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)
@@ -827,6 +876,7 @@ export default {
       view.customFilter = JSON.stringify(view.customFilter)
       view.extStack = JSON.stringify(view.extStack)
       view.drillFields = JSON.stringify(view.drillFields)
+      view.extBubble = JSON.stringify(view.extBubble)
       post('/chart/view/save', view).then(response => {
         // this.get(response.data.id);
         // this.getData(response.data.id)
@@ -928,6 +978,7 @@ export default {
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
           this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
           this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
+          this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
           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) : {}
@@ -961,6 +1012,7 @@ export default {
           this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
           this.view.extStack = this.view.extStack ? JSON.parse(this.view.extStack) : []
           this.view.drillFields = this.view.drillFields ? JSON.parse(this.view.drillFields) : []
+          this.view.extBubble = this.view.extBubble ? JSON.parse(this.view.extBubble) : []
           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) : {}
@@ -1279,6 +1331,8 @@ export default {
         this.view.xaxis = []
         this.view.yaxis = []
         this.view.customFilter = []
+        this.view.extStack = []
+        this.view.extBubble = []
       }
       this.save(true, 'chart', false)
     },
@@ -1394,7 +1448,7 @@ export default {
       this.view.extStack.splice(item.index, 1)
       this.save(true)
     },
-    dillItemChange(item) {
+    drillItemChange(item) {
       this.save(true)
     },
     drillItemRemove(item) {
@@ -1405,6 +1459,21 @@ export default {
       this.dragCheckType(this.view.drillFields, 'd')
       this.dragMoveDuplicate(this.view.drillFields, e)
       this.save(true)
+    },
+
+    addBubble(e) {
+      this.dragCheckType(this.view.extBubble, 'q')
+      if (this.view.extBubble && this.view.extBubble.length > 1) {
+        this.view.extBubble = [this.view.extBubble[0]]
+      }
+      this.save(true)
+    },
+    bubbleItemChange(item) {
+      this.save(true)
+    },
+    bubbleItemRemove(item) {
+      this.view.extBubble.splice(item.index, 1)
+      this.save(true)
     }
   }
 }

From f8980b59e29285dd658514982354830e2c7a2522 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 6 Aug 2021 16:40:48 +0800
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20scatter=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/chart/chart.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 49f20bbba6..1363562f7f 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -653,7 +653,6 @@ export const BASE_SCATTER = {
     data: []
   },
   xAxis: {
-    boundaryGap: false,
     data: []
   },
   yAxis: {

From d46a40dcd26b56b828811458bd94346ceaa48767 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 6 Aug 2021 17:24:17 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=81=94?=
 =?UTF-8?q?=E5=8A=A8=E8=AE=BE=E7=BD=AE=E6=B5=AE=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/domain/DatasetTableField.java        |   6 +-
 .../base/domain/PanelViewLinkageField.java    |   4 +-
 .../domain/PanelViewLinkageFieldExample.java  | 112 +++++++++---------
 .../mapper/PanelViewLinkageFieldMapper.xml    |  54 ++++-----
 .../mapper/ext/ExtPanelViewLinkageMapper.java |   7 +-
 .../mapper/ext/ExtPanelViewLinkageMapper.xml  |  48 ++++++--
 .../panel/PanelViewLinkageController.java     |  10 ++
 .../request/panel/PanelLinkageRequest.java    |  13 ++
 .../io/dataease/dto/PanelViewLinkageDTO.java  |   7 +-
 .../panel/PanelViewLinkageService.java        |  70 ++++++++++-
 .../db/migration/V20__linkage_table.sql       |  33 ++++++
 frontend/src/api/panel/linkage.js             |   9 ++
 .../canvas/components/Editor/LinkageField.vue |  86 +++++++++++++-
 .../canvas/components/Editor/SettingMenu.vue  |   3 +-
 .../components/canvas/components/Toolbar.vue  |  14 ++-
 15 files changed, 362 insertions(+), 114 deletions(-)
 create mode 100644 backend/src/main/resources/db/migration/V20__linkage_table.sql

diff --git a/backend/src/main/java/io/dataease/base/domain/DatasetTableField.java b/backend/src/main/java/io/dataease/base/domain/DatasetTableField.java
index 07a400d6d1..41b807625e 100644
--- a/backend/src/main/java/io/dataease/base/domain/DatasetTableField.java
+++ b/backend/src/main/java/io/dataease/base/domain/DatasetTableField.java
@@ -2,11 +2,15 @@ package io.dataease.base.domain;
 
 import java.io.Serializable;
 
+import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.Data;
+import lombok.NoArgsConstructor;
 
 @Data
 @Builder
+@AllArgsConstructor //全参构造函数
+@NoArgsConstructor  //无参构造函数
 public class DatasetTableField implements Serializable {
     private String id;
 
@@ -39,4 +43,4 @@ public class DatasetTableField implements Serializable {
     private Long lastSyncTime;
 
     private static final long serialVersionUID = 1L;
-}
\ No newline at end of file
+}
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageField.java b/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageField.java
index 47b537a9ab..eb9a0ec102 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageField.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageField.java
@@ -9,9 +9,9 @@ public class PanelViewLinkageField implements Serializable {
 
     private String linkageId;
 
-    private String sourceFiled;
+    private String sourceField;
 
-    private String targetFiled;
+    private String targetField;
 
     private Long updateTime;
 
diff --git a/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageFieldExample.java b/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageFieldExample.java
index 2f02872bab..5fda7906ed 100644
--- a/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageFieldExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/PanelViewLinkageFieldExample.java
@@ -244,143 +244,143 @@ public class PanelViewLinkageFieldExample {
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledIsNull() {
-            addCriterion("source_filed is null");
+        public Criteria andSourceFieldIsNull() {
+            addCriterion("source_field is null");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledIsNotNull() {
-            addCriterion("source_filed is not null");
+        public Criteria andSourceFieldIsNotNull() {
+            addCriterion("source_field is not null");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledEqualTo(String value) {
-            addCriterion("source_filed =", value, "sourceFiled");
+        public Criteria andSourceFieldEqualTo(String value) {
+            addCriterion("source_field =", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledNotEqualTo(String value) {
-            addCriterion("source_filed <>", value, "sourceFiled");
+        public Criteria andSourceFieldNotEqualTo(String value) {
+            addCriterion("source_field <>", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledGreaterThan(String value) {
-            addCriterion("source_filed >", value, "sourceFiled");
+        public Criteria andSourceFieldGreaterThan(String value) {
+            addCriterion("source_field >", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledGreaterThanOrEqualTo(String value) {
-            addCriterion("source_filed >=", value, "sourceFiled");
+        public Criteria andSourceFieldGreaterThanOrEqualTo(String value) {
+            addCriterion("source_field >=", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledLessThan(String value) {
-            addCriterion("source_filed <", value, "sourceFiled");
+        public Criteria andSourceFieldLessThan(String value) {
+            addCriterion("source_field <", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledLessThanOrEqualTo(String value) {
-            addCriterion("source_filed <=", value, "sourceFiled");
+        public Criteria andSourceFieldLessThanOrEqualTo(String value) {
+            addCriterion("source_field <=", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledLike(String value) {
-            addCriterion("source_filed like", value, "sourceFiled");
+        public Criteria andSourceFieldLike(String value) {
+            addCriterion("source_field like", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledNotLike(String value) {
-            addCriterion("source_filed not like", value, "sourceFiled");
+        public Criteria andSourceFieldNotLike(String value) {
+            addCriterion("source_field not like", value, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledIn(List<String> values) {
-            addCriterion("source_filed in", values, "sourceFiled");
+        public Criteria andSourceFieldIn(List<String> values) {
+            addCriterion("source_field in", values, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledNotIn(List<String> values) {
-            addCriterion("source_filed not in", values, "sourceFiled");
+        public Criteria andSourceFieldNotIn(List<String> values) {
+            addCriterion("source_field not in", values, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledBetween(String value1, String value2) {
-            addCriterion("source_filed between", value1, value2, "sourceFiled");
+        public Criteria andSourceFieldBetween(String value1, String value2) {
+            addCriterion("source_field between", value1, value2, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andSourceFiledNotBetween(String value1, String value2) {
-            addCriterion("source_filed not between", value1, value2, "sourceFiled");
+        public Criteria andSourceFieldNotBetween(String value1, String value2) {
+            addCriterion("source_field not between", value1, value2, "sourceField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledIsNull() {
-            addCriterion("target_filed is null");
+        public Criteria andTargetFieldIsNull() {
+            addCriterion("target_field is null");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledIsNotNull() {
-            addCriterion("target_filed is not null");
+        public Criteria andTargetFieldIsNotNull() {
+            addCriterion("target_field is not null");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledEqualTo(String value) {
-            addCriterion("target_filed =", value, "targetFiled");
+        public Criteria andTargetFieldEqualTo(String value) {
+            addCriterion("target_field =", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledNotEqualTo(String value) {
-            addCriterion("target_filed <>", value, "targetFiled");
+        public Criteria andTargetFieldNotEqualTo(String value) {
+            addCriterion("target_field <>", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledGreaterThan(String value) {
-            addCriterion("target_filed >", value, "targetFiled");
+        public Criteria andTargetFieldGreaterThan(String value) {
+            addCriterion("target_field >", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledGreaterThanOrEqualTo(String value) {
-            addCriterion("target_filed >=", value, "targetFiled");
+        public Criteria andTargetFieldGreaterThanOrEqualTo(String value) {
+            addCriterion("target_field >=", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledLessThan(String value) {
-            addCriterion("target_filed <", value, "targetFiled");
+        public Criteria andTargetFieldLessThan(String value) {
+            addCriterion("target_field <", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledLessThanOrEqualTo(String value) {
-            addCriterion("target_filed <=", value, "targetFiled");
+        public Criteria andTargetFieldLessThanOrEqualTo(String value) {
+            addCriterion("target_field <=", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledLike(String value) {
-            addCriterion("target_filed like", value, "targetFiled");
+        public Criteria andTargetFieldLike(String value) {
+            addCriterion("target_field like", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledNotLike(String value) {
-            addCriterion("target_filed not like", value, "targetFiled");
+        public Criteria andTargetFieldNotLike(String value) {
+            addCriterion("target_field not like", value, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledIn(List<String> values) {
-            addCriterion("target_filed in", values, "targetFiled");
+        public Criteria andTargetFieldIn(List<String> values) {
+            addCriterion("target_field in", values, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledNotIn(List<String> values) {
-            addCriterion("target_filed not in", values, "targetFiled");
+        public Criteria andTargetFieldNotIn(List<String> values) {
+            addCriterion("target_field not in", values, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledBetween(String value1, String value2) {
-            addCriterion("target_filed between", value1, value2, "targetFiled");
+        public Criteria andTargetFieldBetween(String value1, String value2) {
+            addCriterion("target_field between", value1, value2, "targetField");
             return (Criteria) this;
         }
 
-        public Criteria andTargetFiledNotBetween(String value1, String value2) {
-            addCriterion("target_filed not between", value1, value2, "targetFiled");
+        public Criteria andTargetFieldNotBetween(String value1, String value2) {
+            addCriterion("target_field not between", value1, value2, "targetField");
             return (Criteria) this;
         }
 
diff --git a/backend/src/main/java/io/dataease/base/mapper/PanelViewLinkageFieldMapper.xml b/backend/src/main/java/io/dataease/base/mapper/PanelViewLinkageFieldMapper.xml
index af1ac226d8..eddb4c83f9 100644
--- a/backend/src/main/java/io/dataease/base/mapper/PanelViewLinkageFieldMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/PanelViewLinkageFieldMapper.xml
@@ -4,8 +4,8 @@
   <resultMap id="BaseResultMap" type="io.dataease.base.domain.PanelViewLinkageField">
     <id column="id" jdbcType="VARCHAR" property="id" />
     <result column="linkage_id" jdbcType="VARCHAR" property="linkageId" />
-    <result column="source_filed" jdbcType="VARCHAR" property="sourceFiled" />
-    <result column="target_filed" jdbcType="VARCHAR" property="targetFiled" />
+    <result column="source_field" jdbcType="VARCHAR" property="sourceField" />
+    <result column="target_field" jdbcType="VARCHAR" property="targetField" />
     <result column="update_time" jdbcType="BIGINT" property="updateTime" />
   </resultMap>
   <sql id="Example_Where_Clause">
@@ -67,7 +67,7 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, linkage_id, source_filed, target_filed, update_time
+    id, linkage_id, source_field, target_field, update_time
   </sql>
   <select id="selectByExample" parameterType="io.dataease.base.domain.PanelViewLinkageFieldExample" resultMap="BaseResultMap">
     select
@@ -100,10 +100,10 @@
     </if>
   </delete>
   <insert id="insert" parameterType="io.dataease.base.domain.PanelViewLinkageField">
-    insert into panel_view_linkage_field (id, linkage_id, source_filed, 
-      target_filed, update_time)
-    values (#{id,jdbcType=VARCHAR}, #{linkageId,jdbcType=VARCHAR}, #{sourceFiled,jdbcType=VARCHAR}, 
-      #{targetFiled,jdbcType=VARCHAR}, #{updateTime,jdbcType=BIGINT})
+    insert into panel_view_linkage_field (id, linkage_id, source_field, 
+      target_field, update_time)
+    values (#{id,jdbcType=VARCHAR}, #{linkageId,jdbcType=VARCHAR}, #{sourceField,jdbcType=VARCHAR}, 
+      #{targetField,jdbcType=VARCHAR}, #{updateTime,jdbcType=BIGINT})
   </insert>
   <insert id="insertSelective" parameterType="io.dataease.base.domain.PanelViewLinkageField">
     insert into panel_view_linkage_field
@@ -114,11 +114,11 @@
       <if test="linkageId != null">
         linkage_id,
       </if>
-      <if test="sourceFiled != null">
-        source_filed,
+      <if test="sourceField != null">
+        source_field,
       </if>
-      <if test="targetFiled != null">
-        target_filed,
+      <if test="targetField != null">
+        target_field,
       </if>
       <if test="updateTime != null">
         update_time,
@@ -131,11 +131,11 @@
       <if test="linkageId != null">
         #{linkageId,jdbcType=VARCHAR},
       </if>
-      <if test="sourceFiled != null">
-        #{sourceFiled,jdbcType=VARCHAR},
+      <if test="sourceField != null">
+        #{sourceField,jdbcType=VARCHAR},
       </if>
-      <if test="targetFiled != null">
-        #{targetFiled,jdbcType=VARCHAR},
+      <if test="targetField != null">
+        #{targetField,jdbcType=VARCHAR},
       </if>
       <if test="updateTime != null">
         #{updateTime,jdbcType=BIGINT},
@@ -157,11 +157,11 @@
       <if test="record.linkageId != null">
         linkage_id = #{record.linkageId,jdbcType=VARCHAR},
       </if>
-      <if test="record.sourceFiled != null">
-        source_filed = #{record.sourceFiled,jdbcType=VARCHAR},
+      <if test="record.sourceField != null">
+        source_field = #{record.sourceField,jdbcType=VARCHAR},
       </if>
-      <if test="record.targetFiled != null">
-        target_filed = #{record.targetFiled,jdbcType=VARCHAR},
+      <if test="record.targetField != null">
+        target_field = #{record.targetField,jdbcType=VARCHAR},
       </if>
       <if test="record.updateTime != null">
         update_time = #{record.updateTime,jdbcType=BIGINT},
@@ -175,8 +175,8 @@
     update panel_view_linkage_field
     set id = #{record.id,jdbcType=VARCHAR},
       linkage_id = #{record.linkageId,jdbcType=VARCHAR},
-      source_filed = #{record.sourceFiled,jdbcType=VARCHAR},
-      target_filed = #{record.targetFiled,jdbcType=VARCHAR},
+      source_field = #{record.sourceField,jdbcType=VARCHAR},
+      target_field = #{record.targetField,jdbcType=VARCHAR},
       update_time = #{record.updateTime,jdbcType=BIGINT}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
@@ -188,11 +188,11 @@
       <if test="linkageId != null">
         linkage_id = #{linkageId,jdbcType=VARCHAR},
       </if>
-      <if test="sourceFiled != null">
-        source_filed = #{sourceFiled,jdbcType=VARCHAR},
+      <if test="sourceField != null">
+        source_field = #{sourceField,jdbcType=VARCHAR},
       </if>
-      <if test="targetFiled != null">
-        target_filed = #{targetFiled,jdbcType=VARCHAR},
+      <if test="targetField != null">
+        target_field = #{targetField,jdbcType=VARCHAR},
       </if>
       <if test="updateTime != null">
         update_time = #{updateTime,jdbcType=BIGINT},
@@ -203,8 +203,8 @@
   <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.PanelViewLinkageField">
     update panel_view_linkage_field
     set linkage_id = #{linkageId,jdbcType=VARCHAR},
-      source_filed = #{sourceFiled,jdbcType=VARCHAR},
-      target_filed = #{targetFiled,jdbcType=VARCHAR},
+      source_field = #{sourceField,jdbcType=VARCHAR},
+      target_field = #{targetField,jdbcType=VARCHAR},
       update_time = #{updateTime,jdbcType=BIGINT}
     where id = #{id,jdbcType=VARCHAR}
   </update>
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java
index d2a96192bb..82cea4163a 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java
@@ -9,6 +9,11 @@ import java.util.List;
 public interface ExtPanelViewLinkageMapper {
 
     List<PanelViewLinkageDTO> getViewLinkageGather(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId,@Param("targetViewIds") List<String> targetViewIds);
-    List<DatasetTableField> queryTableField(@Param("tableId") String tableId);
+
+    List<DatasetTableField> queryTableField(@Param("table_id") String tableId);
+
+    void deleteViewLinkage(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId);
+
+    void deleteViewLinkageField(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId);
 
 }
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml
index d8e4944525..f81e6c76ea 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml
@@ -3,7 +3,7 @@
 <mapper namespace="io.dataease.base.mapper.ext.ExtPanelViewLinkageMapper">
 
     <resultMap id="TableFieldMap" type="io.dataease.base.domain.DatasetTableField">
-        <id column="id" jdbcType="VARCHAR" property="id"/>
+        <result column="id" jdbcType="VARCHAR" property="id"/>
         <result column="table_id" jdbcType="VARCHAR" property="tableId"/>
         <result column="origin_name" jdbcType="VARCHAR" property="originName"/>
         <result column="name" jdbcType="VARCHAR" property="name"/>
@@ -15,12 +15,12 @@
         <result column="table_id" jdbcType="VARCHAR" property="tableId"/>
         <result column="targetViewName" jdbcType="VARCHAR" property="targetViewName"/>
         <result column="linkageActive" property="linkageActive"/>
-<!--        <collection property="targetViewFields" ofType="io.dataease.base.domain.DatasetTableField" column="table_id"-->
-<!--                    select="queryTableField">-->
-<!--        </collection>-->
-        <collection property="linkageFields" ofType="io.dataease.dto.PanelViewLinkageFieldDTO">
-            <result column="source_filed" jdbcType="VARCHAR" property="sourceFiled"/>
-            <result column="target_filed" jdbcType="VARCHAR" property="targetFiled"/>
+        <collection property="targetViewFields" ofType="io.dataease.base.domain.DatasetTableField" column="table_id"
+                    select="queryTableField">
+        </collection>
+        <collection property="linkageFields" ofType="io.dataease.base.domain.PanelViewLinkageField">
+            <result column="source_field" jdbcType="VARCHAR" property="sourceField"/>
+            <result column="target_field" jdbcType="VARCHAR" property="targetField"/>
         </collection>
     </resultMap>
 
@@ -30,14 +30,14 @@
         chart_view.id as 'target_view_id',
         chart_view.table_id,
         (case when panel_view_linkage.target_view_id is null then 0 else 1 end) as 'linkageActive',
-        panel_view_linkage_field.source_filed,
-        panel_view_linkage_field.target_filed
+        panel_view_linkage_field.source_field,
+        panel_view_linkage_field.target_field
         FROM
         chart_view
         LEFT JOIN panel_view_linkage ON chart_view.id = panel_view_linkage.target_view_id
-        LEFT JOIN panel_view_linkage_field ON panel_view_linkage.id = panel_view_linkage_field.linkage_id
         AND panel_view_linkage.panel_id = #{panelId}
         AND panel_view_linkage.source_view_id = #{sourceViewId}
+        LEFT JOIN panel_view_linkage_field ON panel_view_linkage.id = panel_view_linkage_field.linkage_id
         where chart_view.id in
         <foreach collection="targetViewIds" item="targetViewId" index="index" open="(" close=")" separator=",">
             #{targetViewId}
@@ -49,9 +49,33 @@
        dataset_table_field.id,
        dataset_table_field.table_id,
        dataset_table_field.origin_name,
-       dataset_table_field.name,
+       dataset_table_field.`name`,
        dataset_table_field.de_type
-        from dataset_table_field where table_id = #{tableId}
+    from dataset_table_field where table_id = #{table_id}
     </select>
 
+
+    <delete id="deleteViewLinkage">
+        delete from panel_view_linkage where   panel_view_linkage.panel_id = #{panelId}
+        AND panel_view_linkage.source_view_id = #{sourceViewId}
+    </delete>
+
+
+    <delete id="deleteViewLinkageField">
+      DELETE pvl
+        FROM
+            panel_view_linkage pvl,
+            panel_view_linkage_field pvlf
+        WHERE
+            pvl.id = pvlf.linkage_id
+            AND pvl.source_view_id = #{panelId}
+            AND pvl.panel_id = #{panelId}
+    </delete>
+
+    <insert id="savePluginMenu">
+        INSERT INTO `panel_view_linkage` ( menu_id, title, pid, sub_count, permission, hidden,i_frame ) VALUES
+        <foreach collection="menuList" item="menu" index="index" separator=",">
+            (#{menu.menuId},#{menu.title},#{menu.pid},#{menu.subCount},#{menu.permission},#{menu.hidden},ifnull(#{menu.hidden},0))
+        </foreach>
+    </insert>
 </mapper>
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
index 2b99e08576..b74b33a97f 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
@@ -2,6 +2,7 @@ package io.dataease.controller.panel;
 
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.controller.request.panel.PanelLinkageRequest;
+import io.dataease.dto.PanelViewLinkageDTO;
 import io.dataease.service.panel.PanelViewLinkageService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
@@ -30,4 +31,13 @@ public class PanelViewLinkageController {
         return panelViewLinkageService.getViewLinkageGather(request);
     }
 
+
+    @ApiOperation("获取仪表板视图联动信息")
+    @PostMapping("/saveLinkage")
+    public void saveLinkage(@RequestBody PanelLinkageRequest request){
+        panelViewLinkageService.saveLinkage(request);
+    }
+
+
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/request/panel/PanelLinkageRequest.java b/backend/src/main/java/io/dataease/controller/request/panel/PanelLinkageRequest.java
index 2829eaf14d..e7c164fab0 100644
--- a/backend/src/main/java/io/dataease/controller/request/panel/PanelLinkageRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/panel/PanelLinkageRequest.java
@@ -1,6 +1,9 @@
 package io.dataease.controller.request.panel;
 
+import io.dataease.dto.PanelViewLinkageDTO;
+
 import java.util.List;
+import java.util.Map;
 
 /**
  * Author: wangjiahao
@@ -15,6 +18,16 @@ public class PanelLinkageRequest {
 
     private List<String> targetViewIds;
 
+    private Map<String, PanelViewLinkageDTO> linkageInfo;
+
+    public Map<String, PanelViewLinkageDTO> getLinkageInfo() {
+        return linkageInfo;
+    }
+
+    public void setLinkageInfo(Map<String, PanelViewLinkageDTO> linkageInfo) {
+        this.linkageInfo = linkageInfo;
+    }
+
     public String getPanelId() {
         return panelId;
     }
diff --git a/backend/src/main/java/io/dataease/dto/PanelViewLinkageDTO.java b/backend/src/main/java/io/dataease/dto/PanelViewLinkageDTO.java
index 83e8f4cb4a..c265d4aecd 100644
--- a/backend/src/main/java/io/dataease/dto/PanelViewLinkageDTO.java
+++ b/backend/src/main/java/io/dataease/dto/PanelViewLinkageDTO.java
@@ -2,6 +2,7 @@ package io.dataease.dto;
 
 import io.dataease.base.domain.DatasetTableField;
 import io.dataease.base.domain.PanelViewLinkage;
+import io.dataease.base.domain.PanelViewLinkageField;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -19,7 +20,7 @@ public class PanelViewLinkageDTO extends PanelViewLinkage {
     //关联状态
     private boolean linkageActive = false;
 
-    private List<PanelViewLinkageFieldDTO> linkageFields = new ArrayList<>();
+    private List<PanelViewLinkageField> linkageFields = new ArrayList<>();
 
 
     private List<DatasetTableField> targetViewFields = new ArrayList<>();
@@ -68,11 +69,11 @@ public class PanelViewLinkageDTO extends PanelViewLinkage {
         this.linkageActive = linkageActive;
     }
 
-    public List<PanelViewLinkageFieldDTO> getLinkageFields() {
+    public List<PanelViewLinkageField> getLinkageFields() {
         return linkageFields;
     }
 
-    public void setLinkageFields(List<PanelViewLinkageFieldDTO> linkageFields) {
+    public void setLinkageFields(List<PanelViewLinkageField> linkageFields) {
         this.linkageFields = linkageFields;
     }
 }
diff --git a/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java b/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java
index 031029a489..792ada85de 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java
@@ -1,11 +1,19 @@
 package io.dataease.service.panel;
 
+import io.dataease.base.domain.PanelViewLinkage;
+import io.dataease.base.domain.PanelViewLinkageExample;
+import io.dataease.base.domain.PanelViewLinkageField;
+import io.dataease.base.mapper.PanelViewLinkageFieldMapper;
 import io.dataease.base.mapper.PanelViewLinkageMapper;
 import io.dataease.base.mapper.ext.ExtPanelViewLinkageMapper;
+import io.dataease.commons.utils.AuthUtils;
 import io.dataease.controller.request.panel.PanelLinkageRequest;
 import io.dataease.dto.PanelViewLinkageDTO;
+import io.dataease.dto.PanelViewLinkageFieldDTO;
 import org.apache.commons.collections4.CollectionUtils;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.util.Assert;
 
 import javax.annotation.Resource;
 import java.util.*;
@@ -22,6 +30,9 @@ public class PanelViewLinkageService {
     @Resource
     private PanelViewLinkageMapper panelViewLinkageMapper;
 
+    @Resource
+    private PanelViewLinkageFieldMapper panelViewLinkageFieldMapper;
+
     @Resource
     private ExtPanelViewLinkageMapper extPanelViewLinkageMapper;
 
@@ -29,9 +40,6 @@ public class PanelViewLinkageService {
     public Map<String, PanelViewLinkageDTO> getViewLinkageGather(PanelLinkageRequest request) {
         if(CollectionUtils.isNotEmpty(request.getTargetViewIds())){
             List<PanelViewLinkageDTO>  linkageDTOList = extPanelViewLinkageMapper.getViewLinkageGather(request.getPanelId(),request.getSourceViewId(),request.getTargetViewIds());
-            linkageDTOList.stream().forEach(linkage ->{
-                linkage.setTargetViewFields(extPanelViewLinkageMapper.queryTableField(linkage.getTableId()));
-            });
             Map<String, PanelViewLinkageDTO> result = linkageDTOList.stream()
                     .collect(Collectors.toMap(PanelViewLinkageDTO::getTargetViewId,PanelViewLinkageDTO->PanelViewLinkageDTO));
             return result;
@@ -39,5 +47,61 @@ public class PanelViewLinkageService {
         return new HashMap<>();
     }
 
+    @Transactional
+    public void saveLinkage(PanelLinkageRequest request){
+        Long updateTime = System.currentTimeMillis();
+        Map<String, PanelViewLinkageDTO> linkageInfo  = request.getLinkageInfo();
+        String sourceViewId = request.getSourceViewId();
+        String panelId = request.getPanelId();
+
+        Assert.notNull(sourceViewId,"source View ID can not be null");
+        Assert.notNull(panelId,"panelId can not be null");
+
+        //去掉source view 的信息
+        linkageInfo.remove(sourceViewId);
+
+        // 清理原有关系
+        extPanelViewLinkageMapper.deleteViewLinkageField(panelId,sourceViewId);
+        extPanelViewLinkageMapper.deleteViewLinkage(panelId,sourceViewId);
+
+        //重新建立关系
+        for(Map.Entry<String, PanelViewLinkageDTO> entry : linkageInfo.entrySet()){
+            String targetViewId = entry.getKey();
+            PanelViewLinkageDTO linkageDTO = entry.getValue();
+            List<PanelViewLinkageField> linkageFields = linkageDTO.getLinkageFields();
+
+            if(CollectionUtils.isNotEmpty(linkageFields)&&linkageDTO.isLinkageActive()){
+                String linkageId = UUID.randomUUID().toString();
+                PanelViewLinkage linkage = new PanelViewLinkage();
+                linkage.setId(linkageId);
+                linkage.setPanelId(panelId);
+                linkage.setSourceViewId(sourceViewId);
+                linkage.setTargetViewId(targetViewId);
+                linkage.setUpdatePeople(AuthUtils.getUser().getUsername());
+                linkage.setUpdateTime(updateTime);
+                panelViewLinkageMapper.insert(linkage);
+
+                linkageFields.stream().forEach(linkageField->{
+                    linkageField.setId(UUID.randomUUID().toString());
+                    linkageField.setLinkageId(linkageId);
+                    linkageField.setUpdateTime(updateTime);
+                    panelViewLinkageFieldMapper.insert(linkageField);
+                });
+
+            }
+
+
+
+
+        }
+
+
+
+
+
+
+
+
+    }
 
 }
diff --git a/backend/src/main/resources/db/migration/V20__linkage_table.sql b/backend/src/main/resources/db/migration/V20__linkage_table.sql
new file mode 100644
index 0000000000..31fafdf176
--- /dev/null
+++ b/backend/src/main/resources/db/migration/V20__linkage_table.sql
@@ -0,0 +1,33 @@
+SET NAMES utf8mb4;
+SET FOREIGN_KEY_CHECKS = 0;
+
+-- ----------------------------
+-- Table structure for panel_view_linkage
+-- ----------------------------
+DROP TABLE IF EXISTS `panel_view_linkage`;
+CREATE TABLE `panel_view_linkage` (
+  `id` varchar(50) NOT NULL,
+  `panel_id` varchar(50) DEFAULT NULL,
+  `source_view_id` varchar(50) DEFAULT NULL COMMENT '源视图id',
+  `target_view_id` varchar(50) DEFAULT NULL COMMENT '联动视图id',
+  `update_time` bigint(13) DEFAULT NULL COMMENT '更新时间',
+  `update_people` varchar(255) DEFAULT NULL COMMENT '更新人',
+  `ext1` varchar(2000) DEFAULT NULL,
+  `ext2` varchar(2000) DEFAULT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;
+
+-- ----------------------------
+-- Table structure for panel_view_linkage_field
+-- ----------------------------
+DROP TABLE IF EXISTS `panel_view_linkage_field`;
+CREATE TABLE `panel_view_linkage_field` (
+  `id` varchar(50) NOT NULL,
+  `linkage_id` varchar(50) DEFAULT NULL COMMENT '联动ID',
+  `source_field` varchar(255) DEFAULT NULL COMMENT '源视图字段',
+  `target_field` varchar(255) DEFAULT NULL COMMENT '目标视图字段',
+  `update_time` bigint(13) DEFAULT NULL COMMENT '更新时间',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;
+
+SET FOREIGN_KEY_CHECKS = 1;
diff --git a/frontend/src/api/panel/linkage.js b/frontend/src/api/panel/linkage.js
index 9bbbc0fde9..4a0f0ecc4a 100644
--- a/frontend/src/api/panel/linkage.js
+++ b/frontend/src/api/panel/linkage.js
@@ -9,3 +9,12 @@ export function getViewLinkageGather(requestInfo) {
   })
 }
 
+export function saveLinkage(requestInfo) {
+  return request({
+    url: '/linkage/saveLinkage',
+    method: 'post',
+    data: requestInfo,
+    loading: true
+  })
+}
+
diff --git a/frontend/src/components/canvas/components/Editor/LinkageField.vue b/frontend/src/components/canvas/components/Editor/LinkageField.vue
index 08333d082f..d4f50e9421 100644
--- a/frontend/src/components/canvas/components/Editor/LinkageField.vue
+++ b/frontend/src/components/canvas/components/Editor/LinkageField.vue
@@ -1,22 +1,68 @@
 <template>
 
   <el-popover
-    width="300"
+    width="400"
     trigger="click"
   >
     <el-row>
-      <el-col :span="10">
-        <div class="ellip">联动视图</div>
+      <el-col :span="11">
+        <div class="ellip">{{ sourceLinkageInfo.targetViewName }}</div>
       </el-col>
-      <el-col :span="10">
+      <el-col :span="11">
         <div class="ellip">{{ linkageInfo.targetViewName }}</div>
       </el-col>
     </el-row>
 
-    linkageInfo{{ linkageInfo }}
+    <el-row v-for="(item, index) in linkageInfo.linkageFields" :key="index">
+      <el-col :span="11">
+        <div class="select-filed">
+          <el-select v-model="item.sourceField" size="mini" placeholder="请选择">
+            <el-option
+              v-for="item in sourceLinkageInfo.targetViewFields"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+              <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.value === 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 style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="11">
+        <div class="select-filed">
+          <el-select v-model="item.targetField" size="mini" placeholder="请选择">
+            <el-option
+              v-for="item in linkageInfo.targetViewFields"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+              <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.value === 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 style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="2">
+        <div>
+          <el-button icon="el-icon-delete" type="text" size="small" style="float: left" @click="deleteLinkageField(index)" />
+        </div>
+      </el-col>
+    </el-row>
 
     <el-row class="bottom">
-      <el-button size="mini" type="success" icon="el-icon-plus" round>追加联动依赖字段</el-button>
+      <el-button size="mini" type="success" icon="el-icon-plus" round @click="addLinkageField">追加联动依赖字段</el-button>
     </el-row>
 
     <!--    <el-button slot="reference">T</el-button>-->
@@ -60,6 +106,9 @@ export default {
     linkageInfo() {
       return this.targetLinkageInfo[this.element.propValue.viewId]
     },
+    sourceLinkageInfo() {
+      return this.targetLinkageInfo[this.curLinkageView.propValue.viewId]
+    },
     ...mapState([
       'menuTop',
       'menuLeft',
@@ -81,6 +130,16 @@ export default {
     },
     linkageEdit() {
 
+    },
+    deleteLinkageField(index) {
+      this.linkageInfo.linkageFields.splice(index, 1)
+    },
+    addLinkageField() {
+      const linkageFieldItem = {
+        sourceViewId: null,
+        targetViewId: null
+      }
+      this.linkageInfo.linkageFields.push(linkageFieldItem)
     }
   }
 }
@@ -92,6 +151,7 @@ export default {
   }
 
   .bottom {
+    margin-top: 20px;
     text-align: center;
 
   }
@@ -110,4 +170,18 @@ export default {
     border-radius: 3px;
   }
 
+  .select-filed{
+    /*width: 100%;*/
+    margin-left: 10px;
+    margin-right: 10px;
+    overflow: hidden;/*超出部分隐藏*/
+    white-space: nowrap;/*不换行*/
+    text-overflow:ellipsis;/*超出部分文字以...显示*/
+    color: #3d4d66;
+    font-size: 12px;
+    line-height: 35px;
+    height: 35px;
+    border-radius: 3px;
+  }
+
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
index dbed702832..370708d08c 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -124,7 +124,8 @@ export default {
     },
     linkageSetting() {
       debugger
-      const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId && item !== this.curComponent)
+      // sourceViewId 也加入查询
+      const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
         .map(item => item.propValue.viewId)
 
       // 获取当前仪表板当前视图联动信息
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 57a9038835..0d1dd44a03 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -101,6 +101,7 @@ import { commonStyle, commonAttr } from '@/components/canvas/custom-component/co
 import eventBus from '@/components/canvas/utils/eventBus'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { panelSave } from '@/api/panel/panel'
+import { saveLinkage } from '@/api/panel/linkage'
 import bus from '@/utils/bus'
 import {
   DEFAULT_COMMON_CANVAS_STYLE_STRING
@@ -137,7 +138,9 @@ export default {
     'changeTimes',
     'snapshotIndex',
     'lastSaveSnapshotIndex',
-    'linkageSettingStatus'
+    'linkageSettingStatus',
+    'curLinkageView',
+    'targetLinkageInfo'
   ]),
 
   created() {
@@ -316,7 +319,14 @@ export default {
       this.close()
     },
     saveLinkage() {
-      this.cancelLinkageSettingStatus()
+      const request = {
+        panelId: this.$store.state.panel.panelInfo.id,
+        sourceViewId: this.curLinkageView.propValue.viewId,
+        linkageInfo: this.targetLinkageInfo
+      }
+      saveLinkage(request).then(rsp => {
+        this.cancelLinkageSettingStatus()
+      })
     },
     cancelLinkage() {
       this.cancelLinkageSettingStatus()