From 412432acf80b4c2003cace6a11bb272e6cf172b4 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 14 Oct 2021 18:06:19 +0800
Subject: [PATCH] feat:antv

---
 .../io/dataease/base/domain/ChartView.java    |   4 +-
 .../base/domain/ChartViewExample.java         |  72 ++-
 .../dataease/base/mapper/ChartViewMapper.xml  |  55 ++-
 .../dto/chart/AxisChartDataAntVDTO.java       |  21 +
 .../service/chart/ChartViewService.java       | 389 +++++++++++++++-
 .../resources/db/migration/V27__de1.4.sql     |   3 +
 .../src/main/resources/generatorConfig.xml    |   2 +-
 .../canvas/custom-component/UserView.vue      |  10 +-
 frontend/src/lang/en.js                       |   3 +-
 frontend/src/lang/tw.js                       |   3 +-
 frontend/src/lang/zh.js                       |   3 +-
 .../src/views/chart/chart/bar/bar_antv.js     | 192 ++++++++
 frontend/src/views/chart/chart/chart.js       |  11 +-
 .../views/chart/chart/common/common_antv.js   | 431 ++++++++++++++++++
 .../views/chart/chart/funnel/funnel_antv.js   |  77 ++++
 .../src/views/chart/chart/gauge/gauge_antv.js |  63 +++
 frontend/src/views/chart/chart/line/line.js   |   7 -
 .../src/views/chart/chart/line/line_antv.js   | 176 +++++++
 .../src/views/chart/chart/liquid/liquid.js    |  13 +-
 frontend/src/views/chart/chart/mix/mix.js     |   7 -
 .../src/views/chart/chart/mix/mix_antv.js     | 156 +++++++
 .../src/views/chart/chart/pie/pie_antv.js     | 157 +++++++
 .../src/views/chart/chart/radar/radar_antv.js | 145 ++++++
 .../views/chart/chart/scatter/scatter_antv.js |  85 ++++
 .../views/chart/chart/treemap/treemap_antv.js |  77 ++++
 .../chart/components/ChartComponentG2.vue     | 189 ++++++--
 .../component-style/LegendSelectorAntV.vue    | 162 +++++++
 .../component-style/SplitSelectorAntV.vue     | 155 +++++++
 .../component-style/TitleSelectorAntV.vue     | 156 +++++++
 .../component-style/XAxisSelectorAntV.vue     | 206 +++++++++
 .../component-style/YAxisExtSelectorAntV.vue  | 209 +++++++++
 .../component-style/YAxisSelectorAntV.vue     | 217 +++++++++
 .../shape-attr/LabelSelectorAntV.vue          | 180 ++++++++
 .../components/shape-attr/SizeSelector.vue    |   6 +-
 .../shape-attr/SizeSelectorAntV.vue           | 375 +++++++++++++++
 .../shape-attr/TooltipSelectorAntV.vue        | 126 +++++
 frontend/src/views/chart/group/Group.vue      |   1 +
 frontend/src/views/chart/view/ChartEdit.vue   | 233 ++++------
 frontend/src/views/chart/view/ChartType.vue   | 270 +++++++++++
 39 files changed, 4392 insertions(+), 255 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/dto/chart/AxisChartDataAntVDTO.java
 create mode 100644 backend/src/main/resources/db/migration/V27__de1.4.sql
 create mode 100644 frontend/src/views/chart/chart/bar/bar_antv.js
 create mode 100644 frontend/src/views/chart/chart/common/common_antv.js
 create mode 100644 frontend/src/views/chart/chart/funnel/funnel_antv.js
 create mode 100644 frontend/src/views/chart/chart/gauge/gauge_antv.js
 create mode 100644 frontend/src/views/chart/chart/line/line_antv.js
 create mode 100644 frontend/src/views/chart/chart/mix/mix_antv.js
 create mode 100644 frontend/src/views/chart/chart/pie/pie_antv.js
 create mode 100644 frontend/src/views/chart/chart/radar/radar_antv.js
 create mode 100644 frontend/src/views/chart/chart/scatter/scatter_antv.js
 create mode 100644 frontend/src/views/chart/chart/treemap/treemap_antv.js
 create mode 100644 frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
 create mode 100644 frontend/src/views/chart/view/ChartType.vue

diff --git a/backend/src/main/java/io/dataease/base/domain/ChartView.java b/backend/src/main/java/io/dataease/base/domain/ChartView.java
index ed807bd4fd..4744402b39 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartView.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartView.java
@@ -17,6 +17,8 @@ public class ChartView implements Serializable {
     private String tableId;
     @ApiModelProperty("图表类型")
     private String type;
+    @ApiModelProperty("chart渲染方式")
+    private String render;
     @ApiModelProperty("标题")
     private String title;
     @ApiModelProperty("创建人")
@@ -29,4 +31,4 @@ public class ChartView implements Serializable {
     private String stylePriority;
 
     private static final long serialVersionUID = 1L;
-}
\ No newline at end of file
+}
diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java b/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
index 7aaf8d21e5..aa4203c735 100644
--- a/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewExample.java
@@ -454,6 +454,76 @@ public class ChartViewExample {
             return (Criteria) this;
         }
 
+        public Criteria andRenderIsNull() {
+            addCriterion("render is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderIsNotNull() {
+            addCriterion("render is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderEqualTo(String value) {
+            addCriterion("render =", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderNotEqualTo(String value) {
+            addCriterion("render <>", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderGreaterThan(String value) {
+            addCriterion("render >", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderGreaterThanOrEqualTo(String value) {
+            addCriterion("render >=", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderLessThan(String value) {
+            addCriterion("render <", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderLessThanOrEqualTo(String value) {
+            addCriterion("render <=", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderLike(String value) {
+            addCriterion("render like", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderNotLike(String value) {
+            addCriterion("render not like", value, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderIn(List<String> values) {
+            addCriterion("render in", values, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderNotIn(List<String> values) {
+            addCriterion("render not in", values, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderBetween(String value1, String value2) {
+            addCriterion("render between", value1, value2, "render");
+            return (Criteria) this;
+        }
+
+        public Criteria andRenderNotBetween(String value1, String value2) {
+            addCriterion("render not between", value1, value2, "render");
+            return (Criteria) this;
+        }
+
         public Criteria andTitleIsNull() {
             addCriterion("title is null");
             return (Criteria) this;
@@ -877,4 +947,4 @@ public class ChartViewExample {
             this(condition, value, secondValue, null);
         }
     }
-}
\ No newline at end of file
+}
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 72b2eaaca0..270765ab1f 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ChartViewMapper.xml
@@ -7,6 +7,7 @@
     <result column="scene_id" jdbcType="VARCHAR" property="sceneId" />
     <result column="table_id" jdbcType="VARCHAR" property="tableId" />
     <result column="type" jdbcType="VARCHAR" property="type" />
+    <result column="render" jdbcType="VARCHAR" property="render" />
     <result column="title" jdbcType="VARCHAR" property="title" />
     <result column="create_by" jdbcType="VARCHAR" property="createBy" />
     <result column="create_time" jdbcType="BIGINT" property="createTime" />
@@ -84,11 +85,11 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time, 
+    id, `name`, scene_id, table_id, `type`, render, title, create_by, create_time, update_time,
     style_priority
   </sql>
   <sql id="Blob_Column_List">
-    x_axis, y_axis, y_axis_ext, ext_stack, ext_bubble, custom_attr, custom_style, custom_filter, 
+    x_axis, y_axis, y_axis_ext, 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">
@@ -122,7 +123,7 @@
     </if>
   </select>
   <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
-    select 
+    select
     <include refid="Base_Column_List" />
     ,
     <include refid="Blob_Column_List" />
@@ -140,20 +141,22 @@
     </if>
   </delete>
   <insert id="insert" parameterType="io.dataease.base.domain.ChartViewWithBLOBs">
-    insert into chart_view (id, `name`, scene_id, 
-      table_id, `type`, title, 
-      create_by, create_time, update_time, 
-      style_priority, x_axis, y_axis, 
-      y_axis_ext, 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}, 
-      #{yAxisExt,jdbcType=LONGVARCHAR}, #{extStack,jdbcType=LONGVARCHAR}, #{extBubble,jdbcType=LONGVARCHAR}, 
-      #{customAttr,jdbcType=LONGVARCHAR}, #{customStyle,jdbcType=LONGVARCHAR}, #{customFilter,jdbcType=LONGVARCHAR}, 
-      #{drillFields,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR})
+    insert into chart_view (id, `name`, scene_id,
+      table_id, `type`, render,
+      title, create_by, create_time,
+      update_time, style_priority, x_axis,
+      y_axis, y_axis_ext, 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}, #{render,jdbcType=VARCHAR},
+      #{title,jdbcType=VARCHAR}, #{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT},
+      #{updateTime,jdbcType=BIGINT}, #{stylePriority,jdbcType=VARCHAR}, #{xAxis,jdbcType=LONGVARCHAR},
+      #{yAxis,jdbcType=LONGVARCHAR}, #{yAxisExt,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
@@ -173,6 +176,9 @@
       <if test="type != null">
         `type`,
       </if>
+      <if test="render != null">
+        render,
+      </if>
       <if test="title != null">
         title,
       </if>
@@ -235,6 +241,9 @@
       <if test="type != null">
         #{type,jdbcType=VARCHAR},
       </if>
+      <if test="render != null">
+        #{render,jdbcType=VARCHAR},
+      </if>
       <if test="title != null">
         #{title,jdbcType=VARCHAR},
       </if>
@@ -306,6 +315,9 @@
       <if test="record.type != null">
         `type` = #{record.type,jdbcType=VARCHAR},
       </if>
+      <if test="record.render != null">
+        render = #{record.render,jdbcType=VARCHAR},
+      </if>
       <if test="record.title != null">
         title = #{record.title,jdbcType=VARCHAR},
       </if>
@@ -363,6 +375,7 @@
       scene_id = #{record.sceneId,jdbcType=VARCHAR},
       table_id = #{record.tableId,jdbcType=VARCHAR},
       `type` = #{record.type,jdbcType=VARCHAR},
+      render = #{record.render,jdbcType=VARCHAR},
       title = #{record.title,jdbcType=VARCHAR},
       create_by = #{record.createBy,jdbcType=VARCHAR},
       create_time = #{record.createTime,jdbcType=BIGINT},
@@ -389,6 +402,7 @@
       scene_id = #{record.sceneId,jdbcType=VARCHAR},
       table_id = #{record.tableId,jdbcType=VARCHAR},
       `type` = #{record.type,jdbcType=VARCHAR},
+      render = #{record.render,jdbcType=VARCHAR},
       title = #{record.title,jdbcType=VARCHAR},
       create_by = #{record.createBy,jdbcType=VARCHAR},
       create_time = #{record.createTime,jdbcType=BIGINT},
@@ -413,6 +427,9 @@
       <if test="type != null">
         `type` = #{type,jdbcType=VARCHAR},
       </if>
+      <if test="render != null">
+        render = #{render,jdbcType=VARCHAR},
+      </if>
       <if test="title != null">
         title = #{title,jdbcType=VARCHAR},
       </if>
@@ -467,6 +484,7 @@
       scene_id = #{sceneId,jdbcType=VARCHAR},
       table_id = #{tableId,jdbcType=VARCHAR},
       `type` = #{type,jdbcType=VARCHAR},
+      render = #{render,jdbcType=VARCHAR},
       title = #{title,jdbcType=VARCHAR},
       create_by = #{createBy,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
@@ -490,6 +508,7 @@
       scene_id = #{sceneId,jdbcType=VARCHAR},
       table_id = #{tableId,jdbcType=VARCHAR},
       `type` = #{type,jdbcType=VARCHAR},
+      render = #{render,jdbcType=VARCHAR},
       title = #{title,jdbcType=VARCHAR},
       create_by = #{createBy,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
@@ -497,4 +516,4 @@
       style_priority = #{stylePriority,jdbcType=VARCHAR}
     where id = #{id,jdbcType=VARCHAR}
   </update>
-</mapper>
\ No newline at end of file
+</mapper>
diff --git a/backend/src/main/java/io/dataease/dto/chart/AxisChartDataAntVDTO.java b/backend/src/main/java/io/dataease/dto/chart/AxisChartDataAntVDTO.java
new file mode 100644
index 0000000000..bbc4441010
--- /dev/null
+++ b/backend/src/main/java/io/dataease/dto/chart/AxisChartDataAntVDTO.java
@@ -0,0 +1,21 @@
+package io.dataease.dto.chart;
+
+import lombok.Data;
+
+import java.math.BigDecimal;
+import java.util.List;
+
+/**
+ * @Author gin
+ * @Date 2021/8/9 10:14 上午
+ */
+@Data
+public class AxisChartDataAntVDTO {
+    private BigDecimal value;
+    private List<ChartDimensionDTO> dimensionList;
+    private List<ChartQuotaDTO> quotaList;
+    private String field;
+    private String name;
+    private String category;
+    private BigDecimal popSize;
+}
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 2f19f844d4..655b580c15 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -441,29 +441,51 @@ public class ChartViewService {
 
         Map<String, Object> map = new TreeMap<>();
         // 图表组件可再扩展
-        Map<String, Object> mapChart;
-        if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
-            mapChart = transStackChartData(xAxis, yAxis, view, data, extStack, isDrill);
-        } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
-            mapChart = transScatterData(xAxis, yAxis, view, data, extBubble, isDrill);
-        } else if (StringUtils.containsIgnoreCase(view.getType(), "radar")) {
-            mapChart = transRadarChartData(xAxis, yAxis, view, data, isDrill);
-        } else if (StringUtils.containsIgnoreCase(view.getType(), "text")
-                || StringUtils.containsIgnoreCase(view.getType(), "gauge")) {
-            mapChart = transNormalChartData(xAxis, yAxis, view, data, isDrill);
-        } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
-            mapChart = transMixChartData(xAxis, yAxis, view, data, isDrill);
-        } else {
-            mapChart = transChartData(xAxis, yAxis, view, data, isDrill);
+        Map<String, Object> mapChart = new HashMap<>();
+        if (StringUtils.equalsIgnoreCase(view.getRender(), "echarts")) {
+            if (StringUtils.containsIgnoreCase(view.getType(), "stack")) {
+                mapChart = transStackChartData(xAxis, yAxis, view, data, extStack, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
+                mapChart = transScatterData(xAxis, yAxis, view, data, extBubble, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "radar")) {
+                mapChart = transRadarChartData(xAxis, yAxis, view, data, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "text")
+                    || StringUtils.containsIgnoreCase(view.getType(), "gauge")
+                    || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
+                mapChart = transNormalChartData(xAxis, yAxis, view, data, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
+                mapChart = transMixChartData(xAxis, yAxis, view, data, isDrill);
+            } else {
+                mapChart = transChartData(xAxis, yAxis, view, data, isDrill);
+            }
+        } else if (StringUtils.equalsIgnoreCase(view.getRender(), "antv")) {
+            if (StringUtils.containsIgnoreCase(view.getType(), "bar-stack")) {
+                mapChart = transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "line-stack")) {
+                mapChart = transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
+                mapChart = transScatterDataAntV(xAxis, yAxis, view, data, extBubble, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "radar")) {
+                mapChart = transRadarChartDataAntV(xAxis, yAxis, view, data, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "text")
+                    || StringUtils.containsIgnoreCase(view.getType(), "gauge")
+                    || StringUtils.equalsIgnoreCase("liquid", view.getType())) {
+                mapChart = transNormalChartData(xAxis, yAxis, view, data, isDrill);
+            } else if (StringUtils.containsIgnoreCase(view.getType(), "chart-mix")) {
+                mapChart = transMixChartDataAntV(xAxis, yAxis, view, data, isDrill);
+            } else {
+                mapChart = transChartDataAntV(xAxis, yAxis, view, data, isDrill);
+            }
         }
+
         // table组件，明细表，也用于导出数据
         Map<String, Object> mapTableNormal = transTableNormal(xAxis, yAxis, view, data, extStack);
 
         map.putAll(mapChart);
         map.putAll(mapTableNormal);
 
-        List<DatasetTableField>  sourceFields = dataSetTableFieldsService.getFieldsByTableId(view.getTableId());
-        map.put("sourceFields",sourceFields);
+        List<DatasetTableField> sourceFields = dataSetTableFieldsService.getFieldsByTableId(view.getTableId());
+        map.put("sourceFields", sourceFields);
 
         ChartViewDTO dto = new ChartViewDTO();
         BeanUtils.copyBean(dto, view);
@@ -529,6 +551,341 @@ public class ChartViewService {
         return result;
     }
 
+    // AntV
+    private Map<String, Object> transChartDataAntV(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, boolean isDrill) {
+        Map<String, Object> map = new HashMap<>();
+
+        List<AxisChartDataAntVDTO> datas = new ArrayList<>();
+        for (int i1 = 0; i1 < data.size(); i1++) {
+            String[] row = data.get(i1);
+
+            StringBuilder a = new StringBuilder();
+            if (isDrill) {
+                a.append(row[xAxis.size() - 1]);
+            } else {
+                for (int i = 0; i < xAxis.size(); i++) {
+                    if (i == xAxis.size() - 1) {
+                        a.append(row[i]);
+                    } else {
+                        a.append(row[i]).append("\n");
+                    }
+                }
+            }
+
+            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                axisChartDataDTO.setField(a.toString());
+                axisChartDataDTO.setName(a.toString());
+
+                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                for (int j = 0; j < xAxis.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxis.get(j).getId());
+                    chartDimensionDTO.setValue(row[j]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                axisChartDataDTO.setDimensionList(dimensionList);
+
+                int j = i - xAxis.size();
+                ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                chartQuotaDTO.setId(yAxis.get(j).getId());
+                quotaList.add(chartQuotaDTO);
+                axisChartDataDTO.setQuotaList(quotaList);
+                try {
+                    axisChartDataDTO.setValue(new BigDecimal(StringUtils.isEmpty(row[i]) ? "0" : row[i]));
+                } catch (Exception e) {
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                axisChartDataDTO.setCategory(yAxis.get(j).getName());
+                datas.add(axisChartDataDTO);
+            }
+        }
+        map.put("datas", datas);
+        return map;
+    }
+
+    // AntV柱状堆叠图
+    private Map<String, Object> transStackChartDataAntV(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, List<ChartViewFieldDTO> extStack, boolean isDrill) {
+        Map<String, Object> map = new HashMap<>();
+
+        List<AxisChartDataAntVDTO> datas = new ArrayList<>();
+
+        if (CollectionUtils.isNotEmpty(extStack)) {
+            for (int i1 = 0; i1 < data.size(); i1++) {
+                String[] row = data.get(i1);
+
+                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                StringBuilder a = new StringBuilder();
+                if (isDrill) {
+                    a.append(row[xAxis.size() - 1]);
+                } else {
+                    for (int i = 0; i < xAxis.size(); i++) {
+                        if (i == xAxis.size() - 1) {
+                            a.append(row[i]);
+                        } else {
+                            a.append(row[i]).append("\n");
+                        }
+                    }
+                }
+                axisChartDataDTO.setField(a.toString());
+                axisChartDataDTO.setCategory(row[xAxis.size()]);
+
+                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                for (int k = 0; k < xAxis.size(); k++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxis.get(k).getId());
+                    chartDimensionDTO.setValue(row[k]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                axisChartDataDTO.setDimensionList(dimensionList);
+
+                if (CollectionUtils.isNotEmpty(yAxis)) {
+                    int valueIndex = xAxis.size() + extStack.size();
+                    ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                    chartQuotaDTO.setId(yAxis.get(0).getId());
+                    quotaList.add(chartQuotaDTO);
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    try {
+                        axisChartDataDTO.setValue(new BigDecimal(StringUtils.isEmpty(row[valueIndex]) ? "0" : row[valueIndex]));
+                    } catch (Exception e) {
+                        axisChartDataDTO.setValue(new BigDecimal(0));
+                    }
+                } else {
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                datas.add(axisChartDataDTO);
+            }
+        } else {
+            for (int i1 = 0; i1 < data.size(); i1++) {
+                String[] row = data.get(i1);
+
+                StringBuilder a = new StringBuilder();
+                if (isDrill) {
+                    a.append(row[xAxis.size() - 1]);
+                } else {
+                    for (int i = 0; i < xAxis.size(); i++) {
+                        if (i == xAxis.size() - 1) {
+                            a.append(row[i]);
+                        } else {
+                            a.append(row[i]).append("\n");
+                        }
+                    }
+                }
+
+                for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                    AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                    axisChartDataDTO.setField(a.toString());
+
+                    List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                    List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                    for (int j = 0; j < xAxis.size(); j++) {
+                        ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                        chartDimensionDTO.setId(xAxis.get(j).getId());
+                        chartDimensionDTO.setValue(row[j]);
+                        dimensionList.add(chartDimensionDTO);
+                    }
+                    axisChartDataDTO.setDimensionList(dimensionList);
+
+                    int j = i - xAxis.size();
+                    ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                    chartQuotaDTO.setId(yAxis.get(j).getId());
+                    quotaList.add(chartQuotaDTO);
+                    axisChartDataDTO.setQuotaList(quotaList);
+                    try {
+                        axisChartDataDTO.setValue(new BigDecimal(StringUtils.isEmpty(row[i]) ? "0" : row[i]));
+                    } catch (Exception e) {
+                        axisChartDataDTO.setValue(new BigDecimal(0));
+                    }
+                    axisChartDataDTO.setCategory(yAxis.get(j).getName());
+                    datas.add(axisChartDataDTO);
+                }
+            }
+        }
+        map.put("datas", datas);
+        return map;
+    }
+
+    //AntV scatter
+    private Map<String, Object> transScatterDataAntV(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, List<ChartViewFieldDTO> extBubble, boolean isDrill) {
+        Map<String, Object> map = new HashMap<>();
+
+        List<AxisChartDataAntVDTO> datas = new ArrayList<>();
+        for (int i1 = 0; i1 < data.size(); i1++) {
+            String[] row = data.get(i1);
+
+            StringBuilder a = new StringBuilder();
+            if (isDrill) {
+                a.append(row[xAxis.size() - 1]);
+            } else {
+                for (int i = 0; i < xAxis.size(); i++) {
+                    if (i == xAxis.size() - 1) {
+                        a.append(row[i]);
+                    } else {
+                        a.append(row[i]).append("\n");
+                    }
+                }
+            }
+
+            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                axisChartDataDTO.setField(a.toString());
+
+                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                for (int j = 0; j < xAxis.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxis.get(j).getId());
+                    chartDimensionDTO.setValue(row[j]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                axisChartDataDTO.setDimensionList(dimensionList);
+
+                int j = i - xAxis.size();
+                ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                chartQuotaDTO.setId(yAxis.get(j).getId());
+                quotaList.add(chartQuotaDTO);
+                axisChartDataDTO.setQuotaList(quotaList);
+                try {
+                    axisChartDataDTO.setValue(new BigDecimal(StringUtils.isEmpty(row[i]) ? "0" : row[i]));
+                } catch (Exception e) {
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                axisChartDataDTO.setCategory(yAxis.get(j).getName());
+                // pop
+                if (CollectionUtils.isNotEmpty(extBubble)) {
+                    axisChartDataDTO.setPopSize(new BigDecimal(StringUtils.isEmpty(row[xAxis.size() + yAxis.size()]) ? "0" : row[xAxis.size() + yAxis.size()]));
+                }
+                datas.add(axisChartDataDTO);
+            }
+        }
+        map.put("datas", datas);
+        return map;
+    }
+
+    // antv radar
+    private Map<String, Object> transRadarChartDataAntV(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, boolean isDrill) {
+        Map<String, Object> map = new HashMap<>();
+
+        List<AxisChartDataAntVDTO> datas = new ArrayList<>();
+        for (int i1 = 0; i1 < data.size(); i1++) {
+            String[] row = data.get(i1);
+
+            StringBuilder a = new StringBuilder();
+            if (isDrill) {
+                a.append(row[xAxis.size() - 1]);
+            } else {
+                for (int i = 0; i < xAxis.size(); i++) {
+                    if (i == xAxis.size() - 1) {
+                        a.append(row[i]);
+                    } else {
+                        a.append(row[i]).append("\n");
+                    }
+                }
+            }
+
+            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+                axisChartDataDTO.setField(a.toString());
+                axisChartDataDTO.setName(a.toString());
+
+                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                for (int j = 0; j < xAxis.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxis.get(j).getId());
+                    chartDimensionDTO.setValue(row[j]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                axisChartDataDTO.setDimensionList(dimensionList);
+
+                int j = i - xAxis.size();
+                ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                chartQuotaDTO.setId(yAxis.get(j).getId());
+                quotaList.add(chartQuotaDTO);
+                axisChartDataDTO.setQuotaList(quotaList);
+                try {
+                    axisChartDataDTO.setValue(new BigDecimal(StringUtils.isEmpty(row[i]) ? "0" : row[i]));
+                } catch (Exception e) {
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                axisChartDataDTO.setCategory(yAxis.get(j).getName());
+                datas.add(axisChartDataDTO);
+            }
+        }
+        map.put("datas", datas);
+        return map;
+    }
+
+    // antV组合图形
+    private Map<String, Object> transMixChartDataAntV(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, boolean isDrill) {
+        Map<String, Object> map = new HashMap<>();
+
+        List<Series> series = new ArrayList<>();
+        for (ChartViewFieldDTO y : yAxis) {
+            Series series1 = new Series();
+            series1.setName(y.getName());
+            series1.setType(y.getChartType());
+            series1.setData(new ArrayList<>());
+            series.add(series1);
+        }
+        for (int i1 = 0; i1 < data.size(); i1++) {
+            String[] d = data.get(i1);
+
+            for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
+                AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
+
+                StringBuilder a = new StringBuilder();
+                if (isDrill) {
+                    a.append(d[xAxis.size() - 1]);
+                } else {
+                    for (int ii = 0; ii < xAxis.size(); ii++) {
+                        if (ii == xAxis.size() - 1) {
+                            a.append(d[ii]);
+                        } else {
+                            a.append(d[ii]).append("\n");
+                        }
+                    }
+                }
+                axisChartDataDTO.setName(a.toString());
+                axisChartDataDTO.setField(a.toString());
+
+                List<ChartDimensionDTO> dimensionList = new ArrayList<>();
+                List<ChartQuotaDTO> quotaList = new ArrayList<>();
+
+                for (int j = 0; j < xAxis.size(); j++) {
+                    ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                    chartDimensionDTO.setId(xAxis.get(j).getId());
+                    chartDimensionDTO.setValue(d[j]);
+                    dimensionList.add(chartDimensionDTO);
+                }
+                axisChartDataDTO.setDimensionList(dimensionList);
+
+                int j = i - xAxis.size();
+                ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
+                chartQuotaDTO.setId(yAxis.get(j).getId());
+                quotaList.add(chartQuotaDTO);
+                axisChartDataDTO.setQuotaList(quotaList);
+                try {
+                    axisChartDataDTO.setValue(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
+                } catch (Exception e) {
+                    axisChartDataDTO.setValue(new BigDecimal(0));
+                }
+                series.get(j).getData().add(axisChartDataDTO);
+            }
+        }
+
+        map.put("datas", series);
+        return map;
+    }
+
     // 基础图形
     private Map<String, Object> transChartData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewWithBLOBs view, List<String[]> data, boolean isDrill) {
         Map<String, Object> map = new HashMap<>();
diff --git a/backend/src/main/resources/db/migration/V27__de1.4.sql b/backend/src/main/resources/db/migration/V27__de1.4.sql
new file mode 100644
index 0000000000..ff0edde3c0
--- /dev/null
+++ b/backend/src/main/resources/db/migration/V27__de1.4.sql
@@ -0,0 +1,3 @@
+ALTER TABLE `chart_view` ADD COLUMN `render` varchar(50)  COMMENT '视图渲染方式' AFTER `type`;
+UPDATE `chart_view` SET `render` = 'echarts' WHERE `type` != 'liquid';
+UPDATE `chart_view` SET `render` = 'antv' WHERE `type` = 'liquid';
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index d33ea84c23..ade934dfaf 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -65,7 +65,7 @@
         <!--要生成的数据库表 -->
 
 
-        <table tableName="datasource"/>
+        <table tableName="chart_view"/>
 
 <!--        <table tableName="sys_dict_item"/>-->
 <!--        <table tableName="dataset_table_field"/>-->
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index bb197ccc33..6e5e93eda2 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -17,7 +17,7 @@
       </div>
     </div>
     <chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
-    <chart-component-g2 v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'g2'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
+    <chart-component-g2 v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
     <!--    <chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />-->
     <table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
     <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
@@ -269,7 +269,7 @@ export default {
               this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
               this.resetDrill()
             }
-            this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters))
+            this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : []))
             this.drillFields = JSON.parse(JSON.stringify(response.data.drillFields))
             this.requestStatus = 'merging'
             this.mergeStyle()
@@ -443,11 +443,7 @@ export default {
     },
 
     renderComponent() {
-      if (this.chart.type === 'liquid') {
-        return 'g2'
-      } else {
-        return 'echarts'
-      }
+      return this.chart.render
     }
   }
 }
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index ca2d3afef4..dbaab8569a 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -931,7 +931,8 @@ export default {
     liquid_shape_triangle: 'Triangle',
     liquid_shape_pin: 'Pin',
     liquid_shape_rect: 'Rect',
-    dimension_or_quota: 'Dimension Or Quota'
+    dimension_or_quota: 'Dimension Or Quota',
+    axis_value_split_count: 'Tick Count'
   },
   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 328ee64971..5782cb9485 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -932,7 +932,8 @@ export default {
     liquid_shape_triangle: '三角形',
     liquid_shape_pin: '氣球',
     liquid_shape_rect: '矩形',
-    dimension_or_quota: '維度或指標'
+    dimension_or_quota: '維度或指標',
+    axis_value_split_count: '刻度數'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 27f0413953..6d2a130a18 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -932,7 +932,8 @@ export default {
     liquid_shape_triangle: '三角形',
     liquid_shape_pin: '气球',
     liquid_shape_rect: '矩形',
-    dimension_or_quota: '维度或指标'
+    dimension_or_quota: '维度或指标',
+    axis_value_split_count: '刻度数'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
diff --git a/frontend/src/views/chart/chart/bar/bar_antv.js b/frontend/src/views/chart/chart/bar/bar_antv.js
new file mode 100644
index 0000000000..ded5f4bffa
--- /dev/null
+++ b/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -0,0 +1,192 @@
+import { Column, Bar } from '@antv/g2plot'
+import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
+
+export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  const xAxis = getXAxis(chart)
+  const yAxis = getYAxis(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    theme: theme,
+    data: data,
+    xField: 'field',
+    yField: 'value',
+    seriesField: 'category',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
+        }
+      },
+      {
+        type: 'active-region', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      if (s.barDefault) {
+        delete options.marginRatio
+      } else {
+        options.marginRatio = s.barGap
+      }
+    }
+  }
+  // group
+  if (isGroup) {
+    options.isGroup = true
+  } else {
+    delete options.isGroup
+  }
+  // stack
+  if (isStack) {
+    options.isStack = true
+  } else {
+    delete options.isStack
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Column(container, options)
+
+  plot.off('interval:click')
+  plot.on('interval:click', action)
+
+  return plot
+}
+
+export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  const xAxis = getXAxis(chart)
+  const yAxis = getYAxis(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    theme: theme,
+    data: data,
+    xField: 'value',
+    yField: 'field',
+    seriesField: 'category',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
+        }
+      },
+      {
+        type: 'active-region', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      if (s.barDefault) {
+        delete options.marginRatio
+      } else {
+        options.marginRatio = s.barGap
+      }
+    }
+  }
+  // group
+  if (isGroup) {
+    options.isGroup = true
+  } else {
+    delete options.isGroup
+  }
+  // stack
+  if (isStack) {
+    options.isStack = true
+  } else {
+    delete options.isStack
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Bar(container, options)
+
+  plot.off('interval:click')
+  plot.on('interval:click', action)
+
+  return plot
+}
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 909d34af5d..1e5aa69017 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -86,7 +86,7 @@ export const DEFAULT_LEGEND_STYLE = {
   hPosition: 'center',
   vPosition: 'bottom',
   orient: 'horizontal',
-  icon: 'rect',
+  icon: 'circle',
   textStyle: {
     color: '#333333',
     fontSize: '12'
@@ -119,7 +119,8 @@ export const DEFAULT_XAXIS_STYLE = {
     auto: true,
     min: null,
     max: null,
-    split: null
+    split: null,
+    splitCount: null
   }
 }
 export const DEFAULT_YAXIS_STYLE = {
@@ -149,7 +150,8 @@ export const DEFAULT_YAXIS_STYLE = {
     auto: true,
     min: null,
     max: null,
-    split: null
+    split: null,
+    splitCount: null
   }
 }
 export const DEFAULT_YAXIS_EXT_STYLE = {
@@ -179,7 +181,8 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
     auto: true,
     min: null,
     max: null,
-    split: null
+    split: null,
+    splitCount: null
   }
 }
 export const DEFAULT_BACKGROUND_COLOR = {
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
new file mode 100644
index 0000000000..4175a70bf1
--- /dev/null
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -0,0 +1,431 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
+export function getPadding(chart) {
+  if (chart.drill) {
+    return [0, 10, 26, 10]
+  } else {
+    return [0, 10, 14, 10]
+  }
+}
+// color,label,tooltip,axis,legend,background
+export function getTheme(chart) {
+  const colors = []
+  let bgColor, labelFontsize, labelColor, tooltipColor, tooltipFontsize, legendColor, legendFontsize
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+      c.colors.forEach(ele => {
+        colors.push(hexColorToRGBA(ele, c.alpha))
+      })
+    }
+    // label
+    if (customAttr.label) {
+      const l = JSON.parse(JSON.stringify(customAttr.label))
+      labelFontsize = l.fontSize
+      labelColor = l.color
+    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const t = JSON.parse(JSON.stringify(customAttr.tooltip))
+      tooltipColor = t.textStyle.color
+      tooltipFontsize = t.textStyle.fontSize
+    }
+  }
+
+  let customStyle
+  if (chart.customStyle) {
+    customStyle = JSON.parse(chart.customStyle)
+    // bg
+    if (customStyle.background) {
+      bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+    }
+    // legend
+    if (customStyle.legend) {
+      const l = JSON.parse(JSON.stringify(customStyle.legend))
+      legendColor = l.textStyle.color
+      legendFontsize = l.textStyle.fontSize
+    }
+  }
+
+  return {
+    styleSheet: {
+      brandColor: colors[0],
+      paletteQualitative10: colors,
+      paletteQualitative20: colors,
+      backgroundColor: bgColor
+    },
+    labels: {
+      offset: 4,
+      style: {
+        fill: labelColor,
+        fontSize: labelFontsize
+      }
+    },
+    innerLabels: {
+      offset: 4,
+      style: {
+        fill: labelColor,
+        fontSize: labelFontsize
+      }
+    },
+    pieLabels: {
+      offset: 4,
+      style: {
+        fill: labelColor,
+        fontSize: labelFontsize
+      }
+    },
+    components: {
+      tooltip: {
+        domStyles: {
+          'g2-tooltip': {
+            color: tooltipColor,
+            fontSize: tooltipFontsize + 'px'
+          }
+        }
+      },
+      legend: {
+        common: {
+          itemName: {
+            style: {
+              fill: legendColor,
+              fontSize: parseInt(legendFontsize)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+// 通用label
+export function getLabel(chart) {
+  let label = {}
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // label
+    if (customAttr.label) {
+      const l = JSON.parse(JSON.stringify(customAttr.label))
+      if (l.show) {
+        if (chart.type === 'pie') {
+          label = {
+            type: l.position
+          }
+        } else {
+          label = {
+            position: l.position
+          }
+        }
+        label.style = {
+          fill: l.color,
+          fontSize: parseInt(l.fontSize)
+        }
+      } else {
+        label = false
+      }
+    }
+  }
+  return label
+}
+// 通用tooltip
+export function getTooltip(chart) {
+  let tooltip = {}
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // tooltip
+    if (customAttr.tooltip) {
+      const t = JSON.parse(JSON.stringify(customAttr.tooltip))
+      if (t.show) {
+        tooltip = {}
+      } else {
+        tooltip = false
+      }
+    }
+  }
+  return tooltip
+}
+// 通用legend
+export function getLegend(chart) {
+  let legend = {}
+  let customStyle
+  if (chart.customStyle) {
+    customStyle = JSON.parse(chart.customStyle)
+    // legend
+    if (customStyle.legend) {
+      const l = JSON.parse(JSON.stringify(customStyle.legend))
+      if (l.show) {
+        let offsetX, offsetY, position
+        const orient = l.orient
+        const legendSymbol = l.icon
+        // fix position
+        if (l.hPosition === 'center') {
+          position = l.vPosition === 'center' ? 'top' : l.vPosition
+        } else if (l.vPosition === 'center') {
+          position = l.hPosition === 'center' ? 'left' : l.hPosition
+        } else {
+          if (orient === 'horizontal') {
+            position = l.vPosition + '-' + l.hPosition
+          } else {
+            position = l.hPosition + '-' + l.vPosition
+          }
+        }
+        // fix offset
+        if (orient === 'horizontal') {
+          if (l.hPosition === 'left') {
+            offsetX = 16
+          } else if (l.hPosition === 'right') {
+            offsetX = -16
+          } else {
+            offsetX = 0
+          }
+          if (l.vPosition === 'top') {
+            offsetY = 0
+          } else if (l.vPosition === 'bottom') {
+            if (chart.drill) {
+              offsetY = -16
+            } else {
+              offsetY = -4
+            }
+          } else {
+            offsetY = 0
+          }
+        } else {
+          if (l.hPosition === 'left') {
+            offsetX = 10
+          } else if (l.hPosition === 'right') {
+            offsetX = -10
+          } else {
+            offsetX = 0
+          }
+          if (l.vPosition === 'top') {
+            offsetY = 0
+          } else if (l.vPosition === 'bottom') {
+            if (chart.drill) {
+              offsetY = -22
+            } else {
+              offsetY = -10
+            }
+          } else {
+            offsetY = 0
+          }
+        }
+
+        legend = {
+          layout: orient,
+          position: position,
+          offsetX: offsetX,
+          offsetY: offsetY,
+          marker: {
+            symbol: legendSymbol
+          }
+        }
+      } else {
+        legend = false
+      }
+    }
+  }
+  return legend
+}
+// xAxis
+export function getXAxis(chart) {
+  let axis = {}
+  let customStyle
+  if (chart.customStyle) {
+    customStyle = JSON.parse(chart.customStyle)
+    // legend
+    if (customStyle.xAxis) {
+      const a = JSON.parse(JSON.stringify(customStyle.xAxis))
+      if (a.show) {
+        const title = (a.name && a.name !== '') ? {
+          text: a.name,
+          style: {
+            fill: a.nameTextStyle.color,
+            fontSize: parseInt(a.nameTextStyle.fontSize)
+          },
+          spacing: 8
+        } : null
+        const grid = a.splitLine.show ? {
+          line: {
+            style: {
+              stroke: a.splitLine.lineStyle.color,
+              lineWidth: parseInt(a.splitLine.lineStyle.width)
+            }
+          }
+        } : null
+        const label = a.axisLabel.show ? {
+          rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+          style: {
+            fill: a.axisLabel.color,
+            fontSize: parseInt(a.axisLabel.fontSize)
+          }
+        } : null
+
+        axis = {
+          position: transAxisPosition(chart, a),
+          title: title,
+          grid: grid,
+          label: label
+        }
+
+        // 轴值设置
+        delete axis.minLimit
+        delete axis.maxLimit
+        delete axis.tickCount
+        const axisValue = a.axisValue
+        if (chart.type.includes('horizontal')) {
+          if (axisValue && !axisValue.auto) {
+            axisValue.min && (axis.minLimit = parseFloat(axisValue.min))
+            axisValue.max && (axis.maxLimit = parseFloat(axisValue.max))
+            axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
+          }
+        }
+      } else {
+        axis = false
+      }
+    }
+  }
+  return axis
+}
+// yAxis
+export function getYAxis(chart) {
+  let axis = {}
+  let customStyle
+  if (chart.customStyle) {
+    customStyle = JSON.parse(chart.customStyle)
+    // legend
+    if (customStyle.yAxis) {
+      const a = JSON.parse(JSON.stringify(customStyle.yAxis))
+      if (a.show) {
+        const title = (a.name && a.name !== '') ? {
+          text: a.name,
+          style: {
+            fill: a.nameTextStyle.color,
+            fontSize: parseInt(a.nameTextStyle.fontSize)
+          },
+          spacing: 8
+        } : null
+        const grid = a.splitLine.show ? {
+          line: {
+            style: {
+              stroke: a.splitLine.lineStyle.color,
+              lineWidth: parseInt(a.splitLine.lineStyle.width)
+            }
+          }
+        } : null
+        const label = a.axisLabel.show ? {
+          rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+          style: {
+            fill: a.axisLabel.color,
+            fontSize: parseInt(a.axisLabel.fontSize)
+          }
+        } : null
+
+        axis = {
+          position: transAxisPosition(chart, a),
+          title: title,
+          grid: grid,
+          label: label
+        }
+
+        // 轴值设置
+        delete axis.minLimit
+        delete axis.maxLimit
+        delete axis.tickCount
+        const axisValue = a.axisValue
+        if (!chart.type.includes('horizontal')) {
+          if (axisValue && !axisValue.auto) {
+            axisValue.min && (axis.minLimit = parseFloat(axisValue.min))
+            axisValue.max && (axis.maxLimit = parseFloat(axisValue.max))
+            axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
+          }
+        }
+      } else {
+        axis = false
+      }
+    }
+  }
+  return axis
+}
+// yAxisExt
+export function getYAxisExt(chart) {
+  let axis = {}
+  let customStyle
+  if (chart.customStyle) {
+    customStyle = JSON.parse(chart.customStyle)
+    // legend
+    if (customStyle.yAxisExt) {
+      const a = JSON.parse(JSON.stringify(customStyle.yAxisExt))
+      if (a.show) {
+        const title = (a.name && a.name !== '') ? {
+          text: a.name,
+          style: {
+            fill: a.nameTextStyle.color,
+            fontSize: parseInt(a.nameTextStyle.fontSize)
+          },
+          spacing: 8
+        } : null
+        const grid = a.splitLine.show ? {
+          line: {
+            style: {
+              stroke: a.splitLine.lineStyle.color,
+              lineWidth: parseInt(a.splitLine.lineStyle.width)
+            }
+          }
+        } : null
+        const label = a.axisLabel.show ? {
+          rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
+          style: {
+            fill: a.axisLabel.color,
+            fontSize: parseInt(a.axisLabel.fontSize)
+          }
+        } : null
+
+        axis = {
+          position: transAxisPosition(chart, a),
+          title: title,
+          grid: grid,
+          label: label
+        }
+
+        // 轴值设置
+        delete axis.minLimit
+        delete axis.maxLimit
+        delete axis.tickCount
+        const axisValue = a.axisValue
+        if (!chart.type.includes('horizontal')) {
+          if (axisValue && !axisValue.auto) {
+            axisValue.min && (axis.minLimit = parseFloat(axisValue.min))
+            axisValue.max && (axis.maxLimit = parseFloat(axisValue.max))
+            axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
+          }
+        }
+      } else {
+        axis = false
+      }
+    }
+  }
+  return axis
+}
+
+function transAxisPosition(chart, axis) {
+  if (chart.type.includes('horizontal')) {
+    switch (axis.position) {
+      case 'top':
+        return 'right'
+      case 'bottom':
+        return 'left'
+      case 'left':
+        return 'bottom'
+      case 'right':
+        return 'top'
+      default:
+        return axis.position
+    }
+  } else {
+    return axis.position
+  }
+}
diff --git a/frontend/src/views/chart/chart/funnel/funnel_antv.js b/frontend/src/views/chart/chart/funnel/funnel_antv.js
new file mode 100644
index 0000000000..0d940e4a4a
--- /dev/null
+++ b/frontend/src/views/chart/chart/funnel/funnel_antv.js
@@ -0,0 +1,77 @@
+import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
+import { Funnel } from '@antv/g2plot'
+
+export function baseFunnelOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    theme: theme,
+    data: data,
+    xField: 'field',
+    yField: 'value',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    conversionTag: false,
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
+        }
+      }
+      // {
+      //   type: 'active-region', cfg: {
+      //     start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
+      //     end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
+      //   }
+      // }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+    }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Funnel(container, options)
+
+  plot.off('interval:click')
+  plot.on('interval:click', action)
+
+  return plot
+}
+
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
new file mode 100644
index 0000000000..1fe0979e30
--- /dev/null
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -0,0 +1,63 @@
+import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
+import { Gauge } from '@antv/g2plot'
+import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
+
+export function baseGaugeOptionAntV(plot, container, chart, action) {
+  let max, labelContent, startAngel, endAngel
+  // theme
+  const theme = getTheme(chart)
+  // data
+  const data = chart.data.series[0].data[0]
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const size = JSON.parse(JSON.stringify(customAttr.size))
+      max = size.gaugeMax ? size.gaugeMax : DEFAULT_SIZE.gaugeMax
+      startAngel = parseInt(size.gaugeStartAngle) * Math.PI / 180
+      endAngel = parseInt(size.gaugeEndAngle) * Math.PI / 180
+    }
+  }
+  // label
+  if (customAttr.label) {
+    const label = JSON.parse(JSON.stringify(customAttr.label))
+    if (label.show) {
+      labelContent = {
+        style: ({ percent }) => ({
+          fontSize: parseInt(label.fontSize),
+          color: label.color
+        })
+      }
+    } else {
+      labelContent = false
+    }
+  }
+
+  // options
+  const options = {
+    theme: theme,
+    percent: (parseFloat(data) / parseFloat(max)),
+    startAngle: startAngel,
+    endAngle: endAngel,
+    appendPadding: getPadding(chart),
+    // indicator: null,
+    statistic: {
+      content: labelContent
+    }
+    // range: {
+    //   width: 12
+    // },
+    // gaugeStyle: {
+    //   lineCap: 'round'
+    // }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Gauge(container, options)
+
+  return plot
+}
diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js
index d8439617b8..c0d164a0c5 100644
--- a/frontend/src/views/chart/chart/line/line.js
+++ b/frontend/src/views/chart/chart/line/line.js
@@ -36,13 +36,6 @@ export function baseLineOption(chart_option, chart) {
           type: customAttr.size.lineType
         }
         y.smooth = customAttr.size.lineSmooth
-        if (customAttr.size.lineArea) {
-          y.areaStyle = {
-            opacity: 0.6
-          }
-        } else {
-          delete y.areaStyle
-        }
       }
       // label
       if (customAttr.label) {
diff --git a/frontend/src/views/chart/chart/line/line_antv.js b/frontend/src/views/chart/chart/line/line_antv.js
new file mode 100644
index 0000000000..816085ebf2
--- /dev/null
+++ b/frontend/src/views/chart/chart/line/line_antv.js
@@ -0,0 +1,176 @@
+import { Line, Area } from '@antv/g2plot'
+import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
+
+export function baseLineOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  const xAxis = getXAxis(chart)
+  const yAxis = getYAxis(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    point: {},
+    theme: theme,
+    data: data,
+    xField: 'field',
+    yField: 'value',
+    seriesField: 'category',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'point:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'point:mouseleave', action: 'tooltip:hide' }]
+        }
+      },
+      {
+        type: 'active-region', cfg: {
+          start: [{ trigger: 'element:mousemove', action: 'active-region:show' }],
+          end: [{ trigger: 'element:mouseleave', action: 'active-region:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      options.smooth = s.lineSmooth
+      options.point = {
+        size: parseInt(s.lineSymbolSize),
+        shape: s.lineSymbol
+      }
+      options.lineStyle = {
+        lineWidth: parseInt(s.lineWidth)
+      }
+    }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Line(container, options)
+
+  plot.off('point:click')
+  plot.on('point:click', action)
+
+  return plot
+}
+
+export function baseAreaOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  const xAxis = getXAxis(chart)
+  const yAxis = getYAxis(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    point: {},
+    theme: theme,
+    data: data,
+    xField: 'field',
+    yField: 'value',
+    seriesField: 'category',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'point:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'point:mouseleave', action: 'tooltip:hide' }]
+        }
+      },
+      {
+        type: 'active-region', cfg: {
+          start: [{ trigger: 'element:mousemove', action: 'active-region:show' }],
+          end: [{ trigger: 'element:mouseleave', action: 'active-region:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      options.smooth = s.lineSmooth
+      options.point = {
+        size: parseInt(s.lineSymbolSize),
+        shape: s.lineSymbol
+      }
+      options.lineStyle = {
+        lineWidth: parseInt(s.lineWidth)
+      }
+    }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Area(container, options)
+
+  plot.off('point:click')
+  plot.on('point:click', action)
+
+  return plot
+}
diff --git a/frontend/src/views/chart/chart/liquid/liquid.js b/frontend/src/views/chart/chart/liquid/liquid.js
index 81d138caa8..d317e06232 100644
--- a/frontend/src/views/chart/chart/liquid/liquid.js
+++ b/frontend/src/views/chart/chart/liquid/liquid.js
@@ -1,5 +1,5 @@
 import { Liquid } from '@antv/g2plot'
-import { digToHex } from '@/views/chart/chart/util'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export function baseLiquid(plot, container, chart) {
@@ -8,7 +8,7 @@ export function baseLiquid(plot, container, chart) {
   let max, radius, outlineBorder, outlineDistance, waveLength, waveCount, bgColor, shape, labelContent, title
   if (chart.data) {
     if (chart.data.series.length > 0) {
-      value = chart.data.series[0].data[0].value
+      value = chart.data.series[0].data[0]
     }
   }
   let customAttr = {}
@@ -17,9 +17,8 @@ export function baseLiquid(plot, container, chart) {
     // color
     if (customAttr.color) {
       const c = JSON.parse(JSON.stringify(customAttr.color))
-      const alpha = digToHex(parseInt(c.alpha))
       c.colors.forEach(ele => {
-        colors.push(ele.concat(alpha))
+        colors.push(hexColorToRGBA(ele, c.alpha))
       })
     }
     // size
@@ -52,7 +51,7 @@ export function baseLiquid(plot, container, chart) {
   if (chart.customStyle) {
     customStyle = JSON.parse(chart.customStyle)
     if (customStyle.background) {
-      bgColor = customStyle.background.color.concat(digToHex(parseInt(customStyle.background.alpha)))
+      bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
     }
     if (customStyle.text) {
       const t = JSON.parse(JSON.stringify(customStyle.text))
@@ -80,6 +79,7 @@ export function baseLiquid(plot, container, chart) {
       styleSheet: {
         brandColor: colors[0],
         paletteQualitative10: colors,
+        paletteQualitative20: colors,
         backgroundColor: bgColor
       }
     },
@@ -95,10 +95,9 @@ export function baseLiquid(plot, container, chart) {
       count: waveCount
     },
     statistic: {
-      title: title,
+      // title: title,
       content: labelContent
     }
   })
-  plot.render()
   return plot
 }
diff --git a/frontend/src/views/chart/chart/mix/mix.js b/frontend/src/views/chart/chart/mix/mix.js
index 51d6e8b7ec..7e1935738e 100644
--- a/frontend/src/views/chart/chart/mix/mix.js
+++ b/frontend/src/views/chart/chart/mix/mix.js
@@ -50,13 +50,6 @@ export function baseMixOption(chart_option, chart) {
             type: customAttr.size.lineType
           }
           y.smooth = customAttr.size.lineSmooth
-          if (customAttr.size.lineArea) {
-            y.areaStyle = {
-              opacity: 0.6
-            }
-          } else {
-            delete y.areaStyle
-          }
         }
         // scatter
         if (y.type === 'scatter') {
diff --git a/frontend/src/views/chart/chart/mix/mix_antv.js b/frontend/src/views/chart/chart/mix/mix_antv.js
new file mode 100644
index 0000000000..c361008d3b
--- /dev/null
+++ b/frontend/src/views/chart/chart/mix/mix_antv.js
@@ -0,0 +1,156 @@
+import {
+  getLabel,
+  getLegend,
+  getPadding,
+  getTheme,
+  getTooltip,
+  getXAxis,
+  getYAxis,
+  getYAxisExt
+} from '@/views/chart/chart/common/common_antv'
+import { Mix } from '@antv/g2plot'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
+export function baseMixOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  const xAxis = getXAxis(chart)
+  const yAxis = getYAxis(chart)
+  const yAxisExt = getYAxisExt(chart)
+  // data
+  const data = chart.data.datas
+  const plots = []
+  // color
+  let customAttr = {}
+  const colors = []
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // color
+    if (customAttr.color) {
+      const c = JSON.parse(JSON.stringify(customAttr.color))
+      c.colors.forEach(ele => {
+        colors.push(hexColorToRGBA(ele, c.alpha))
+      })
+    }
+  }
+  for (let i = 0; i < data.length; i++) {
+    const d = data[i]
+    const o = {
+      type: '',
+      options: {
+        color: colors[i % 9],
+        data: d.data,
+        xField: 'field',
+        yField: 'value',
+        // seriesField: 'category',
+        label: label,
+        tooltip: tooltip,
+        legend: legend,
+        xAxis: i > 0 ? false : xAxis,
+        yAxis: (i >= JSON.parse(chart.yaxis).length) ? yAxisExt : yAxis,
+        interactions: [
+          {
+            type: 'element-active', cfg: {
+              start: [{
+                trigger: 'element:mouseenter',
+                action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer']
+              }],
+              end: [{
+                trigger: 'element:mouseleave',
+                action: ['element-highlight:reset', 'element-active:reset', 'cursor:default']
+              }]
+            }
+          },
+          {
+            type: 'legend-active', cfg: {
+              start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+              end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+            }
+          },
+          {
+            type: 'legend-filter', cfg: {
+              start: [{
+                trigger: 'legend-item:click',
+                action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset']
+              }]
+            }
+          },
+          {
+            type: 'tooltip', cfg: {
+              start: [{ trigger: 'point:mousemove', action: 'tooltip:show' }],
+              end: [{ trigger: 'point:mouseleave', action: 'tooltip:hide' }]
+            }
+          },
+          {
+            type: 'active-region', cfg: {
+              start: [{ trigger: 'element:mousemove', action: 'active-region:show' }],
+              end: [{ trigger: 'element:mouseleave', action: 'active-region:hide' }]
+            }
+          }
+        ]
+      }
+    }
+    transChart(chart, d, o)
+    plots.push(o)
+  }
+
+  // options
+  const options = {
+    theme: theme,
+    appendPadding: getPadding(chart),
+    syncViewPadding: true,
+    plots: plots,
+    legend: legend
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Mix(container, options)
+
+  plot.off('point:click')
+  plot.on('point:click', action)
+  plot.off('interval:click')
+  plot.on('interval:click', action)
+
+  return plot
+}
+
+function transChart(chart, d, o) {
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      if (d.type === 'bar') { // bar
+        o.type = 'column'
+        if (s.barDefault) {
+          delete o.options.marginRatio
+        } else {
+          o.options.marginRatio = s.barGap
+        }
+      } else if (d.type === 'line') { // line
+        o.type = 'line'
+        o.options.smooth = s.lineSmooth
+        o.options.point = {
+          size: parseInt(s.lineSymbolSize),
+          shape: s.lineSymbol
+        }
+        o.options.lineStyle = {
+          lineWidth: parseInt(s.lineWidth)
+        }
+      } else if (d.type === 'scatter') { // scatter
+        o.type = 'scatter'
+        o.options.size = parseInt(s.scatterSymbolSize)
+        o.options.shape = s.scatterSymbol
+      }
+    }
+  }
+}
diff --git a/frontend/src/views/chart/chart/pie/pie_antv.js b/frontend/src/views/chart/chart/pie/pie_antv.js
new file mode 100644
index 0000000000..a97b6aa2b5
--- /dev/null
+++ b/frontend/src/views/chart/chart/pie/pie_antv.js
@@ -0,0 +1,157 @@
+import {
+  getLabel,
+  getLegend,
+  getPadding,
+  getTheme,
+  getTooltip
+} from '@/views/chart/chart/common/common_antv'
+
+import { Pie, Rose } from '@antv/g2plot'
+
+export function basePieOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    theme: theme,
+    data: data,
+    angleField: 'value',
+    colorField: 'field',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    pieStyle: {
+      lineWidth: 0
+    },
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
+        }
+      },
+      {
+        type: 'active-region', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      options.radius = parseFloat(parseInt(s.pieOuterRadius) / 100)
+      options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
+    }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Pie(container, options)
+
+  plot.off('interval:click')
+  plot.on('interval:click', action)
+
+  return plot
+}
+
+export function basePieRoseOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    theme: theme,
+    data: data,
+    xField: 'field',
+    yField: 'value',
+    seriesField: 'field',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      options.radius = parseFloat(parseInt(s.pieOuterRadius) / 100)
+      options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
+    }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Rose(container, options)
+
+  plot.off('interval:click')
+  plot.on('interval:click', action)
+
+  return plot
+}
diff --git a/frontend/src/views/chart/chart/radar/radar_antv.js b/frontend/src/views/chart/chart/radar/radar_antv.js
new file mode 100644
index 0000000000..f0c06781fa
--- /dev/null
+++ b/frontend/src/views/chart/chart/radar/radar_antv.js
@@ -0,0 +1,145 @@
+import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
+import { Radar } from '@antv/g2plot'
+
+export function baseRadarOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  // data
+  const data = chart.data.datas
+  const xAxis = {
+    tickLine: null,
+    line: null
+  }
+  const yAxis = {
+    tickLine: null,
+    line: null,
+    label: null
+  }
+  // options
+  const options = {
+    theme: theme,
+    data: data,
+    xField: 'field',
+    yField: 'value',
+    seriesField: 'category',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    point: {
+      size: 4,
+      shape: 'circle',
+      style: {
+        fill: null
+      }
+    },
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'point:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'point:mouseleave', action: 'tooltip:hide' }]
+        }
+      },
+      {
+        type: 'active-region', cfg: {
+          start: [{ trigger: 'point:mousemove', action: 'active-region:show' }],
+          end: [{ trigger: 'point:mouseleave', action: 'active-region:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      options.radius = parseFloat(parseInt(s.radarSize) / 100)
+      if (s.radarShape === 'polygon') {
+        yAxis.grid = {
+          line: {
+            type: 'line'
+          }
+        }
+      } else {
+        yAxis.grid && yAxis.grid.line && delete yAxis.grid.line.type
+      }
+    }
+  }
+  // axis
+  let customStyle = {}
+  if (chart.customStyle) {
+    customStyle = JSON.parse(chart.customStyle)
+    if (customStyle.split) {
+      const s = JSON.parse(JSON.stringify(customStyle.split))
+      if (s.name.show) {
+        xAxis.label = {
+          style: {
+            fill: s.name.color,
+            fontSize: parseInt(s.name.fontSize)
+          }
+        }
+      } else {
+        xAxis.label = null
+      }
+
+      xAxis.grid = {
+        line: {
+          style: {
+            stroke: s.axisLine.lineStyle.color
+          }
+        }
+      }
+
+      if (yAxis.grid && yAxis.grid.line) {
+        yAxis.grid.line.style = {
+          stroke: s.axisLine.lineStyle.color
+        }
+      } else {
+        yAxis.grid = {
+          line: {
+            style: {
+              stroke: s.axisLine.lineStyle.color
+            }
+          }
+        }
+      }
+    }
+  }
+  options.xAxis = xAxis
+  options.yAxis = yAxis
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Radar(container, options)
+
+  plot.off('point:click')
+  plot.on('point:click', action)
+
+  return plot
+}
+
diff --git a/frontend/src/views/chart/chart/scatter/scatter_antv.js b/frontend/src/views/chart/chart/scatter/scatter_antv.js
new file mode 100644
index 0000000000..70592c85dd
--- /dev/null
+++ b/frontend/src/views/chart/chart/scatter/scatter_antv.js
@@ -0,0 +1,85 @@
+import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
+
+import { Scatter } from '@antv/g2plot'
+
+export function baseScatterOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  const xAxis = getXAxis(chart)
+  const yAxis = getYAxis(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    theme: theme,
+    data: data,
+    xField: 'field',
+    yField: 'value',
+    colorField: 'category',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    pieStyle: {
+      lineWidth: 0
+    },
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'point:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'point:mouseleave', action: 'tooltip:hide' }]
+        }
+      }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      if (JSON.parse(chart.extBubble).length > 0) {
+        options.size = [5, 30]
+        options.sizeField = 'popSize'
+      } else {
+        options.size = parseInt(s.scatterSymbolSize)
+      }
+      options.shape = s.scatterSymbol
+    }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Scatter(container, options)
+
+  plot.off('point:click')
+  plot.on('point:click', action)
+
+  return plot
+}
diff --git a/frontend/src/views/chart/chart/treemap/treemap_antv.js b/frontend/src/views/chart/chart/treemap/treemap_antv.js
new file mode 100644
index 0000000000..604671a9b9
--- /dev/null
+++ b/frontend/src/views/chart/chart/treemap/treemap_antv.js
@@ -0,0 +1,77 @@
+import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
+import { Treemap } from '@antv/g2plot'
+
+export function baseTreemapOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  // data
+  const data = chart.data.datas
+  // options
+  const options = {
+    theme: theme,
+    data: {
+      name: 'root',
+      children: data
+    },
+    colorField: 'name',
+    appendPadding: getPadding(chart),
+    label: label,
+    tooltip: tooltip,
+    legend: legend,
+    interactions: [
+      {
+        type: 'element-active', cfg: {
+          start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
+          end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
+        }
+      },
+      {
+        type: 'legend-active', cfg: {
+          start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
+          end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
+        }
+      },
+      {
+        type: 'legend-filter', cfg: {
+          start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
+        }
+      },
+      {
+        type: 'tooltip', cfg: {
+          start: [{ trigger: 'element:mousemove', action: 'tooltip:show' }],
+          end: [{ trigger: 'element:mouseleave', action: 'tooltip:hide' }]
+        }
+      }
+      // {
+      //   type: 'active-region', cfg: {
+      //     start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
+      //     end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
+      //   }
+      // }
+    ]
+  }
+  // size
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+    }
+  }
+
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Treemap(container, options)
+
+  plot.off('polygon:click')
+  plot.on('polygon:click', action)
+
+  return plot
+}
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 089b33a618..e56db9c78a 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -1,7 +1,10 @@
 <template>
-  <div style="display: flex;">
+  <div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
     <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
+    <span v-if="chart.type && antVRenderStatus" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
+      <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
+    </span>
+    <div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
   </div>
 </template>
 
@@ -10,6 +13,16 @@ import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
 // import eventBus from '@/components/canvas/utils/eventBus'
 import { uuid } from 'vue-uuid'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { baseBarOptionAntV, hBaseBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
+import { baseAreaOptionAntV, baseLineOptionAntV } from '@/views/chart/chart/line/line_antv'
+import { basePieOptionAntV, basePieRoseOptionAntV } from '@/views/chart/chart/pie/pie_antv'
+import { baseScatterOptionAntV } from '@/views/chart/chart/scatter/scatter_antv'
+import { baseGaugeOptionAntV } from '@/views/chart/chart/gauge/gauge_antv'
+import { baseFunnelOptionAntV } from '@/views/chart/chart/funnel/funnel_antv'
+import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
+import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
+import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 
 export default {
   name: 'ChartComponentG2',
@@ -45,21 +58,42 @@ export default {
         top: '0px'
       },
       pointParam: null,
-
       dynamicAreaCode: null,
-      borderRadius: '0px'
+      borderRadius: '0px',
+      chartHeight: '100%',
+      title_class: {
+        margin: '0 0',
+        width: '100%',
+        fontSize: '18px',
+        color: '#303133',
+        textAlign: 'left',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      title_show: true,
+      antVRenderStatus: false
     }
   },
 
   computed: {
     trackBarStyleTime() {
       return this.trackBarStyle
+    },
+    bg_class() {
+      return {
+        borderRadius: this.borderRadius
+      }
     }
   },
   watch: {
     chart: {
       handler(newVal, oldVla) {
-        this.preDraw()
+        this.initTitle()
+        this.calcHeightDelay()
+        new Promise((resolve) => { resolve() }).then(() => {
+          this.drawView()
+        })
       },
       deep: true
     },
@@ -72,40 +106,98 @@ export default {
   },
   methods: {
     preDraw() {
-      // 基于准备好的dom，初始化echarts实例
-      // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
+      this.initTitle()
+      this.calcHeightDelay()
       new Promise((resolve) => { resolve() }).then(() => {
-        //	此dom为echarts图标展示dom
-        // this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
-        // if (!this.myChart) {
-        //   this.myChart = this.$echarts.init(document.getElementById(this.chartId))
-        // }
-        this.drawEcharts()
-
-        // this.myChart.off('click')
-        // this.myChart.on('click', function(param) {
-        //   that.pointParam = param
-        //   if (that.trackMenu.length < 2) { // 只有一个事件直接调用
-        //     that.trackClick(that.trackMenu[0])
-        //   } else { // 视图关联多个事件
-        //     that.trackBarStyle.left = param.event.offsetX + 'px'
-        //     that.trackBarStyle.top = (param.event.offsetY - 15) + 'px'
-        //     that.$refs.viewTrack.trackButtonClick()
-        //   }
-        // })
+        this.drawView()
       })
+      const that = this
+      window.onresize = function() {
+        that.calcHeightDelay()
+      }
     },
-    drawEcharts() {
+    drawView() {
       const chart = this.chart
       // type
-      if (chart.type === 'liquid') {
-        this.myChart = baseLiquid(this.myChart, this.chartId, chart)
+      // if (chart.data) {
+      this.antVRenderStatus = true
+      if (!chart.data || (!chart.data.datas && !chart.data.series)) {
+        chart.data = {
+          datas: [{}],
+          series: [
+            {
+              data: [0]
+            }
+          ]
+        }
       }
+      if (chart.type === 'bar') {
+        this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
+      } else if (chart.type === 'bar-stack') {
+        this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
+      } else if (chart.type === 'bar-horizontal') {
+        this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
+      } else if (chart.type === 'bar-stack-horizontal') {
+        this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
+      } else if (chart.type === 'line') {
+        this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'line-stack') {
+        this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'scatter') {
+        this.myChart = baseScatterOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'chart-mix') {
+        this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'radar') {
+        this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'gauge') {
+        this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'pie') {
+        this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'pie-rose') {
+        this.myChart = basePieRoseOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'funnel') {
+        this.myChart = baseFunnelOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'treemap') {
+        this.myChart = baseTreemapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'liquid') {
+        this.myChart = baseLiquid(this.myChart, this.chartId, chart)
+      } else {
+        if (this.myChart) {
+          this.antVRenderStatus = false
+          this.myChart.destroy()
+        }
+      }
+
+      if (this.antVRenderStatus) {
+        this.myChart.render()
+      }
+      // } else {
+      //   if (this.myChart) {
+      //     this.antVRenderStatus = false
+      //     this.myChart.destroy()
+      //   }
+      // }
 
       this.setBackGroundBorder()
       // console.log(JSON.stringify(chart_option))
     },
 
+    antVAction(param) {
+      console.log(param)
+      if (this.chart.type === 'treemap') {
+        this.pointParam = param.data.data
+      } else {
+        this.pointParam = param.data
+      }
+      if (this.trackMenu.length < 2) { // 只有一个事件直接调用
+        this.trackClick(this.trackMenu[0])
+      } else { // 视图关联多个事件
+        this.trackBarStyle.left = param.clientX + 'px'
+        this.trackBarStyle.top = (param.clientY - 15) + 'px'
+        this.$refs.viewTrack.trackButtonClick()
+      }
+    },
+
     // myEcharts(option) {
     //   // 指定图表的配置项和数据
     //   const chart = this.myChart
@@ -124,9 +216,7 @@ export default {
       }
     },
     chartResize() {
-      // 指定图表的配置项和数据
-      // const chart = this.myChart
-      // chart.resize()
+      this.calcHeightDelay()
     },
     trackClick(trackAction) {
       const param = this.pointParam
@@ -152,11 +242,46 @@ export default {
         default:
           break
       }
+    },
+
+    initTitle() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.text) {
+          this.title_show = customStyle.text.show
+          this.title_class.fontSize = customStyle.text.fontSize + 'px'
+          this.title_class.color = customStyle.text.color
+          this.title_class.textAlign = customStyle.text.hPosition
+          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
+          this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+        }
+        if (customStyle.background) {
+          this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+        }
+      }
+    },
+
+    calcHeightRightNow() {
+      this.$nextTick(() => {
+        if (this.$refs.chartContainer) {
+          const currentHeight = this.$refs.chartContainer.offsetHeight
+          if (this.$refs.title) {
+            const titleHeight = this.$refs.title.offsetHeight
+            this.chartHeight = (currentHeight - titleHeight) + 'px'
+          }
+        }
+      })
+    },
+    calcHeightDelay() {
+      setTimeout(() => {
+        this.calcHeightRightNow()
+      }, 100)
     }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
 </style>
diff --git a/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
new file mode 100644
index 0000000000..982ba8f15c
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
@@ -0,0 +1,162 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="legendForm.show">
+          <el-form-item :label="$t('chart.icon')" class="form-item">
+            <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
+              <el-option
+                v-for="item in iconSymbolOptions"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.orient')" class="form-item">
+            <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
+              <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
+              <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button :disabled="legendForm.vPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_v_position')" class="form-item">
+            <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
+              <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+              <el-radio-button :disabled="legendForm.hPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'LegendSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE)),
+      fontSize: [],
+      iconSymbolOptions: [
+        { name: this.$t('chart.line_symbol_circle'), value: 'circle' },
+        { name: this.$t('chart.line_symbol_rect'), value: 'square' },
+        { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
+        { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
+      ],
+      isSetting: false
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.legend) {
+          this.legendForm = customStyle.legend
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 10; i <= 60; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeLegendStyle() {
+      if (!this.legendForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onLegendChange', this.legendForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
new file mode 100644
index 0000000000..5378642eee
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
@@ -0,0 +1,155 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.name')" class="form-item">
+          <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.color')" class="form-item">
+          <el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
+          <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <!--        <el-form-item :label="$t('chart.axis_line')" class="form-item">-->
+        <!--          <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+        <!--        </el-form-item>-->
+        <el-form-item :label="$t('chart.axis_color')" class="form-item">
+          <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
+        </el-form-item>
+        <!--        <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
+        <!--          <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
+        <!--          <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" @change="changeSplitStyle" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">-->
+        <!--          <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">-->
+        <!--            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
+        <!--          </el-select>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('chart.split_line')" class="form-item">-->
+        <!--          <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('chart.split_color')" class="form-item">-->
+        <!--          <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('chart.shadow')" class="form-item">-->
+        <!--          <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
+        <!--        </el-form-item>-->
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_SPLIT } from '../../chart/chart'
+
+export default {
+  name: 'SplitSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
+      isSetting: false,
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.split) {
+          this.splitForm = customStyle.split
+        } else {
+          this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeSplitStyle() {
+      if (!this.splitForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onChangeSplitForm', this.splitForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
new file mode 100644
index 0000000000..10e6ef36f6
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -0,0 +1,156 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="titleForm.show">
+          <el-form-item :label="$t('chart.title')" class="form-item">
+            <el-input
+              v-model="titleForm.title"
+              size="mini"
+              :placeholder="$t('chart.title')"
+              clearable
+              @blur="changeTitleStyle"
+              @input="inputOnInput($event)"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
+          </el-form-item>
+          <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
+            <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_style')" class="form-item">
+            <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'TitleSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
+      fontSize: [],
+      isSetting: false
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.text) {
+          this.titleForm = customStyle.text
+        }
+        this.titleForm.title = this.chart.title
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 10; i <= 60; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeTitleStyle() {
+      if (this.titleForm.title.length < 1) {
+        this.$error(this.$t('chart.title_cannot_empty'))
+        this.titleForm.title = this.chart.title
+        return
+      }
+      if (!this.titleForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onTextChange', this.titleForm)
+    },
+    inputOnInput: function(e) {
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
new file mode 100644
index 0000000000..394dc3fdbc
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
@@ -0,0 +1,206 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="axisForm.show">
+          <el-form-item :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
+              <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+              <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <span v-show="chart.type && chart.type.includes('horizontal')">
+            <el-divider />
+            <el-form-item class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.axis_value') }}</span>
+                  <el-tooltip class="item" effect="dark" placement="bottom">
+                    <div slot="content">
+                      最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
+                      <br>
+                      请确保填写数值能正确计算，否则将无法正常显示轴值。
+                    </div>
+                    <i class="el-icon-info" style="cursor: pointer;" />
+                  </el-tooltip>
+                </span>
+              </span>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="!axisForm.axisValue.auto">
+              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
+                <el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
+                <el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
+                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle" />
+              </el-form-item>
+            </span>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.splitLine.show">
+            <el-form-item :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
+            </el-form-item>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.axisLabel.show">
+            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+          </span>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'XAxisSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
+      isSetting: false,
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.xAxis) {
+          this.axisForm = customStyle.xAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
+          }
+          if (!this.axisForm.axisValue) {
+            this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeXAxisStyle() {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onChangeXAxisForm', this.axisForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
new file mode 100644
index 0000000000..5fa2d342f9
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
@@ -0,0 +1,209 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="axisForm.show">
+          <el-form-item :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <span v-show="chart.type && !chart.type.includes('horizontal')">
+            <el-divider />
+            <el-form-item class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.axis_value') }}</span>
+                  <el-tooltip class="item" effect="dark" placement="bottom">
+                    <div slot="content">
+                      最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
+                      <br>
+                      请确保填写数值能正确计算，否则将无法正常显示轴值。
+                    </div>
+                    <i class="el-icon-info" style="cursor: pointer;" />
+                  </el-tooltip>
+                </span>
+              </span>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="!axisForm.axisValue.auto">
+              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
+                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
+                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
+                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
+              </el-form-item>
+            </span>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.splitLine.show">
+            <el-form-item :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+            </el-form-item>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.axisLabel.show">
+            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+          </span>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_YAXIS_EXT_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'YAxisExtSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
+      isSetting: false,
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        // if (!chart.customStyle.yAxisExt) {
+        //   chart.customStyle.yAxisExt = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE))
+        // }
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.yAxisExt) {
+          this.axisForm = customStyle.yAxisExt
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.nameTextStyle))
+          }
+          if (!this.axisForm.axisValue) {
+            this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeYAxisStyle() {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onChangeYAxisForm', this.axisForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
new file mode 100644
index 0000000000..dfc2e5c914
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
@@ -0,0 +1,217 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="axisForm.show">
+          <el-form-item :label="$t('chart.position')" class="form-item">
+            <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+              <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+              <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.name')" class="form-item">
+            <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_color')" class="form-item">
+            <el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
+            <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <span v-show="chart.type && !chart.type.includes('horizontal')">
+            <el-divider />
+            <el-form-item class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.axis_value') }}</span>
+                  <el-tooltip class="item" effect="dark" placement="bottom">
+                    <div slot="content">
+                      最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。
+                      <br>
+                      请确保填写数值能正确计算，否则将无法正常显示轴值。
+                    </div>
+                    <i class="el-icon-info" style="cursor: pointer;" />
+                  </el-tooltip>
+                </span>
+              </span>
+              <el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="!axisForm.axisValue.auto">
+              <el-form-item :label="$t('chart.axis_value_min')" class="form-item">
+                <el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_value_max')" class="form-item">
+                <el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item class="form-item">
+                <span slot="label">
+                  <span class="span-box">
+                    <span>{{ $t('chart.axis_value_split_count') }}</span>
+                    <el-tooltip class="item" effect="dark" placement="bottom">
+                      <div slot="content">
+                        期望的坐标轴刻度数量，非最终结果。
+                      </div>
+                      <i class="el-icon-info" style="cursor: pointer;" />
+                    </el-tooltip>
+                  </span>
+                </span>
+                <el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
+              </el-form-item>
+            </span>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_show')" class="form-item">
+            <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.splitLine.show">
+            <el-form-item :label="$t('chart.axis_color')" class="form-item">
+              <el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+            </el-form-item>
+          </span>
+          <el-divider />
+          <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+            <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+          </el-form-item>
+          <span v-show="axisForm.axisLabel.show">
+            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+              <el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
+              <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
+              <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+          </span>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'YAxisSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
+      isSetting: false,
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.yAxis) {
+          this.axisForm = customStyle.yAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
+          }
+          if (!this.axisForm.axisValue) {
+            this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeYAxisStyle() {
+      if (!this.axisForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onChangeYAxisForm', this.axisForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
new file mode 100644
index 0000000000..476c98d9b4
--- /dev/null
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
@@ -0,0 +1,180 @@
+<template>
+  <div style="width: 100%;">
+    <el-col>
+      <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="labelForm.show">
+          <!--          <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">-->
+          <!--            <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
+          <!--          </el-form-item>-->
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+          </el-form-item>
+          <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
+            <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
+              <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+          <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.text_color')" class="form-item">
+          <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_LABEL } from '../../chart/chart'
+
+export default {
+  name: 'LabelSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
+      fontSize: [],
+      isSetting: false,
+      labelPosition: [
+        { name: this.$t('chart.inside'), value: 'middle' },
+        { name: this.$t('chart.outside'), value: 'outside' },
+        { name: this.$t('chart.center'), value: 'center' },
+        { name: this.$t('chart.text_pos_top'), value: 'top' },
+        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
+        { name: this.$t('chart.text_pos_left'), value: 'left' },
+        { name: this.$t('chart.text_pos_right'), value: 'right' }
+      ]
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initLabelPosition()
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initLabelPosition()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.label) {
+          this.labelForm = customAttr.label
+          if (!this.labelForm.labelLine) {
+            this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
+          }
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 10; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeLabelAttr() {
+      if (!this.labelForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onLabelChange', this.labelForm)
+    },
+    initLabelPosition() {
+      if (this.chart && this.chart.type && this.chart.type.includes('pie')) {
+        this.labelPosition = [
+          { name: this.$t('chart.inside'), value: 'inner' },
+          { name: this.$t('chart.outside'), value: 'outer' }
+        ]
+      } else {
+        this.labelPosition = [
+          { name: this.$t('chart.inside'), value: 'middle' },
+          { name: this.$t('chart.outside'), value: 'outside' },
+          { name: this.$t('chart.center'), value: 'center' },
+          { name: this.$t('chart.text_pos_top'), value: 'top' },
+          { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
+          { name: this.$t('chart.text_pos_left'), value: 'left' },
+          { name: this.$t('chart.text_pos_right'), value: 'right' }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .shape-item{
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+  .switch-style{
+    position: absolute;
+    right: 10px;
+    margin-top: -4px;
+  }
+  .color-picker-style{
+    cursor: pointer;
+    z-index: 1003;
+  }
+</style>
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index fc6666657d..1753d0dc06 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -39,9 +39,9 @@
         <el-form-item :label="$t('chart.line_smooth')" class="form-item">
           <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
         </el-form-item>
-        <el-form-item :label="$t('chart.line_area')" class="form-item">
-          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-        </el-form-item>
+        <!--        <el-form-item :label="$t('chart.line_area')" class="form-item">-->
+        <!--          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
+        <!--        </el-form-item>-->
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
new file mode 100644
index 0000000000..047bd8918c
--- /dev/null
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -0,0 +1,375 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.adapt')" class="form-item">
+          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
+        </el-form-item>
+        <!--        <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">-->
+        <!--          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />-->
+        <!--        </el-form-item>-->
+        <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
+        </el-form-item>
+        <!--        <el-form-item :label="$t('chart.line_type')" class="form-item">-->
+        <!--          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
+        <!--            <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
+        <!--            <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
+        <!--          </el-radio-group>-->
+        <!--        </el-form-item>-->
+        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
+          <el-select v-model="sizeForm.lineSymbol" :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.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_smooth')" class="form-item">
+          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
+        </el-form-item>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+
+        <!--        <span v-show="chart.type && chart.type.includes('pie-rose')">-->
+        <!--          <el-form-item :label="$t('chart.rose_type')" class="form-item">-->
+        <!--            <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">-->
+        <!--              <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>-->
+        <!--              <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>-->
+        <!--            </el-radio-group>-->
+        <!--          </el-form-item>-->
+        <!--          <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">-->
+        <!--            <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+        <!--          </el-form-item>-->
+        <!--        </span>-->
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <!--        <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">-->
+        <!--          <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+        <!--        </el-form-item>-->
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.shape')" class="form-item">
+          <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
+            <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
+            <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
+          <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
+          <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <!--        <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">-->
+        <!--          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />-->
+        <!--        </el-form-item>-->
+        <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item :label="$t('chart.quota_show')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.dimension_show')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
+            <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.space_split')" class="form-item">
+          <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.bubble_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.bubble_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <!--        <el-form-item :label="$t('chart.width')" class="form-item form-item-slider">-->
+        <!--          <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item :label="$t('chart.height')" class="form-item form-item-slider">-->
+        <!--          <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
+        <!--        </el-form-item>-->
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
+        <el-form-item :label="$t('chart.adapt')" class="form-item">
+          <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
+        <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
+        </el-form-item>
+        <!--        <el-form-item :label="$t('chart.line_type')" class="form-item">-->
+        <!--          <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
+        <!--            <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
+        <!--            <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
+        <!--          </el-radio-group>-->
+        <!--        </el-form-item>-->
+        <el-form-item :label="$t('chart.line_symbol')" class="form-item">
+          <el-select v-model="sizeForm.lineSymbol" :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.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.line_smooth')" class="form-item">
+          <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
+        </el-form-item>
+        <!--        <el-form-item :label="$t('chart.line_area')" class="form-item">-->
+        <!--          <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
+        <!--        </el-form-item>-->
+        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
+        <el-form-item :label="$t('chart.bubble_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.bubble_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+
+      <el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.liquid_shape')" class="form-item">
+          <el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
+            <el-option
+              v-for="item in liquidShapeOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase" />
+        </el-form-item>
+        <el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
+          <el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_SIZE } from '../../chart/chart'
+export default {
+  name: 'SizeSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      sizeForm: JSON.parse(JSON.stringify(DEFAULT_SIZE)),
+      lineSymbolOptions: [
+        // { name: this.$t('chart.line_symbol_none'), value: 'none' },
+        { name: this.$t('chart.line_symbol_circle'), value: 'circle' },
+        { name: this.$t('chart.line_symbol_rect'), value: 'square' },
+        { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
+        { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
+      ],
+      liquidShapeOptions: [
+        { name: this.$t('chart.liquid_shape_circle'), value: 'circle' },
+        { name: this.$t('chart.liquid_shape_diamond'), value: 'diamond' },
+        { name: this.$t('chart.liquid_shape_triangle'), value: 'triangle' },
+        { name: this.$t('chart.liquid_shape_pin'), value: 'pin' },
+        { name: this.$t('chart.liquid_shape_rect'), value: 'rect' }
+      ],
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.size) {
+          this.sizeForm = customAttr.size
+          this.sizeForm.treemapWidth = this.sizeForm.treemapWidth ? this.sizeForm.treemapWidth : 80
+          this.sizeForm.treemapHeight = this.sizeForm.treemapHeight ? this.sizeForm.treemapHeight : 80
+          this.sizeForm.radarSize = this.sizeForm.radarSize ? this.sizeForm.radarSize : 80
+
+          this.sizeForm.liquidShape = this.sizeForm.liquidShape ? this.sizeForm.liquidShape : DEFAULT_SIZE.liquidShape
+          this.sizeForm.liquidMax = this.sizeForm.liquidMax ? this.sizeForm.liquidMax : DEFAULT_SIZE.liquidMax
+          this.sizeForm.liquidSize = this.sizeForm.liquidSize ? this.sizeForm.liquidSize : DEFAULT_SIZE.liquidSize
+          this.sizeForm.liquidOutlineBorder = this.sizeForm.liquidOutlineBorder ? this.sizeForm.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder
+          this.sizeForm.liquidOutlineDistance = (this.sizeForm.liquidOutlineDistance || this.sizeForm.liquidOutlineDistance === 0) ? this.sizeForm.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance
+          this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
+          this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 10; i <= 60; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeBarSizeCase() {
+      this.$emit('onSizeChange', this.sizeForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{font-size: 12px}
+
+.el-form-item{
+  margin-bottom: 6px;
+}
+.el-divider--horizontal {
+  margin: 10px 0
+}
+.divider-style>>>.el-divider__text{
+  color: #606266;
+  font-size: 12px;
+  font-weight: 400;
+  padding: 0 10px;
+}
+</style>
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
new file mode 100644
index 0000000000..e7efc00d5e
--- /dev/null
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelectorAntV.vue
@@ -0,0 +1,126 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
+        <el-form-item :label="$t('chart.show')" class="form-item">
+          <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="tooltipForm.show">
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.text_color')" class="form-item">
+            <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_TOOLTIP } from '../../chart/chart'
+
+export default {
+  name: 'TooltipSelectorAntV',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
+      fontSize: [],
+      isSetting: false
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.tooltip) {
+          this.tooltipForm = customAttr.tooltip
+        }
+      }
+    },
+    init() {
+      const arr = []
+      for (let i = 10; i <= 20; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeTooltipAttr() {
+      if (!this.tooltipForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onTooltipChange', this.tooltipForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index d8c7cf620a..fca04a6c3e 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -729,6 +729,7 @@ export default {
       view.sceneId = this.currGroup.id
       view.tableId = this.table.id
       view.type = 'bar'
+      view.render = 'antv'
       view.customAttr = JSON.stringify({
         color: DEFAULT_COLOR_CASE,
         tableColor: DEFAULT_COLOR_CASE,
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1f74048d75..ec115af41d 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -94,128 +94,29 @@
             <el-col
               style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
             >
-
-              <div style="height: 25vh;overflow:auto" class="padding-lr theme-border-class">
-                <span class="title-text">{{ $t('chart.chart_type') }}</span>
+              <div style="height: 25vh;overflow:auto" class="padding-lr">
+                <span>
+                  <span class="theme-border-class">{{ $t('chart.chart_type') }}</span>
+                  <span style="float: right;">
+                    <el-select v-model="view.render" class="render-select" style="width: 50px" size="mini" @change="save(true,'chart',true,true)">
+                      <el-option
+                        v-for="item in renderOptions"
+                        :key="item.value"
+                        :value="item.value"
+                        :label="item.name"
+                      />
+                    </el-select>
+                  </span>
+                </span>
                 <el-row>
-                  <div class="chart-type">
+                  <div>
                     <el-radio-group
                       v-model="view.type"
                       style="width: 100%"
                       :disabled="!hasDataPermission('manage',param.privileges)"
                       @change="save(true,'chart',true,true)"
                     >
-                      <div class="chart-radio-div" style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
-                        <el-radio value="table-normal" label="table-normal">
-                          <span :title="$t('chart.chart_table_normal')">
-                            <svg-icon icon-class="table-normal" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="table-info" label="table-info">
-                          <span :title="$t('chart.chart_table_info')">
-                            <svg-icon icon-class="table-info" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="text" label="text">
-                          <span :title="$t('chart.chart_card')">
-                            <svg-icon icon-class="text" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="bar" label="bar">
-                          <span :title="$t('chart.chart_bar')">
-                            <svg-icon icon-class="bar" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="bar-stack" label="bar-stack">
-                          <span :title="$t('chart.chart_bar_stack')">
-                            <svg-icon icon-class="bar-stack" 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="bar-horizontal" label="bar-horizontal">
-                          <span :title="$t('chart.chart_bar_horizontal')">
-                            <svg-icon icon-class="bar-horizontal" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
-                          <span :title="$t('chart.chart_bar_stack_horizontal')">
-                            <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="line" label="line">
-                          <span :title="$t('chart.chart_line')">
-                            <svg-icon icon-class="line" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="line-stack" label="line-stack">
-                          <span :title="$t('chart.chart_line_stack')">
-                            <svg-icon icon-class="line-stack" 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="chart-mix" label="chart-mix">
-                          <span :title="$t('chart.chart_mix')">
-                            <svg-icon icon-class="chart-mix" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="map" label="map">
-                          <span :title="$t('chart.chart_map')">
-                            <svg-icon icon-class="map" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="radar" label="radar">
-                          <span :title="$t('chart.chart_radar')">
-                            <svg-icon icon-class="radar" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="liquid" label="liquid">
-                          <span :title="$t('chart.chart_liquid')">
-                            <svg-icon icon-class="liquid" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="gauge" label="gauge">
-                          <span :title="$t('chart.chart_gauge')">
-                            <svg-icon icon-class="gauge" 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="pie" label="pie">
-                          <span :title="$t('chart.chart_pie')">
-                            <svg-icon icon-class="pie" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="pie-rose" label="pie-rose">
-                          <span :title="$t('chart.chart_pie_rose')">
-                            <svg-icon icon-class="pie-rose" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="funnel" label="funnel">
-                          <span :title="$t('chart.chart_funnel')">
-                            <svg-icon icon-class="funnel" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="treemap" label="treemap">
-                          <span :title="$t('chart.chart_treemap')">
-                            <svg-icon icon-class="treemap" class="chart-icon" />
-                          </span>
-                        </el-radio>
-                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></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>-->
+                      <chart-type :chart="view" />
                     </el-radio-group>
                   </div>
                 </el-row>
@@ -224,12 +125,12 @@
                     <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge') || chart.type.includes('treemap'))">
                       Tips: {{ $t('chart.only_one_quota') }}
                     </span>
-                  <!--              <span v-show="chart.type && (chart.type.includes('text'))">-->
-                  <!--                Tips: {{ $t('chart.only_one_result') }}-->
-                  <!--              </span>-->
-                  <!--              <span v-show="chart.type && chart.type.includes('gauge')">-->
-                  <!--                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
-                  <!--              </span>-->
+                    <!--              <span v-show="chart.type && (chart.type.includes('text'))">-->
+                    <!--                Tips: {{ $t('chart.only_one_result') }}-->
+                    <!--              </span>-->
+                    <!--              <span v-show="chart.type && chart.type.includes('gauge')">-->
+                    <!--                Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}-->
+                    <!--              </span>-->
                   </span>
                 </el-row>
               </div>
@@ -418,7 +319,7 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
-                  <el-row v-if="view.type && view.type !== 'treemap' && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('radar') && !view.type.includes('gauge') && view.type !== 'liquid'" class="padding-lr" style="margin-top: 6px;">
+                  <el-row v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid'" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span>{{ $t('chart.drill') }}</span>
                       /
@@ -466,13 +367,16 @@
                     <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
                   </el-collapse-item>
                   <el-collapse-item v-show="chart.type !== 'map'" name="size" :title="$t('chart.size')">
-                    <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+                    <size-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+                    <size-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
                   </el-collapse-item>
                   <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="label" :title="$t('chart.label')">
-                    <label-selector :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+                    <label-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+                    <label-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid'" name="tooltip" :title="$t('chart.tooltip')">
-                    <tooltip-selector :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+                  <el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge'" name="tooltip" :title="$t('chart.tooltip')">
+                    <tooltip-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+                    <tooltip-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
                   </el-collapse-item>
                 </el-collapse>
               </el-row>
@@ -480,22 +384,28 @@
                 <span class="padding-lr">{{ $t('chart.module_style') }}</span>
                 <el-collapse v-model="styleActiveNames" class="style-collapse">
                   <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')" name="xAxis" :title="$t('chart.xAxis')">
-                    <x-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+                    <x-axis-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+                    <x-axis-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
                   </el-collapse-item>
                   <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')" name="yAxis" :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')">
-                    <y-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+                    <y-axis-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+                    <y-axis-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
                   </el-collapse-item>
                   <el-collapse-item v-show="view.type && view.type === 'chart-mix'" name="yAxisExt" :title="$t('chart.yAxis_ext')">
-                    <y-axis-ext-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisExtForm" />
+                    <y-axis-ext-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisExtForm" />
+                    <y-axis-ext-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisExtForm" />
                   </el-collapse-item>
                   <el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
-                    <split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
+                    <split-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
+                    <split-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
                   </el-collapse-item>
                   <el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
-                    <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+                    <title-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+                    <title-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && chart.type !== 'treemap' && view.type !== 'liquid'" name="legend" :title="$t('chart.legend')">
-                    <legend-selector :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+                  <el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid'" name="legend" :title="$t('chart.legend')">
+                    <legend-selector v-if="view.render && view.render === 'echarts'" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+                    <legend-selector-ant-v v-else-if="view.render && view.render === 'antv'" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
                   </el-collapse-item>
                   <el-collapse-item name="background" :title="$t('chart.background')">
                     <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
@@ -511,7 +421,7 @@
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
             <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
-            <chart-component-g2 v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'g2'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" />
+            <chart-component-g2 v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
             <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
             <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
             <div v-if="!httpRequest.status" class="chart-error-class">
@@ -522,7 +432,7 @@
               </div>
             </div>
           </div>
-          <div style="position: absolute;left: 20px;bottom:14px;">
+          <div style="position: absolute;left: 20px;bottom:10px;">
             <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
           </div>
         </el-row>
@@ -672,9 +582,29 @@ import { areaMapping } from '@/api/map/map'
 import QuotaExtItem from '@/views/chart/components/drag-item/QuotaExtItem'
 import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
+import ChartType from '@/views/chart/view/ChartType'
+import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
+import LabelSelectorAntV from '@/views/chart/components/shape-attr/LabelSelectorAntV'
+import TooltipSelectorAntV from '@/views/chart/components/shape-attr/TooltipSelectorAntV'
+import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
+import XAxisSelectorAntV from '@/views/chart/components/component-style/XAxisSelectorAntV'
+import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV'
+import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
+import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
+import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
 export default {
   name: 'ChartEdit',
   components: {
+    SplitSelectorAntV,
+    SizeSelectorAntV,
+    YAxisExtSelectorAntV,
+    YAxisSelectorAntV,
+    XAxisSelectorAntV,
+    LegendSelectorAntV,
+    TooltipSelectorAntV,
+    LabelSelectorAntV,
+    TitleSelectorAntV,
+    ChartType,
     ChartComponentG2,
     YAxisExtSelector,
     QuotaExtItem,
@@ -744,7 +674,8 @@ export default {
           background: DEFAULT_BACKGROUND_COLOR,
           split: DEFAULT_SPLIT
         },
-        customFilter: []
+        customFilter: [],
+        render: 'antv'
       },
       moveId: -1,
       chart: {
@@ -783,7 +714,12 @@ export default {
       attrActiveNames: [],
       styleActiveNames: [],
       drillClickDimensionList: [],
-      drillFilters: []
+      drillFilters: [],
+      renderOptions: [
+        { name: '新版', value: 'antv' },
+        { name: '旧版', value: 'echarts' }
+      ],
+      drill: false
     }
   },
   computed: {
@@ -965,20 +901,16 @@ export default {
           view.yaxis.splice(1, view.yaxis.length)
         }
       }
-      if (view.type === 'line' && trigger === 'chart') {
-        view.customAttr.size.lineArea = false
-      }
       if (view.type === 'line-stack' && trigger === 'chart') {
         view.customAttr.size.lineArea = true
       }
       if (view.type === 'treemap' && trigger === 'chart') {
         view.customAttr.label.show = true
       }
-      if (view.type === 'treemap' ||
+      if (view.type === 'liquid' ||
         view.type.includes('table') ||
         view.type.includes('text') ||
-        view.type.includes('gauge') ||
-        view.type.includes('radar')) {
+        view.type.includes('gauge')) {
         view.drillFields = []
       }
       view.customFilter.forEach(function(ele) {
@@ -1055,6 +987,7 @@ export default {
 
             this.resetDrill()
           }
+          this.drill = response.data.drill
           this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : []))
         }).catch(err => {
           this.resetView()
@@ -1088,6 +1021,7 @@ export default {
           response.data.data = this.data
           this.chart = response.data
 
+          this.chart.drill = this.drill
           // this.httpRequest.status = true
         }).catch(err => {
           // this.resetView()
@@ -1607,11 +1541,7 @@ export default {
     },
 
     renderComponent() {
-      if (this.chart.type === 'liquid') {
-        return 'g2'
-      } else {
-        return 'echarts'
-      }
+      return this.chart.render
     }
 
   }
@@ -1916,6 +1846,13 @@ export default {
   .drag-placeholder-style-span{
     padding-left: 16px;
   }
+  .render-select>>>.el-input__suffix{
+    width: 20px;
+  }
+  .render-select>>>.el-input__inner{
+    padding-right: 10px;
+    padding-left: 6px;
+  }
 
   .blackTheme .theme-border-class {
     border-color: var(--TableBorderColor) !important;
diff --git a/frontend/src/views/chart/view/ChartType.vue b/frontend/src/views/chart/view/ChartType.vue
new file mode 100644
index 0000000000..5cbe4c62fd
--- /dev/null
+++ b/frontend/src/views/chart/view/ChartType.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="chart-type">
+    <div v-if="chart.render && chart.render === 'antv'">
+      <div class="radio-row">
+        <el-radio value="table-normal" label="table-normal">
+          <span :title="$t('chart.chart_table_normal')">
+            <svg-icon icon-class="table-normal" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="table-info" label="table-info">
+          <span :title="$t('chart.chart_table_info')">
+            <svg-icon icon-class="table-info" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="text" label="text">
+          <span :title="$t('chart.chart_card')">
+            <svg-icon icon-class="text" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="bar" label="bar">
+          <span :title="$t('chart.chart_bar')">
+            <svg-icon icon-class="bar" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="bar-stack" label="bar-stack">
+          <span :title="$t('chart.chart_bar_stack')">
+            <svg-icon icon-class="bar-stack" 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="bar-horizontal" label="bar-horizontal">
+          <span :title="$t('chart.chart_bar_horizontal')">
+            <svg-icon icon-class="bar-horizontal" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
+          <span :title="$t('chart.chart_bar_stack_horizontal')">
+            <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="line" label="line">
+          <span :title="$t('chart.chart_line')">
+            <svg-icon icon-class="line" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="line-stack" label="line-stack">
+          <span :title="$t('chart.chart_line_stack')">
+            <svg-icon icon-class="line-stack" 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="chart-mix" label="chart-mix">
+          <span :title="$t('chart.chart_mix')">
+            <svg-icon icon-class="chart-mix" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="map" label="map">
+          <span :title="$t('chart.chart_map')">
+            <svg-icon icon-class="map" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="radar" label="radar">
+          <span :title="$t('chart.chart_radar')">
+            <svg-icon icon-class="radar" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="gauge" label="gauge">
+          <span :title="$t('chart.chart_gauge')">
+            <svg-icon icon-class="gauge" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="pie" label="pie">
+          <span :title="$t('chart.chart_pie')">
+            <svg-icon icon-class="pie" 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="pie-rose" label="pie-rose">
+          <span :title="$t('chart.chart_pie_rose')">
+            <svg-icon icon-class="pie-rose" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="funnel" label="funnel">
+          <span :title="$t('chart.chart_funnel')">
+            <svg-icon icon-class="funnel" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="treemap" label="treemap">
+          <span :title="$t('chart.chart_treemap')">
+            <svg-icon icon-class="treemap" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="liquid" label="liquid">
+          <span :title="$t('chart.chart_liquid')">
+            <svg-icon icon-class="liquid" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+      </div>
+    </div>
+    <div v-else-if="chart.render && chart.render === 'echarts'">
+      <div class="radio-row">
+        <el-radio value="table-normal" label="table-normal">
+          <span :title="$t('chart.chart_table_normal')">
+            <svg-icon icon-class="table-normal" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="table-info" label="table-info">
+          <span :title="$t('chart.chart_table_info')">
+            <svg-icon icon-class="table-info" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="text" label="text">
+          <span :title="$t('chart.chart_card')">
+            <svg-icon icon-class="text" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="bar" label="bar">
+          <span :title="$t('chart.chart_bar')">
+            <svg-icon icon-class="bar" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="bar-stack" label="bar-stack">
+          <span :title="$t('chart.chart_bar_stack')">
+            <svg-icon icon-class="bar-stack" 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="bar-horizontal" label="bar-horizontal">
+          <span :title="$t('chart.chart_bar_horizontal')">
+            <svg-icon icon-class="bar-horizontal" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
+          <span :title="$t('chart.chart_bar_stack_horizontal')">
+            <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="line" label="line">
+          <span :title="$t('chart.chart_line')">
+            <svg-icon icon-class="line" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="line-stack" label="line-stack">
+          <span :title="$t('chart.chart_line_stack')">
+            <svg-icon icon-class="line-stack" 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="chart-mix" label="chart-mix">
+          <span :title="$t('chart.chart_mix')">
+            <svg-icon icon-class="chart-mix" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="map" label="map">
+          <span :title="$t('chart.chart_map')">
+            <svg-icon icon-class="map" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="radar" label="radar">
+          <span :title="$t('chart.chart_radar')">
+            <svg-icon icon-class="radar" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="gauge" label="gauge">
+          <span :title="$t('chart.chart_gauge')">
+            <svg-icon icon-class="gauge" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="pie" label="pie">
+          <span :title="$t('chart.chart_pie')">
+            <svg-icon icon-class="pie" 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="pie-rose" label="pie-rose">
+          <span :title="$t('chart.chart_pie_rose')">
+            <svg-icon icon-class="pie-rose" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="funnel" label="funnel">
+          <span :title="$t('chart.chart_funnel')">
+            <svg-icon icon-class="funnel" class="chart-icon" />
+          </span>
+        </el-radio>
+        <el-radio value="treemap" label="treemap">
+          <span :title="$t('chart.chart_treemap')">
+            <svg-icon icon-class="treemap" class="chart-icon" />
+          </span>
+        </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>
+    </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>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChartType',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.chart-type{
+  >>>div{
+    width: 100%;
+  }
+  padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.chart-icon{
+  width: 20px;
+  height: 20px;
+}
+
+.chart-type>>>.el-radio__input{
+  display: none!important;
+}
+
+.el-radio{
+  margin:5px;
+}
+
+.el-radio>>>.el-radio__label{
+  padding-left: 0;
+}
+
+.radio-row{
+  width: 100%;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>