diff --git a/backend/pom.xml b/backend/pom.xml
index 748cb95a83..ed76e48968 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -5,7 +5,7 @@
     <parent>
         <artifactId>dataease-server</artifactId>
         <groupId>io.dataease</groupId>
-        <version>1.8.0</version>
+        <version>1.9.0</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>
@@ -106,6 +106,7 @@
         <dependency>
             <groupId>mysql</groupId>
             <artifactId>mysql-connector-java</artifactId>
+            <version>8.0.28</version>
             <scope>runtime</scope>
         </dependency>
         <dependency>
@@ -214,12 +215,12 @@
         <dependency>
             <groupId>io.dataease</groupId>
             <artifactId>dataease-plugin-interface</artifactId>
-            <version>1.8.0</version>
+            <version>1.9.0</version>
         </dependency>
         <dependency>
             <groupId>io.dataease</groupId>
             <artifactId>dataease-plugin-view</artifactId>
-            <version>1.8.0</version>
+            <version>1.9.0</version>
         </dependency>
         <dependency>
             <groupId>cn.hutool</groupId>
@@ -279,6 +280,16 @@
             <artifactId>json-path</artifactId>
             <version>2.4.0</version>
         </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-redis</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.apache.commons</groupId>
+            <artifactId>commons-pool2</artifactId>
+        </dependency>
     </dependencies>
 
     <build>
diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewCache.java b/backend/src/main/java/io/dataease/base/domain/ChartViewCache.java
new file mode 100644
index 0000000000..1cb34116b3
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewCache.java
@@ -0,0 +1,39 @@
+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class ChartViewCache implements Serializable {
+    private String id;
+
+    private String name;
+
+    private String title;
+
+    private String sceneId;
+
+    private String tableId;
+
+    private String type;
+
+    private String render;
+
+    private Integer resultCount;
+
+    private String resultMode;
+
+    private String createBy;
+
+    private Long createTime;
+
+    private Long updateTime;
+
+    private String stylePriority;
+
+    private String chartType;
+
+    private Boolean isPlugin;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewCacheExample.java b/backend/src/main/java/io/dataease/base/domain/ChartViewCacheExample.java
new file mode 100644
index 0000000000..aa5bb02aef
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewCacheExample.java
@@ -0,0 +1,1210 @@
+package io.dataease.base.domain;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class ChartViewCacheExample {
+    protected String orderByClause;
+
+    protected boolean distinct;
+
+    protected List<Criteria> oredCriteria;
+
+    public ChartViewCacheExample() {
+        oredCriteria = new ArrayList<Criteria>();
+    }
+
+    public void setOrderByClause(String orderByClause) {
+        this.orderByClause = orderByClause;
+    }
+
+    public String getOrderByClause() {
+        return orderByClause;
+    }
+
+    public void setDistinct(boolean distinct) {
+        this.distinct = distinct;
+    }
+
+    public boolean isDistinct() {
+        return distinct;
+    }
+
+    public List<Criteria> getOredCriteria() {
+        return oredCriteria;
+    }
+
+    public void or(Criteria criteria) {
+        oredCriteria.add(criteria);
+    }
+
+    public Criteria or() {
+        Criteria criteria = createCriteriaInternal();
+        oredCriteria.add(criteria);
+        return criteria;
+    }
+
+    public Criteria createCriteria() {
+        Criteria criteria = createCriteriaInternal();
+        if (oredCriteria.size() == 0) {
+            oredCriteria.add(criteria);
+        }
+        return criteria;
+    }
+
+    protected Criteria createCriteriaInternal() {
+        Criteria criteria = new Criteria();
+        return criteria;
+    }
+
+    public void clear() {
+        oredCriteria.clear();
+        orderByClause = null;
+        distinct = false;
+    }
+
+    protected abstract static class GeneratedCriteria {
+        protected List<Criterion> criteria;
+
+        protected GeneratedCriteria() {
+            super();
+            criteria = new ArrayList<Criterion>();
+        }
+
+        public boolean isValid() {
+            return criteria.size() > 0;
+        }
+
+        public List<Criterion> getAllCriteria() {
+            return criteria;
+        }
+
+        public List<Criterion> getCriteria() {
+            return criteria;
+        }
+
+        protected void addCriterion(String condition) {
+            if (condition == null) {
+                throw new RuntimeException("Value for condition cannot be null");
+            }
+            criteria.add(new Criterion(condition));
+        }
+
+        protected void addCriterion(String condition, Object value, String property) {
+            if (value == null) {
+                throw new RuntimeException("Value for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value));
+        }
+
+        protected void addCriterion(String condition, Object value1, Object value2, String property) {
+            if (value1 == null || value2 == null) {
+                throw new RuntimeException("Between values for " + property + " cannot be null");
+            }
+            criteria.add(new Criterion(condition, value1, value2));
+        }
+
+        public Criteria andIdIsNull() {
+            addCriterion("id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIsNotNull() {
+            addCriterion("id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdEqualTo(String value) {
+            addCriterion("id =", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotEqualTo(String value) {
+            addCriterion("id <>", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThan(String value) {
+            addCriterion("id >", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdGreaterThanOrEqualTo(String value) {
+            addCriterion("id >=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThan(String value) {
+            addCriterion("id <", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLessThanOrEqualTo(String value) {
+            addCriterion("id <=", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdLike(String value) {
+            addCriterion("id like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotLike(String value) {
+            addCriterion("id not like", value, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdIn(List<String> values) {
+            addCriterion("id in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotIn(List<String> values) {
+            addCriterion("id not in", values, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdBetween(String value1, String value2) {
+            addCriterion("id between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andIdNotBetween(String value1, String value2) {
+            addCriterion("id not between", value1, value2, "id");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameIsNull() {
+            addCriterion("`name` is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameIsNotNull() {
+            addCriterion("`name` is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameEqualTo(String value) {
+            addCriterion("`name` =", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameNotEqualTo(String value) {
+            addCriterion("`name` <>", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameGreaterThan(String value) {
+            addCriterion("`name` >", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameGreaterThanOrEqualTo(String value) {
+            addCriterion("`name` >=", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameLessThan(String value) {
+            addCriterion("`name` <", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameLessThanOrEqualTo(String value) {
+            addCriterion("`name` <=", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameLike(String value) {
+            addCriterion("`name` like", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameNotLike(String value) {
+            addCriterion("`name` not like", value, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameIn(List<String> values) {
+            addCriterion("`name` in", values, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameNotIn(List<String> values) {
+            addCriterion("`name` not in", values, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameBetween(String value1, String value2) {
+            addCriterion("`name` between", value1, value2, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andNameNotBetween(String value1, String value2) {
+            addCriterion("`name` not between", value1, value2, "name");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleIsNull() {
+            addCriterion("title is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleIsNotNull() {
+            addCriterion("title is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleEqualTo(String value) {
+            addCriterion("title =", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotEqualTo(String value) {
+            addCriterion("title <>", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleGreaterThan(String value) {
+            addCriterion("title >", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleGreaterThanOrEqualTo(String value) {
+            addCriterion("title >=", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleLessThan(String value) {
+            addCriterion("title <", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleLessThanOrEqualTo(String value) {
+            addCriterion("title <=", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleLike(String value) {
+            addCriterion("title like", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotLike(String value) {
+            addCriterion("title not like", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleIn(List<String> values) {
+            addCriterion("title in", values, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotIn(List<String> values) {
+            addCriterion("title not in", values, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleBetween(String value1, String value2) {
+            addCriterion("title between", value1, value2, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotBetween(String value1, String value2) {
+            addCriterion("title not between", value1, value2, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdIsNull() {
+            addCriterion("scene_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdIsNotNull() {
+            addCriterion("scene_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdEqualTo(String value) {
+            addCriterion("scene_id =", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotEqualTo(String value) {
+            addCriterion("scene_id <>", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdGreaterThan(String value) {
+            addCriterion("scene_id >", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdGreaterThanOrEqualTo(String value) {
+            addCriterion("scene_id >=", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdLessThan(String value) {
+            addCriterion("scene_id <", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdLessThanOrEqualTo(String value) {
+            addCriterion("scene_id <=", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdLike(String value) {
+            addCriterion("scene_id like", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotLike(String value) {
+            addCriterion("scene_id not like", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdIn(List<String> values) {
+            addCriterion("scene_id in", values, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotIn(List<String> values) {
+            addCriterion("scene_id not in", values, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdBetween(String value1, String value2) {
+            addCriterion("scene_id between", value1, value2, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotBetween(String value1, String value2) {
+            addCriterion("scene_id not between", value1, value2, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdIsNull() {
+            addCriterion("table_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdIsNotNull() {
+            addCriterion("table_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdEqualTo(String value) {
+            addCriterion("table_id =", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdNotEqualTo(String value) {
+            addCriterion("table_id <>", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdGreaterThan(String value) {
+            addCriterion("table_id >", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdGreaterThanOrEqualTo(String value) {
+            addCriterion("table_id >=", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdLessThan(String value) {
+            addCriterion("table_id <", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdLessThanOrEqualTo(String value) {
+            addCriterion("table_id <=", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdLike(String value) {
+            addCriterion("table_id like", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdNotLike(String value) {
+            addCriterion("table_id not like", value, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdIn(List<String> values) {
+            addCriterion("table_id in", values, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdNotIn(List<String> values) {
+            addCriterion("table_id not in", values, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdBetween(String value1, String value2) {
+            addCriterion("table_id between", value1, value2, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTableIdNotBetween(String value1, String value2) {
+            addCriterion("table_id not between", value1, value2, "tableId");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeIsNull() {
+            addCriterion("`type` is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeIsNotNull() {
+            addCriterion("`type` is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeEqualTo(String value) {
+            addCriterion("`type` =", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeNotEqualTo(String value) {
+            addCriterion("`type` <>", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeGreaterThan(String value) {
+            addCriterion("`type` >", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeGreaterThanOrEqualTo(String value) {
+            addCriterion("`type` >=", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeLessThan(String value) {
+            addCriterion("`type` <", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeLessThanOrEqualTo(String value) {
+            addCriterion("`type` <=", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeLike(String value) {
+            addCriterion("`type` like", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeNotLike(String value) {
+            addCriterion("`type` not like", value, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeIn(List<String> values) {
+            addCriterion("`type` in", values, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeNotIn(List<String> values) {
+            addCriterion("`type` not in", values, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeBetween(String value1, String value2) {
+            addCriterion("`type` between", value1, value2, "type");
+            return (Criteria) this;
+        }
+
+        public Criteria andTypeNotBetween(String value1, String value2) {
+            addCriterion("`type` not between", value1, value2, "type");
+            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 andResultCountIsNull() {
+            addCriterion("result_count is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountIsNotNull() {
+            addCriterion("result_count is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountEqualTo(Integer value) {
+            addCriterion("result_count =", value, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountNotEqualTo(Integer value) {
+            addCriterion("result_count <>", value, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountGreaterThan(Integer value) {
+            addCriterion("result_count >", value, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountGreaterThanOrEqualTo(Integer value) {
+            addCriterion("result_count >=", value, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountLessThan(Integer value) {
+            addCriterion("result_count <", value, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountLessThanOrEqualTo(Integer value) {
+            addCriterion("result_count <=", value, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountIn(List<Integer> values) {
+            addCriterion("result_count in", values, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountNotIn(List<Integer> values) {
+            addCriterion("result_count not in", values, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountBetween(Integer value1, Integer value2) {
+            addCriterion("result_count between", value1, value2, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultCountNotBetween(Integer value1, Integer value2) {
+            addCriterion("result_count not between", value1, value2, "resultCount");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeIsNull() {
+            addCriterion("result_mode is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeIsNotNull() {
+            addCriterion("result_mode is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeEqualTo(String value) {
+            addCriterion("result_mode =", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeNotEqualTo(String value) {
+            addCriterion("result_mode <>", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeGreaterThan(String value) {
+            addCriterion("result_mode >", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeGreaterThanOrEqualTo(String value) {
+            addCriterion("result_mode >=", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeLessThan(String value) {
+            addCriterion("result_mode <", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeLessThanOrEqualTo(String value) {
+            addCriterion("result_mode <=", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeLike(String value) {
+            addCriterion("result_mode like", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeNotLike(String value) {
+            addCriterion("result_mode not like", value, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeIn(List<String> values) {
+            addCriterion("result_mode in", values, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeNotIn(List<String> values) {
+            addCriterion("result_mode not in", values, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeBetween(String value1, String value2) {
+            addCriterion("result_mode between", value1, value2, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andResultModeNotBetween(String value1, String value2) {
+            addCriterion("result_mode not between", value1, value2, "resultMode");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByIsNull() {
+            addCriterion("create_by is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByIsNotNull() {
+            addCriterion("create_by is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByEqualTo(String value) {
+            addCriterion("create_by =", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByNotEqualTo(String value) {
+            addCriterion("create_by <>", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByGreaterThan(String value) {
+            addCriterion("create_by >", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByGreaterThanOrEqualTo(String value) {
+            addCriterion("create_by >=", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByLessThan(String value) {
+            addCriterion("create_by <", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByLessThanOrEqualTo(String value) {
+            addCriterion("create_by <=", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByLike(String value) {
+            addCriterion("create_by like", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByNotLike(String value) {
+            addCriterion("create_by not like", value, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByIn(List<String> values) {
+            addCriterion("create_by in", values, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByNotIn(List<String> values) {
+            addCriterion("create_by not in", values, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByBetween(String value1, String value2) {
+            addCriterion("create_by between", value1, value2, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateByNotBetween(String value1, String value2) {
+            addCriterion("create_by not between", value1, value2, "createBy");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeIsNull() {
+            addCriterion("create_time is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeIsNotNull() {
+            addCriterion("create_time is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeEqualTo(Long value) {
+            addCriterion("create_time =", value, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeNotEqualTo(Long value) {
+            addCriterion("create_time <>", value, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeGreaterThan(Long value) {
+            addCriterion("create_time >", value, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeGreaterThanOrEqualTo(Long value) {
+            addCriterion("create_time >=", value, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeLessThan(Long value) {
+            addCriterion("create_time <", value, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeLessThanOrEqualTo(Long value) {
+            addCriterion("create_time <=", value, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeIn(List<Long> values) {
+            addCriterion("create_time in", values, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeNotIn(List<Long> values) {
+            addCriterion("create_time not in", values, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeBetween(Long value1, Long value2) {
+            addCriterion("create_time between", value1, value2, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andCreateTimeNotBetween(Long value1, Long value2) {
+            addCriterion("create_time not between", value1, value2, "createTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeIsNull() {
+            addCriterion("update_time is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeIsNotNull() {
+            addCriterion("update_time is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeEqualTo(Long value) {
+            addCriterion("update_time =", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeNotEqualTo(Long value) {
+            addCriterion("update_time <>", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeGreaterThan(Long value) {
+            addCriterion("update_time >", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeGreaterThanOrEqualTo(Long value) {
+            addCriterion("update_time >=", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeLessThan(Long value) {
+            addCriterion("update_time <", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeLessThanOrEqualTo(Long value) {
+            addCriterion("update_time <=", value, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeIn(List<Long> values) {
+            addCriterion("update_time in", values, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeNotIn(List<Long> values) {
+            addCriterion("update_time not in", values, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeBetween(Long value1, Long value2) {
+            addCriterion("update_time between", value1, value2, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andUpdateTimeNotBetween(Long value1, Long value2) {
+            addCriterion("update_time not between", value1, value2, "updateTime");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityIsNull() {
+            addCriterion("style_priority is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityIsNotNull() {
+            addCriterion("style_priority is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityEqualTo(String value) {
+            addCriterion("style_priority =", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotEqualTo(String value) {
+            addCriterion("style_priority <>", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityGreaterThan(String value) {
+            addCriterion("style_priority >", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityGreaterThanOrEqualTo(String value) {
+            addCriterion("style_priority >=", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityLessThan(String value) {
+            addCriterion("style_priority <", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityLessThanOrEqualTo(String value) {
+            addCriterion("style_priority <=", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityLike(String value) {
+            addCriterion("style_priority like", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotLike(String value) {
+            addCriterion("style_priority not like", value, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityIn(List<String> values) {
+            addCriterion("style_priority in", values, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotIn(List<String> values) {
+            addCriterion("style_priority not in", values, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityBetween(String value1, String value2) {
+            addCriterion("style_priority between", value1, value2, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andStylePriorityNotBetween(String value1, String value2) {
+            addCriterion("style_priority not between", value1, value2, "stylePriority");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeIsNull() {
+            addCriterion("chart_type is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeIsNotNull() {
+            addCriterion("chart_type is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeEqualTo(String value) {
+            addCriterion("chart_type =", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeNotEqualTo(String value) {
+            addCriterion("chart_type <>", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeGreaterThan(String value) {
+            addCriterion("chart_type >", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeGreaterThanOrEqualTo(String value) {
+            addCriterion("chart_type >=", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeLessThan(String value) {
+            addCriterion("chart_type <", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeLessThanOrEqualTo(String value) {
+            addCriterion("chart_type <=", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeLike(String value) {
+            addCriterion("chart_type like", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeNotLike(String value) {
+            addCriterion("chart_type not like", value, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeIn(List<String> values) {
+            addCriterion("chart_type in", values, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeNotIn(List<String> values) {
+            addCriterion("chart_type not in", values, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeBetween(String value1, String value2) {
+            addCriterion("chart_type between", value1, value2, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andChartTypeNotBetween(String value1, String value2) {
+            addCriterion("chart_type not between", value1, value2, "chartType");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginIsNull() {
+            addCriterion("is_plugin is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginIsNotNull() {
+            addCriterion("is_plugin is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginEqualTo(Boolean value) {
+            addCriterion("is_plugin =", value, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginNotEqualTo(Boolean value) {
+            addCriterion("is_plugin <>", value, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginGreaterThan(Boolean value) {
+            addCriterion("is_plugin >", value, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginGreaterThanOrEqualTo(Boolean value) {
+            addCriterion("is_plugin >=", value, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginLessThan(Boolean value) {
+            addCriterion("is_plugin <", value, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginLessThanOrEqualTo(Boolean value) {
+            addCriterion("is_plugin <=", value, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginIn(List<Boolean> values) {
+            addCriterion("is_plugin in", values, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginNotIn(List<Boolean> values) {
+            addCriterion("is_plugin not in", values, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginBetween(Boolean value1, Boolean value2) {
+            addCriterion("is_plugin between", value1, value2, "isPlugin");
+            return (Criteria) this;
+        }
+
+        public Criteria andIsPluginNotBetween(Boolean value1, Boolean value2) {
+            addCriterion("is_plugin not between", value1, value2, "isPlugin");
+            return (Criteria) this;
+        }
+    }
+
+    public static class Criteria extends GeneratedCriteria {
+
+        protected Criteria() {
+            super();
+        }
+    }
+
+    public static class Criterion {
+        private String condition;
+
+        private Object value;
+
+        private Object secondValue;
+
+        private boolean noValue;
+
+        private boolean singleValue;
+
+        private boolean betweenValue;
+
+        private boolean listValue;
+
+        private String typeHandler;
+
+        public String getCondition() {
+            return condition;
+        }
+
+        public Object getValue() {
+            return value;
+        }
+
+        public Object getSecondValue() {
+            return secondValue;
+        }
+
+        public boolean isNoValue() {
+            return noValue;
+        }
+
+        public boolean isSingleValue() {
+            return singleValue;
+        }
+
+        public boolean isBetweenValue() {
+            return betweenValue;
+        }
+
+        public boolean isListValue() {
+            return listValue;
+        }
+
+        public String getTypeHandler() {
+            return typeHandler;
+        }
+
+        protected Criterion(String condition) {
+            super();
+            this.condition = condition;
+            this.typeHandler = null;
+            this.noValue = true;
+        }
+
+        protected Criterion(String condition, Object value, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.typeHandler = typeHandler;
+            if (value instanceof List<?>) {
+                this.listValue = true;
+            } else {
+                this.singleValue = true;
+            }
+        }
+
+        protected Criterion(String condition, Object value) {
+            this(condition, value, null);
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue, String typeHandler) {
+            super();
+            this.condition = condition;
+            this.value = value;
+            this.secondValue = secondValue;
+            this.typeHandler = typeHandler;
+            this.betweenValue = true;
+        }
+
+        protected Criterion(String condition, Object value, Object secondValue) {
+            this(condition, value, secondValue, null);
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/domain/ChartViewCacheWithBLOBs.java b/backend/src/main/java/io/dataease/base/domain/ChartViewCacheWithBLOBs.java
new file mode 100644
index 0000000000..9e181a9dcb
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/domain/ChartViewCacheWithBLOBs.java
@@ -0,0 +1,37 @@
+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+public class ChartViewCacheWithBLOBs extends ChartViewCache implements Serializable {
+    private String xAxis;
+
+    private String xAxisExt;
+
+    private String yAxis;
+
+    private String yAxisExt;
+
+    private String extStack;
+
+    private String extBubble;
+
+    private String customAttr;
+
+    private String customStyle;
+
+    private String customFilter;
+
+    private String drillFields;
+
+    private String senior;
+
+    private String snapshot;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ChartViewCacheMapper.java b/backend/src/main/java/io/dataease/base/mapper/ChartViewCacheMapper.java
new file mode 100644
index 0000000000..aec7c7da16
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ChartViewCacheMapper.java
@@ -0,0 +1,37 @@
+package io.dataease.base.mapper;
+
+import io.dataease.base.domain.ChartViewCache;
+import io.dataease.base.domain.ChartViewCacheExample;
+import io.dataease.base.domain.ChartViewCacheWithBLOBs;
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+
+public interface ChartViewCacheMapper {
+    long countByExample(ChartViewCacheExample example);
+
+    int deleteByExample(ChartViewCacheExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(ChartViewCacheWithBLOBs record);
+
+    int insertSelective(ChartViewCacheWithBLOBs record);
+
+    List<ChartViewCacheWithBLOBs> selectByExampleWithBLOBs(ChartViewCacheExample example);
+
+    List<ChartViewCache> selectByExample(ChartViewCacheExample example);
+
+    ChartViewCacheWithBLOBs selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") ChartViewCacheWithBLOBs record, @Param("example") ChartViewCacheExample example);
+
+    int updateByExampleWithBLOBs(@Param("record") ChartViewCacheWithBLOBs record, @Param("example") ChartViewCacheExample example);
+
+    int updateByExample(@Param("record") ChartViewCache record, @Param("example") ChartViewCacheExample example);
+
+    int updateByPrimaryKeySelective(ChartViewCacheWithBLOBs record);
+
+    int updateByPrimaryKeyWithBLOBs(ChartViewCacheWithBLOBs record);
+
+    int updateByPrimaryKey(ChartViewCache record);
+}
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ChartViewCacheMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ChartViewCacheMapper.xml
new file mode 100644
index 0000000000..caa9ebfbb4
--- /dev/null
+++ b/backend/src/main/java/io/dataease/base/mapper/ChartViewCacheMapper.xml
@@ -0,0 +1,621 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.dataease.base.mapper.ChartViewCacheMapper">
+  <resultMap id="BaseResultMap" type="io.dataease.base.domain.ChartViewCache">
+    <id column="id" jdbcType="VARCHAR" property="id" />
+    <result column="name" jdbcType="VARCHAR" property="name" />
+    <result column="title" jdbcType="VARCHAR" property="title" />
+    <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="result_count" jdbcType="INTEGER" property="resultCount" />
+    <result column="result_mode" jdbcType="VARCHAR" property="resultMode" />
+    <result column="create_by" jdbcType="VARCHAR" property="createBy" />
+    <result column="create_time" jdbcType="BIGINT" property="createTime" />
+    <result column="update_time" jdbcType="BIGINT" property="updateTime" />
+    <result column="style_priority" jdbcType="VARCHAR" property="stylePriority" />
+    <result column="chart_type" jdbcType="VARCHAR" property="chartType" />
+    <result column="is_plugin" jdbcType="BIT" property="isPlugin" />
+  </resultMap>
+  <resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.ChartViewCacheWithBLOBs">
+    <result column="x_axis" jdbcType="LONGVARCHAR" property="xAxis" />
+    <result column="x_axis_ext" jdbcType="LONGVARCHAR" property="xAxisExt" />
+    <result column="y_axis" jdbcType="LONGVARCHAR" property="yAxis" />
+    <result column="y_axis_ext" jdbcType="LONGVARCHAR" property="yAxisExt" />
+    <result column="ext_stack" jdbcType="LONGVARCHAR" property="extStack" />
+    <result column="ext_bubble" jdbcType="LONGVARCHAR" property="extBubble" />
+    <result column="custom_attr" jdbcType="LONGVARCHAR" property="customAttr" />
+    <result column="custom_style" jdbcType="LONGVARCHAR" property="customStyle" />
+    <result column="custom_filter" jdbcType="LONGVARCHAR" property="customFilter" />
+    <result column="drill_fields" jdbcType="LONGVARCHAR" property="drillFields" />
+    <result column="senior" jdbcType="LONGVARCHAR" property="senior" />
+    <result column="snapshot" jdbcType="LONGVARCHAR" property="snapshot" />
+  </resultMap>
+  <sql id="Example_Where_Clause">
+    <where>
+      <foreach collection="oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Update_By_Example_Where_Clause">
+    <where>
+      <foreach collection="example.oredCriteria" item="criteria" separator="or">
+        <if test="criteria.valid">
+          <trim prefix="(" prefixOverrides="and" suffix=")">
+            <foreach collection="criteria.criteria" item="criterion">
+              <choose>
+                <when test="criterion.noValue">
+                  and ${criterion.condition}
+                </when>
+                <when test="criterion.singleValue">
+                  and ${criterion.condition} #{criterion.value}
+                </when>
+                <when test="criterion.betweenValue">
+                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
+                </when>
+                <when test="criterion.listValue">
+                  and ${criterion.condition}
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
+                    #{listItem}
+                  </foreach>
+                </when>
+              </choose>
+            </foreach>
+          </trim>
+        </if>
+      </foreach>
+    </where>
+  </sql>
+  <sql id="Base_Column_List">
+    id, `name`, title, scene_id, table_id, `type`, render, result_count, result_mode, 
+    create_by, create_time, update_time, style_priority, chart_type, is_plugin
+  </sql>
+  <sql id="Blob_Column_List">
+    x_axis, x_axis_ext, y_axis, y_axis_ext, ext_stack, ext_bubble, custom_attr, custom_style, 
+    custom_filter, drill_fields, senior, snapshot
+  </sql>
+  <select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.ChartViewCacheExample" resultMap="ResultMapWithBLOBs">
+    select
+    <if test="distinct">
+      distinct
+    </if>
+    <include refid="Base_Column_List" />
+    ,
+    <include refid="Blob_Column_List" />
+    from chart_view_cache
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+    <if test="orderByClause != null">
+      order by ${orderByClause}
+    </if>
+  </select>
+  <select id="selectByExample" parameterType="io.dataease.base.domain.ChartViewCacheExample" resultMap="BaseResultMap">
+    select
+    <if test="distinct">
+      distinct
+    </if>
+    <include refid="Base_Column_List" />
+    from chart_view_cache
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+    <if test="orderByClause != null">
+      order by ${orderByClause}
+    </if>
+  </select>
+  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
+    select 
+    <include refid="Base_Column_List" />
+    ,
+    <include refid="Blob_Column_List" />
+    from chart_view_cache
+    where id = #{id,jdbcType=VARCHAR}
+  </select>
+  <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
+    delete from chart_view_cache
+    where id = #{id,jdbcType=VARCHAR}
+  </delete>
+  <delete id="deleteByExample" parameterType="io.dataease.base.domain.ChartViewCacheExample">
+    delete from chart_view_cache
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </delete>
+  <insert id="insert" parameterType="io.dataease.base.domain.ChartViewCacheWithBLOBs">
+    insert into chart_view_cache (id, `name`, title, 
+      scene_id, table_id, `type`, 
+      render, result_count, result_mode, 
+      create_by, create_time, update_time, 
+      style_priority, chart_type, is_plugin, 
+      x_axis, x_axis_ext, y_axis, 
+      y_axis_ext, ext_stack, ext_bubble, 
+      custom_attr, custom_style, custom_filter, 
+      drill_fields, senior, snapshot
+      )
+    values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{title,jdbcType=VARCHAR}, 
+      #{sceneId,jdbcType=VARCHAR}, #{tableId,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, 
+      #{render,jdbcType=VARCHAR}, #{resultCount,jdbcType=INTEGER}, #{resultMode,jdbcType=VARCHAR}, 
+      #{createBy,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, 
+      #{stylePriority,jdbcType=VARCHAR}, #{chartType,jdbcType=VARCHAR}, #{isPlugin,jdbcType=BIT}, 
+      #{xAxis,jdbcType=LONGVARCHAR}, #{xAxisExt,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}, #{senior,jdbcType=LONGVARCHAR}, #{snapshot,jdbcType=LONGVARCHAR}
+      )
+  </insert>
+  <insert id="insertSelective" parameterType="io.dataease.base.domain.ChartViewCacheWithBLOBs">
+    insert into chart_view_cache
+    <trim prefix="(" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        id,
+      </if>
+      <if test="name != null">
+        `name`,
+      </if>
+      <if test="title != null">
+        title,
+      </if>
+      <if test="sceneId != null">
+        scene_id,
+      </if>
+      <if test="tableId != null">
+        table_id,
+      </if>
+      <if test="type != null">
+        `type`,
+      </if>
+      <if test="render != null">
+        render,
+      </if>
+      <if test="resultCount != null">
+        result_count,
+      </if>
+      <if test="resultMode != null">
+        result_mode,
+      </if>
+      <if test="createBy != null">
+        create_by,
+      </if>
+      <if test="createTime != null">
+        create_time,
+      </if>
+      <if test="updateTime != null">
+        update_time,
+      </if>
+      <if test="stylePriority != null">
+        style_priority,
+      </if>
+      <if test="chartType != null">
+        chart_type,
+      </if>
+      <if test="isPlugin != null">
+        is_plugin,
+      </if>
+      <if test="xAxis != null">
+        x_axis,
+      </if>
+      <if test="xAxisExt != null">
+        x_axis_ext,
+      </if>
+      <if test="yAxis != null">
+        y_axis,
+      </if>
+      <if test="yAxisExt != null">
+        y_axis_ext,
+      </if>
+      <if test="extStack != null">
+        ext_stack,
+      </if>
+      <if test="extBubble != null">
+        ext_bubble,
+      </if>
+      <if test="customAttr != null">
+        custom_attr,
+      </if>
+      <if test="customStyle != null">
+        custom_style,
+      </if>
+      <if test="customFilter != null">
+        custom_filter,
+      </if>
+      <if test="drillFields != null">
+        drill_fields,
+      </if>
+      <if test="senior != null">
+        senior,
+      </if>
+      <if test="snapshot != null">
+        snapshot,
+      </if>
+    </trim>
+    <trim prefix="values (" suffix=")" suffixOverrides=",">
+      <if test="id != null">
+        #{id,jdbcType=VARCHAR},
+      </if>
+      <if test="name != null">
+        #{name,jdbcType=VARCHAR},
+      </if>
+      <if test="title != null">
+        #{title,jdbcType=VARCHAR},
+      </if>
+      <if test="sceneId != null">
+        #{sceneId,jdbcType=VARCHAR},
+      </if>
+      <if test="tableId != null">
+        #{tableId,jdbcType=VARCHAR},
+      </if>
+      <if test="type != null">
+        #{type,jdbcType=VARCHAR},
+      </if>
+      <if test="render != null">
+        #{render,jdbcType=VARCHAR},
+      </if>
+      <if test="resultCount != null">
+        #{resultCount,jdbcType=INTEGER},
+      </if>
+      <if test="resultMode != null">
+        #{resultMode,jdbcType=VARCHAR},
+      </if>
+      <if test="createBy != null">
+        #{createBy,jdbcType=VARCHAR},
+      </if>
+      <if test="createTime != null">
+        #{createTime,jdbcType=BIGINT},
+      </if>
+      <if test="updateTime != null">
+        #{updateTime,jdbcType=BIGINT},
+      </if>
+      <if test="stylePriority != null">
+        #{stylePriority,jdbcType=VARCHAR},
+      </if>
+      <if test="chartType != null">
+        #{chartType,jdbcType=VARCHAR},
+      </if>
+      <if test="isPlugin != null">
+        #{isPlugin,jdbcType=BIT},
+      </if>
+      <if test="xAxis != null">
+        #{xAxis,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="xAxisExt != null">
+        #{xAxisExt,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="yAxis != null">
+        #{yAxis,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="yAxisExt != null">
+        #{yAxisExt,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="extStack != null">
+        #{extStack,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="extBubble != null">
+        #{extBubble,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="customAttr != null">
+        #{customAttr,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="customStyle != null">
+        #{customStyle,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="customFilter != null">
+        #{customFilter,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="drillFields != null">
+        #{drillFields,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="senior != null">
+        #{senior,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="snapshot != null">
+        #{snapshot,jdbcType=LONGVARCHAR},
+      </if>
+    </trim>
+  </insert>
+  <select id="countByExample" parameterType="io.dataease.base.domain.ChartViewCacheExample" resultType="java.lang.Long">
+    select count(*) from chart_view_cache
+    <if test="_parameter != null">
+      <include refid="Example_Where_Clause" />
+    </if>
+  </select>
+  <update id="updateByExampleSelective" parameterType="map">
+    update chart_view_cache
+    <set>
+      <if test="record.id != null">
+        id = #{record.id,jdbcType=VARCHAR},
+      </if>
+      <if test="record.name != null">
+        `name` = #{record.name,jdbcType=VARCHAR},
+      </if>
+      <if test="record.title != null">
+        title = #{record.title,jdbcType=VARCHAR},
+      </if>
+      <if test="record.sceneId != null">
+        scene_id = #{record.sceneId,jdbcType=VARCHAR},
+      </if>
+      <if test="record.tableId != null">
+        table_id = #{record.tableId,jdbcType=VARCHAR},
+      </if>
+      <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.resultCount != null">
+        result_count = #{record.resultCount,jdbcType=INTEGER},
+      </if>
+      <if test="record.resultMode != null">
+        result_mode = #{record.resultMode,jdbcType=VARCHAR},
+      </if>
+      <if test="record.createBy != null">
+        create_by = #{record.createBy,jdbcType=VARCHAR},
+      </if>
+      <if test="record.createTime != null">
+        create_time = #{record.createTime,jdbcType=BIGINT},
+      </if>
+      <if test="record.updateTime != null">
+        update_time = #{record.updateTime,jdbcType=BIGINT},
+      </if>
+      <if test="record.stylePriority != null">
+        style_priority = #{record.stylePriority,jdbcType=VARCHAR},
+      </if>
+      <if test="record.chartType != null">
+        chart_type = #{record.chartType,jdbcType=VARCHAR},
+      </if>
+      <if test="record.isPlugin != null">
+        is_plugin = #{record.isPlugin,jdbcType=BIT},
+      </if>
+      <if test="record.xAxis != null">
+        x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.xAxisExt != null">
+        x_axis_ext = #{record.xAxisExt,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.yAxis != null">
+        y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.yAxisExt != null">
+        y_axis_ext = #{record.yAxisExt,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.extStack != null">
+        ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.extBubble != null">
+        ext_bubble = #{record.extBubble,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.customAttr != null">
+        custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.customStyle != null">
+        custom_style = #{record.customStyle,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.customFilter != null">
+        custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.drillFields != null">
+        drill_fields = #{record.drillFields,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.senior != null">
+        senior = #{record.senior,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="record.snapshot != null">
+        snapshot = #{record.snapshot,jdbcType=LONGVARCHAR},
+      </if>
+    </set>
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByExampleWithBLOBs" parameterType="map">
+    update chart_view_cache
+    set id = #{record.id,jdbcType=VARCHAR},
+      `name` = #{record.name,jdbcType=VARCHAR},
+      title = #{record.title,jdbcType=VARCHAR},
+      scene_id = #{record.sceneId,jdbcType=VARCHAR},
+      table_id = #{record.tableId,jdbcType=VARCHAR},
+      `type` = #{record.type,jdbcType=VARCHAR},
+      render = #{record.render,jdbcType=VARCHAR},
+      result_count = #{record.resultCount,jdbcType=INTEGER},
+      result_mode = #{record.resultMode,jdbcType=VARCHAR},
+      create_by = #{record.createBy,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      style_priority = #{record.stylePriority,jdbcType=VARCHAR},
+      chart_type = #{record.chartType,jdbcType=VARCHAR},
+      is_plugin = #{record.isPlugin,jdbcType=BIT},
+      x_axis = #{record.xAxis,jdbcType=LONGVARCHAR},
+      x_axis_ext = #{record.xAxisExt,jdbcType=LONGVARCHAR},
+      y_axis = #{record.yAxis,jdbcType=LONGVARCHAR},
+      y_axis_ext = #{record.yAxisExt,jdbcType=LONGVARCHAR},
+      ext_stack = #{record.extStack,jdbcType=LONGVARCHAR},
+      ext_bubble = #{record.extBubble,jdbcType=LONGVARCHAR},
+      custom_attr = #{record.customAttr,jdbcType=LONGVARCHAR},
+      custom_style = #{record.customStyle,jdbcType=LONGVARCHAR},
+      custom_filter = #{record.customFilter,jdbcType=LONGVARCHAR},
+      drill_fields = #{record.drillFields,jdbcType=LONGVARCHAR},
+      senior = #{record.senior,jdbcType=LONGVARCHAR},
+      snapshot = #{record.snapshot,jdbcType=LONGVARCHAR}
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByExample" parameterType="map">
+    update chart_view_cache
+    set id = #{record.id,jdbcType=VARCHAR},
+      `name` = #{record.name,jdbcType=VARCHAR},
+      title = #{record.title,jdbcType=VARCHAR},
+      scene_id = #{record.sceneId,jdbcType=VARCHAR},
+      table_id = #{record.tableId,jdbcType=VARCHAR},
+      `type` = #{record.type,jdbcType=VARCHAR},
+      render = #{record.render,jdbcType=VARCHAR},
+      result_count = #{record.resultCount,jdbcType=INTEGER},
+      result_mode = #{record.resultMode,jdbcType=VARCHAR},
+      create_by = #{record.createBy,jdbcType=VARCHAR},
+      create_time = #{record.createTime,jdbcType=BIGINT},
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      style_priority = #{record.stylePriority,jdbcType=VARCHAR},
+      chart_type = #{record.chartType,jdbcType=VARCHAR},
+      is_plugin = #{record.isPlugin,jdbcType=BIT}
+    <if test="_parameter != null">
+      <include refid="Update_By_Example_Where_Clause" />
+    </if>
+  </update>
+  <update id="updateByPrimaryKeySelective" parameterType="io.dataease.base.domain.ChartViewCacheWithBLOBs">
+    update chart_view_cache
+    <set>
+      <if test="name != null">
+        `name` = #{name,jdbcType=VARCHAR},
+      </if>
+      <if test="title != null">
+        title = #{title,jdbcType=VARCHAR},
+      </if>
+      <if test="sceneId != null">
+        scene_id = #{sceneId,jdbcType=VARCHAR},
+      </if>
+      <if test="tableId != null">
+        table_id = #{tableId,jdbcType=VARCHAR},
+      </if>
+      <if test="type != null">
+        `type` = #{type,jdbcType=VARCHAR},
+      </if>
+      <if test="render != null">
+        render = #{render,jdbcType=VARCHAR},
+      </if>
+      <if test="resultCount != null">
+        result_count = #{resultCount,jdbcType=INTEGER},
+      </if>
+      <if test="resultMode != null">
+        result_mode = #{resultMode,jdbcType=VARCHAR},
+      </if>
+      <if test="createBy != null">
+        create_by = #{createBy,jdbcType=VARCHAR},
+      </if>
+      <if test="createTime != null">
+        create_time = #{createTime,jdbcType=BIGINT},
+      </if>
+      <if test="updateTime != null">
+        update_time = #{updateTime,jdbcType=BIGINT},
+      </if>
+      <if test="stylePriority != null">
+        style_priority = #{stylePriority,jdbcType=VARCHAR},
+      </if>
+      <if test="chartType != null">
+        chart_type = #{chartType,jdbcType=VARCHAR},
+      </if>
+      <if test="isPlugin != null">
+        is_plugin = #{isPlugin,jdbcType=BIT},
+      </if>
+      <if test="xAxis != null">
+        x_axis = #{xAxis,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="xAxisExt != null">
+        x_axis_ext = #{xAxisExt,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="yAxis != null">
+        y_axis = #{yAxis,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="yAxisExt != null">
+        y_axis_ext = #{yAxisExt,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="extStack != null">
+        ext_stack = #{extStack,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="extBubble != null">
+        ext_bubble = #{extBubble,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="customAttr != null">
+        custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="customStyle != null">
+        custom_style = #{customStyle,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="customFilter != null">
+        custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="drillFields != null">
+        drill_fields = #{drillFields,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="senior != null">
+        senior = #{senior,jdbcType=LONGVARCHAR},
+      </if>
+      <if test="snapshot != null">
+        snapshot = #{snapshot,jdbcType=LONGVARCHAR},
+      </if>
+    </set>
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+  <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.dataease.base.domain.ChartViewCacheWithBLOBs">
+    update chart_view_cache
+    set `name` = #{name,jdbcType=VARCHAR},
+      title = #{title,jdbcType=VARCHAR},
+      scene_id = #{sceneId,jdbcType=VARCHAR},
+      table_id = #{tableId,jdbcType=VARCHAR},
+      `type` = #{type,jdbcType=VARCHAR},
+      render = #{render,jdbcType=VARCHAR},
+      result_count = #{resultCount,jdbcType=INTEGER},
+      result_mode = #{resultMode,jdbcType=VARCHAR},
+      create_by = #{createBy,jdbcType=VARCHAR},
+      create_time = #{createTime,jdbcType=BIGINT},
+      update_time = #{updateTime,jdbcType=BIGINT},
+      style_priority = #{stylePriority,jdbcType=VARCHAR},
+      chart_type = #{chartType,jdbcType=VARCHAR},
+      is_plugin = #{isPlugin,jdbcType=BIT},
+      x_axis = #{xAxis,jdbcType=LONGVARCHAR},
+      x_axis_ext = #{xAxisExt,jdbcType=LONGVARCHAR},
+      y_axis = #{yAxis,jdbcType=LONGVARCHAR},
+      y_axis_ext = #{yAxisExt,jdbcType=LONGVARCHAR},
+      ext_stack = #{extStack,jdbcType=LONGVARCHAR},
+      ext_bubble = #{extBubble,jdbcType=LONGVARCHAR},
+      custom_attr = #{customAttr,jdbcType=LONGVARCHAR},
+      custom_style = #{customStyle,jdbcType=LONGVARCHAR},
+      custom_filter = #{customFilter,jdbcType=LONGVARCHAR},
+      drill_fields = #{drillFields,jdbcType=LONGVARCHAR},
+      senior = #{senior,jdbcType=LONGVARCHAR},
+      snapshot = #{snapshot,jdbcType=LONGVARCHAR}
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+  <update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.ChartViewCache">
+    update chart_view_cache
+    set `name` = #{name,jdbcType=VARCHAR},
+      title = #{title,jdbcType=VARCHAR},
+      scene_id = #{sceneId,jdbcType=VARCHAR},
+      table_id = #{tableId,jdbcType=VARCHAR},
+      `type` = #{type,jdbcType=VARCHAR},
+      render = #{render,jdbcType=VARCHAR},
+      result_count = #{resultCount,jdbcType=INTEGER},
+      result_mode = #{resultMode,jdbcType=VARCHAR},
+      create_by = #{createBy,jdbcType=VARCHAR},
+      create_time = #{createTime,jdbcType=BIGINT},
+      update_time = #{updateTime,jdbcType=BIGINT},
+      style_priority = #{stylePriority,jdbcType=VARCHAR},
+      chart_type = #{chartType,jdbcType=VARCHAR},
+      is_plugin = #{isPlugin,jdbcType=BIT}
+    where id = #{id,jdbcType=VARCHAR}
+  </update>
+</mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.java
index fd3e2cb602..82667c44a0 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.java
@@ -12,7 +12,7 @@ import java.util.List;
 public interface ExtChartViewMapper {
     List<ChartViewDTO> search(ChartViewRequest request);
 
-    ChartViewDTO searchOne(ChartViewRequest request);
+//    ChartViewDTO searchOne(ChartViewRequest request);
 
     void chartCopy(@Param("newChartId")String newChartId,@Param("oldChartId")String oldChartId,@Param("panelId")String panelId);
 
@@ -25,9 +25,24 @@ public interface ExtChartViewMapper {
 
     ChartViewDTO searchOneWithPrivileges(@Param("userId") String userId,@Param("id") String id );
 
+    ChartViewDTO searchOne(@Param("id") String id );
+
     void chartCopyWithPanel(@Param("copyId") String copyId);
 
     void deleteCircleView(@Param("pid") String pid);
 
     void deleteCircleGroup(@Param("pid") String pid);
+
+    List<ChartViewDTO> searchViewsWithPanelId(@Param("panelId") String panelId);
+
+    ChartViewDTO searchOneFromCache(@Param("id") String id );
+
+    void copyToCache(@Param("id") String id );
+
+    void deleteCacheWithPanel(@Param("panelId") String panelId );
+
+    void deleteViewCache(@Param("viewId") String viewId );
+
+    void copyCacheToView(@Param("viewIds") List<String> viewIds );
+
 }
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
index 5f6f9680ee..36dd69100e 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml
@@ -16,22 +16,95 @@
 
     <select id="searchOne" resultMap="BaseResultMapDTO">
         select
-        id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time,
-        style_priority,x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot
-        from chart_view
-        <where>
-            <if test="sceneId != null">
-                and scene_id = #{sceneId,jdbcType=VARCHAR}
-            </if>
-            <if test="id != null">
-                and id = #{id,jdbcType=VARCHAR}
-            </if>
-        </where>
-        <if test="sort != null">
-            order by ${sort}
-        </if>
+        chart_view.*
+        from chart_view where id = #{id}
     </select>
 
+    <select id="searchOneFromCache" resultMap="BaseResultMapDTO">
+        select
+        chart_view_cache.*
+        from chart_view_cache where id = #{id}
+    </select>
+
+    <insert id="copyToCache">
+        INSERT INTO chart_view_cache (
+            id,
+            `name`,
+            title,
+            scene_id,
+            table_id,
+            `type`,
+            render,
+            result_count,
+            result_mode,
+            create_by,
+            create_time,
+            update_time,
+            style_priority,
+            chart_type,
+            is_plugin,
+            x_axis,
+            x_axis_ext,
+            y_axis,
+            y_axis_ext,
+            ext_stack,
+            ext_bubble,
+            custom_attr,
+            custom_style,
+            custom_filter,
+            drill_fields,
+            senior,
+            SNAPSHOT
+            ) SELECT
+            id,
+            `name`,
+            title,
+            scene_id,
+            table_id,
+            `type`,
+            render,
+            result_count,
+            result_mode,
+            create_by,
+            create_time,
+            update_time,
+            style_priority,
+            chart_type,
+            is_plugin,
+            x_axis,
+            x_axis_ext,
+            y_axis,
+            y_axis_ext,
+            ext_stack,
+            ext_bubble,
+            custom_attr,
+            custom_style,
+            custom_filter,
+            drill_fields,
+            senior,
+        SNAPSHOT  from chart_view
+        WHERE
+            chart_view.id   = #{id}
+    </insert>
+
+<!--    <select id="searchOne" resultMap="BaseResultMapDTO">-->
+<!--        select-->
+<!--        id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time,-->
+<!--        style_priority,x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot-->
+<!--        from chart_view-->
+<!--        <where>-->
+<!--            <if test="sceneId != null">-->
+<!--                and scene_id = #{sceneId,jdbcType=VARCHAR}-->
+<!--            </if>-->
+<!--            <if test="id != null">-->
+<!--                and id = #{id,jdbcType=VARCHAR}-->
+<!--            </if>-->
+<!--        </where>-->
+<!--        <if test="sort != null">-->
+<!--            order by ${sort}-->
+<!--        </if>-->
+<!--    </select>-->
+
     <select id="search" resultMap="BaseResultMapDTO">
         select
         id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time,
@@ -110,11 +183,11 @@
                                 `chart_type`,
                                 `senior`)
         SELECT #{newChartId},
-               GET_CHART_VIEW_COPY_NAME(#{oldChartId}),
+               `name`,
                #{panelId},
                `table_id`,
                `type`,
-               GET_CHART_VIEW_COPY_NAME(#{oldChartId}),
+               `title`,
                `x_axis`,
                `x_axis_ext`,
                `y_axis`,
@@ -135,7 +208,7 @@
                `result_mode`,
                'private',
                `senior`
-        FROM chart_view
+        FROM chart_view_cache
         WHERE id = #{oldChartId}
     </insert>
 
@@ -261,4 +334,64 @@
         cids
         )
     </delete>
+
+
+    <select id="searchViewsWithPanelId"  resultMap="BaseResultMapDTO">
+        SELECT * FROM chart_view
+        WHERE
+            id IN (
+            SELECT
+                chart_view_id
+            FROM
+                panel_view
+            WHERE
+            panel_id = #{panelId}
+            )
+    </select>
+
+    <delete id="deleteCacheWithPanel">
+        DELETE cvc
+        FROM
+            chart_view_cache cvc
+            INNER JOIN panel_view pv ON cvc.id = pv.chart_view_id
+        WHERE
+            pv.panel_id = #{panelId}
+	</delete>
+    <delete id="deleteViewCache">
+        delete from chart_view_cache where id = #{viewId}
+	</delete>
+
+    <update id="copyCacheToView">
+        UPDATE chart_view cv,
+            chart_view_cache cve
+            SET cv.`name` = cve.`name`,
+            cv.title = cve.title,
+            cv.scene_id = cve.scene_id,
+            cv.table_id = cve.table_id,
+            cv.`type` = cve.`type`,
+            cv.render = cve.render,
+            cv.result_count = cve.result_count,
+            cv.result_mode = cve.result_mode,
+            cv.create_by = cve.create_by,
+            cv.create_time = cve.create_time,
+            cv.update_time = cve.update_time,
+            cv.style_priority = cve.style_priority,
+            cv.chart_type = cve.chart_type,
+            cv.is_plugin = cve.is_plugin,
+            cv.x_axis = cve.x_axis,
+            cv.x_axis_ext = cve.x_axis_ext,
+            cv.y_axis = cve.y_axis,
+            cv.y_axis_ext = cve.y_axis_ext,
+            cv.ext_stack = cve.ext_stack,
+            cv.ext_bubble = cve.ext_bubble,
+            cv.custom_attr = cve.custom_attr,
+            cv.custom_style = cve.custom_style,
+            cv.custom_filter = cve.custom_filter,
+            cv.drill_fields = cve.drill_fields,
+           cv.senior = cve.senior,
+        cv.SNAPSHOT = cve.SNAPSHOT where cve.id = cv.id  and cv.id in
+        <foreach collection="viewIds" item="viewId" open='(' separator=',' close=')'>
+            #{viewId}
+        </foreach>
+    </update>
 </mapper>
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.java
index bca5c5202b..5110460776 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.java
@@ -2,6 +2,7 @@ package io.dataease.base.mapper.ext;
 
 import io.dataease.controller.request.dataset.DataSetTableRequest;
 import io.dataease.dto.dataset.DataSetTableDTO;
+import org.apache.ibatis.annotations.Param;
 
 import java.util.List;
 
@@ -10,4 +11,6 @@ public interface ExtDataSetTableMapper {
 
     DataSetTableDTO searchOne(DataSetTableRequest request);
 
+    List<DataSetTableDTO> searchDataSetTableWithPanelId(@Param("panelId") String panelId, @Param("userId") String userId);
+
 }
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml
index 91abf6daea..fe1bd89034 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSetTableMapper.xml
@@ -100,4 +100,27 @@
         ORDER BY CONVERT(`name` using gbk)
     </select>
 
+
+    <select id="searchDataSetTableWithPanelId" resultMap="BaseResultMapDTO">
+        select
+        id, `name`, scene_id, data_source_id, `type`, `mode`,`info`, create_by, create_time,
+        get_auths(id,'dataset',#{userId}) as `privileges`
+        from dataset_table
+        where id in (
+        SELECT
+            table_id
+        FROM
+            chart_view
+        WHERE
+            id IN (
+            SELECT
+                chart_view_id
+            FROM
+                panel_view
+            WHERE
+            panel_id = #{panelId}
+            )
+        )
+    </select>
+
 </mapper>
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
index a0ea1417e8..000f0fe2a3 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java
@@ -15,12 +15,16 @@ public interface ExtPanelGroupMapper {
     //会级联删除pid 下的所有数据
     int deleteCircle(@Param("pid") String pid);
 
+    int deleteCircleView(@Param("pid") String pid);
+
+    int deleteCircleViewCache(@Param("pid") String pid);
+
     PanelGroupDTO findOneWithPrivileges(@Param("panelId") String panelId,@Param("userId") String userId);
 
     void copyPanelView(@Param("pid") String panelId);
 
     //移除未使用的视图
-    void removeUselessViews(@Param("panelId") String panelId);
+    void removeUselessViews(@Param("panelId") String panelId,@Param("viewIds") List<String> viewIds);
 
     List<PanelGroupDTO> panelGroupInit();
 
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
index 07d97f2935..cf0db400c8 100644
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
@@ -171,6 +171,14 @@
         delete from panel_group where FIND_IN_SET(panel_group.id,GET_PANEL_GROUP_WITH_CHILDREN(#{pid})) or FIND_IN_SET(panel_group.source,GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
     </delete>
 
+    <delete id="deleteCircleView">
+        delete from chart_view where FIND_IN_SET(chart_view.scene_id,GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+    </delete>
+
+    <delete id="deleteCircleViewCache">
+        delete from chart_view_cache where FIND_IN_SET(chart_view_cache.scene_id,GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
+    </delete>
+
     <insert id="copyPanelView">
     INSERT INTO panel_view ( id, panel_id, chart_view_id ) SELECT
     uuid(),
@@ -189,14 +197,13 @@
         WHERE
             chart_view.chart_type = 'private'
             AND chart_view.scene_id = #{panelId}
-            AND id NOT IN (
-            SELECT
-                panel_view.chart_view_id
-            FROM
-                panel_view
-            WHERE
-                panel_view.panel_id = #{panelId}
-            )
+        <if test="viewIds != null and viewIds.size>0">
+            AND id NOT IN
+            <foreach collection="viewIds" item="viewId" open="(" separator="," close=")" >
+                #{viewId}
+            </foreach>
+        </if>
+
     </delete>
 
 </mapper>
diff --git a/backend/src/main/java/io/dataease/commons/condition/RedisStatusCondition.java b/backend/src/main/java/io/dataease/commons/condition/RedisStatusCondition.java
new file mode 100644
index 0000000000..ad23200b57
--- /dev/null
+++ b/backend/src/main/java/io/dataease/commons/condition/RedisStatusCondition.java
@@ -0,0 +1,23 @@
+package io.dataease.commons.condition;
+
+import io.dataease.commons.utils.CommonBeanFactory;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.context.annotation.Condition;
+import org.springframework.context.annotation.ConditionContext;
+import org.springframework.core.env.Environment;
+import org.springframework.core.type.AnnotatedTypeMetadata;
+
+public class RedisStatusCondition implements Condition {
+
+    private static final String DEFAULT_TYPE = "ehcache";
+    private static final String TARGET_TYPE = "redis";
+    private static final String TYPE_KEY = "spring.cache.type";
+
+    @Override
+    public boolean matches(ConditionContext context, AnnotatedTypeMetadata metadata) {
+        Environment environment = context.getEnvironment();
+        String ehcacheType = environment.getProperty(TYPE_KEY, String.class, DEFAULT_TYPE);
+
+        return StringUtils.equals(TARGET_TYPE, ehcacheType);
+    }
+}
diff --git a/backend/src/main/java/io/dataease/commons/constants/CommonConstants.java b/backend/src/main/java/io/dataease/commons/constants/CommonConstants.java
index 2c16a2b72e..88c87e6db5 100644
--- a/backend/src/main/java/io/dataease/commons/constants/CommonConstants.java
+++ b/backend/src/main/java/io/dataease/commons/constants/CommonConstants.java
@@ -43,6 +43,10 @@ public class CommonConstants {
 
         // 仪表板
         public static final String PANEL = "panel";
+
+        // 仪表板编辑
+        public static final String PANEL_EDIT = "panel_edit";
+
     }
 
     //视图数据查询模式
@@ -54,4 +58,15 @@ public class CommonConstants {
         // 自定义
         public static final String CUSTOM = "custom";
     }
+
+    //视图数据查询来源
+    public static final class VIEW_EDIT_FROM {
+
+        // 仪表板
+        public static final String PANEL = "panel";
+
+        // 仪表板编辑
+        public static final String CACHE = "cache";
+
+    }
 }
diff --git a/backend/src/main/java/io/dataease/config/RedisConfig.java b/backend/src/main/java/io/dataease/config/RedisConfig.java
new file mode 100644
index 0000000000..c3778545bc
--- /dev/null
+++ b/backend/src/main/java/io/dataease/config/RedisConfig.java
@@ -0,0 +1,27 @@
+package io.dataease.config;
+
+
+import io.dataease.commons.condition.RedisStatusCondition;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Conditional;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.data.redis.connection.RedisConnectionFactory;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
+
+
+
+@Configuration
+public class RedisConfig {
+
+    @Conditional({RedisStatusCondition.class})
+    @Bean
+    public RedisTemplate<Object, Object> redisTemplate(RedisConnectionFactory factory) {
+        RedisTemplate<Object, Object> redisTemplate = new RedisTemplate<>();
+        redisTemplate.setConnectionFactory(factory);
+        Jackson2JsonRedisSerializer<Object> serializer = new Jackson2JsonRedisSerializer<Object>(Object.class);
+        redisTemplate.setDefaultSerializer(serializer);
+        return redisTemplate;
+    }
+
+}
diff --git a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
index 8e0501338b..f6c2edeeb2 100644
--- a/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
+++ b/backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
@@ -3,11 +3,13 @@ package io.dataease.controller.chart;
 import com.github.xiaoymin.knife4j.annotations.ApiSupport;
 import io.dataease.auth.annotation.DePermission;
 import io.dataease.auth.annotation.DePermissionProxy;
+import io.dataease.base.domain.ChartViewCacheWithBLOBs;
 import io.dataease.base.domain.ChartViewWithBLOBs;
 import io.dataease.commons.constants.DePermissionType;
 import io.dataease.commons.constants.ResourceAuthLevel;
 import io.dataease.controller.request.chart.ChartCalRequest;
 import io.dataease.controller.request.chart.ChartExtRequest;
+import io.dataease.controller.request.chart.ChartViewCacheRequest;
 import io.dataease.controller.request.chart.ChartViewRequest;
 import io.dataease.controller.response.ChartDetail;
 import io.dataease.dto.chart.ChartViewDTO;
@@ -35,8 +37,22 @@ public class ChartViewController {
     @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_MANAGE)
     @ApiOperation("保存")
     @PostMapping("/save/{panelId}")
+    public ChartViewDTO save(@PathVariable String panelId, @RequestBody ChartViewCacheRequest request) {
+        return chartViewService.save(request);
+    }
+
+    @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_MANAGE)
+    @ApiOperation("新建视图")
+    @PostMapping("/newOne/{panelId}")
     public ChartViewWithBLOBs save(@PathVariable String panelId, @RequestBody ChartViewWithBLOBs chartViewWithBLOBs) {
-        return chartViewService.save(chartViewWithBLOBs);
+        return chartViewService.newOne(chartViewWithBLOBs);
+    }
+
+    @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_MANAGE)
+    @ApiOperation("保存到缓存表")
+    @PostMapping("/save2Cache/{panelId}")
+    public void save2Cache(@PathVariable String panelId, @RequestBody ChartViewCacheWithBLOBs chartViewWithBLOBs) {
+        chartViewService.save2Cache(chartViewWithBLOBs);
     }
 
     @ApiIgnore
@@ -56,8 +72,8 @@ public class ChartViewController {
     @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_VIEW, paramIndex = 1)
     @ApiOperation("详细信息")
     @PostMapping("/get/{id}/{panelId}")
-    public ChartViewWithBLOBs get(@PathVariable String id, @PathVariable String panelId) {
-        return chartViewService.get(id);
+    public ChartViewDTO get(@PathVariable String id, @PathVariable String panelId,@RequestBody ChartViewRequest viewRequest) {
+        return chartViewService.getOne(id,viewRequest.getQueryFrom());
     }
 
     @ApiIgnore
@@ -117,4 +133,20 @@ public class ChartViewController {
             throws Exception {
         return chartViewService.checkSameDataSet(viewIdSource, viewIdTarget);
     }
+
+    @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_VIEW)
+    @ApiOperation("初始化仪表板视图缓存")
+    @PostMapping("/initViewCache/{panelId}")
+    public void initViewCache(@PathVariable String panelId) {
+        chartViewService.initViewCache(panelId);
+    }
+
+
+    @DePermission(type = DePermissionType.PANEL, level = ResourceAuthLevel.PANNEL_LEVEL_VIEW, paramIndex = 1)
+    @ApiOperation("重置视图缓存")
+    @PostMapping("/resetViewCache/{id}/{panelId}")
+    public void resetViewCache(@PathVariable String id, @PathVariable String panelId) {
+        chartViewService.resetViewCache(id);
+    }
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
index 1c39bf4a55..39360d17aa 100644
--- a/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
@@ -23,6 +23,7 @@ import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
 import java.util.List;
+import java.util.Map;
 
 /**
  * Author: wangjiahao
@@ -92,4 +93,11 @@ public class PanelGroupController {
         return panelGroupService.queryPanelViewTree();
     }
 
+    @ApiOperation("仪表板组件信息")
+    @GetMapping("/queryPanelComponents/{id}")
+    @I18n
+    public Map queryPanelComponents(@PathVariable String id){
+        return panelGroupService.queryPanelComponents(id);
+    }
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
index 31e99d2b83..03ec1abeaa 100644
--- a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
@@ -42,4 +42,5 @@ public class ChartExtRequest {
 
     @ApiModelProperty(hidden = true)
     private PermissionProxy proxy;
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartViewCacheRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartViewCacheRequest.java
new file mode 100644
index 0000000000..0efccb0615
--- /dev/null
+++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartViewCacheRequest.java
@@ -0,0 +1,15 @@
+package io.dataease.controller.request.chart;
+
+import io.dataease.base.domain.ChartViewCacheWithBLOBs;
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2022/3/10
+ * Description:
+ */
+@Data
+public class ChartViewCacheRequest  extends ChartViewCacheWithBLOBs {
+
+    private String savePosition = "cache";
+}
diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartViewRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartViewRequest.java
index ad297454ff..c503157132 100644
--- a/backend/src/main/java/io/dataease/controller/request/chart/ChartViewRequest.java
+++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartViewRequest.java
@@ -16,4 +16,8 @@ public class ChartViewRequest extends ChartViewWithBLOBs {
     private String sort;
     @ApiModelProperty("当前登陆用户ID")
     private String userId;
+    @ApiModelProperty("编辑来源")
+    private String editFrom;
+    @ApiModelProperty("查询来源")
+    private String queryFrom;
 }
diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
index efbe8a0525..e328b3fad6 100644
--- a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
+++ b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
@@ -2,11 +2,13 @@ package io.dataease.dto.panel;
 
 import io.dataease.base.domain.PanelGroupWithBLOBs;
 import io.dataease.commons.model.ITreeBase;
+import io.dataease.dto.chart.ChartViewDTO;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Map;
 
 /**
  * Author: wangjiahao
@@ -31,6 +33,7 @@ public class PanelGroupDTO extends PanelGroupWithBLOBs implements ITreeBase<Pane
     private String sourcePanelName;
     @ApiModelProperty("子节点")
     private List<PanelGroupDTO> children;
-
+    @ApiModelProperty("视图信息")
+    private List<Map<String, ChartViewDTO>> viewsInfo;
 
 }
diff --git a/backend/src/main/java/io/dataease/listener/util/CacheUtils.java b/backend/src/main/java/io/dataease/listener/util/CacheUtils.java
index 443a9dc3fd..913fa42bb4 100644
--- a/backend/src/main/java/io/dataease/listener/util/CacheUtils.java
+++ b/backend/src/main/java/io/dataease/listener/util/CacheUtils.java
@@ -1,30 +1,46 @@
 package io.dataease.listener.util;
 
+import io.dataease.commons.utils.CommonBeanFactory;
 import net.sf.ehcache.Cache;
 import net.sf.ehcache.Element;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.cache.CacheManager;
 import org.springframework.cache.ehcache.EhCacheCacheManager;
-import org.springframework.context.annotation.Configuration;
-import java.util.Date;
+import org.springframework.data.redis.cache.RedisCacheManager;
+import org.springframework.data.redis.core.RedisTemplate;
+import org.springframework.data.redis.core.ValueOperations;
+
+import java.util.Date;
+import java.util.concurrent.TimeUnit;
 
-@Configuration
 public class CacheUtils {
 
-    private static CacheManager manager;
+    private static CacheManager cacheManager;
 
-    @Autowired
-    public void setManager(CacheManager manager) {
-        CacheUtils.manager = manager;
+
+    private static CacheManager getCacheManager() {
+        if (cacheManager == null)
+            cacheManager = CommonBeanFactory.getBean(CacheManager.class);
+        return cacheManager;
     }
 
     public static Object get(String cacheName, Object key) {
+        if (getCacheManager() instanceof RedisCacheManager) {
+            org.springframework.cache.Cache cache = getCacheManager().getCache(cacheName);
+            if (null == cache) return null;
+            return cache.get(key);
+        }
         Element element = cache(cacheName).get(key);
         if (null == element) return null;
         return element.getObjectValue();
     }
 
     public static void put(String cacheName, Object key, Object value, Integer ttl, Integer tti) {
+        if (getCacheManager() instanceof RedisCacheManager) {
+            RedisTemplate redisTemplate = (RedisTemplate) CommonBeanFactory.getBean("redisTemplate");
+            ValueOperations valueOperations = redisTemplate.opsForValue();
+            valueOperations.setIfPresent(cacheName + "::" + key , value );
+            return;
+        }
         Element e = new Element(key, value);
         //不设置则使用xml配置
         if (ttl != null) {
@@ -33,19 +49,35 @@ public class CacheUtils {
         }
         if (tti != null)
             e.setTimeToIdle(tti);
-        cache(cacheName).put(e);
+        Cache cache = cache(cacheName);
+        if (null != cache)
+            cache.put(e);
     }
 
     public static boolean remove(String cacheName, Object key) {
+        if (getCacheManager() instanceof RedisCacheManager) {
+            org.springframework.cache.Cache cache = getCacheManager().getCache(cacheName);
+            if (null == cache) return false;
+            return cache.evictIfPresent(key);
+        }
         return cache(cacheName).remove(key);
     }
 
     public static void removeAll(String cacheName) {
+        if (getCacheManager() instanceof RedisCacheManager) {
+            org.springframework.cache.Cache cache = getCacheManager().getCache(cacheName);
+            if (null == cache) return;
+            cache.clear();
+            return;
+        }
         cache(cacheName).removeAll();
     }
 
     private static Cache cache(String cacheName) {
-        net.sf.ehcache.CacheManager cacheManager = ((EhCacheCacheManager) manager).getCacheManager();
+        if (getCacheManager() instanceof RedisCacheManager) {
+            return null;
+        }
+        net.sf.ehcache.CacheManager cacheManager = ((EhCacheCacheManager) getCacheManager()).getCacheManager();
         if (!cacheManager.cacheExists(cacheName))
             cacheManager.addCache(cacheName);
         Cache cacheManagerCache = cacheManager.getCache(cacheName);
@@ -57,6 +89,12 @@ public class CacheUtils {
         long exp = (time - System.currentTimeMillis()) / 1000;
         int intExp = (int)exp;
         removeAll("lic_info");
+        if (getCacheManager() instanceof RedisCacheManager) {
+            RedisTemplate redisTemplate = (RedisTemplate) CommonBeanFactory.getBean("redisTemplate");
+            ValueOperations valueOperations = redisTemplate.opsForValue();
+            valueOperations.set("lic_info::lic", "lic", exp, TimeUnit.SECONDS);
+            return;
+        }
         put("lic_info", "lic", "lic", intExp, intExp);
     }
 }
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 d5c70d5d4f..69778f5f6e 100644
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@@ -5,6 +5,7 @@ import com.google.gson.reflect.TypeToken;
 import io.dataease.auth.entity.SysUserEntity;
 import io.dataease.auth.service.AuthUserService;
 import io.dataease.base.domain.*;
+import io.dataease.base.mapper.ChartViewCacheMapper;
 import io.dataease.base.mapper.ChartViewMapper;
 import io.dataease.base.mapper.ext.ExtChartGroupMapper;
 import io.dataease.base.mapper.ext.ExtChartViewMapper;
@@ -37,6 +38,7 @@ import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
 import java.math.BigDecimal;
@@ -72,29 +74,70 @@ public class ChartViewService {
     private AuthUserService authUserService;
     @Resource
     private EngineService engineService;
+    @Resource
+    private ChartViewCacheMapper chartViewCacheMapper;
 
     //默认使用非公平
     private ReentrantLock lock = new ReentrantLock();
 
-    public ChartViewWithBLOBs save(ChartViewWithBLOBs chartView) {
-        checkName(chartView);
+    // 直接保存统一到缓存表
+    public ChartViewDTO save(ChartViewCacheRequest chartView) {
         long timestamp = System.currentTimeMillis();
         chartView.setUpdateTime(timestamp);
-        if (ObjectUtils.isEmpty(chartView.getId())) {
-            chartView.setId(UUID.randomUUID().toString());
-            chartView.setCreateBy(AuthUtils.getUser().getUsername());
-            chartView.setCreateTime(timestamp);
-            chartView.setUpdateTime(timestamp);
-            chartViewMapper.insertSelective(chartView);
-        } else {
-            chartViewMapper.updateByPrimaryKeySelective(chartView);
-        }
+        chartViewCacheMapper.updateByPrimaryKeySelective(chartView);
         Optional.ofNullable(chartView.getId()).ifPresent(id -> {
             CacheUtils.remove(JdbcConstants.VIEW_CACHE_KEY, id);
         });
-        return getOneWithPermission(chartView.getId());
+        return getOne(chartView.getId(),"panel_edit");
     }
 
+
+    public ChartViewWithBLOBs newOne(ChartViewWithBLOBs chartView) {
+        long timestamp = System.currentTimeMillis();
+        chartView.setUpdateTime(timestamp);
+        chartView.setId(UUID.randomUUID().toString());
+        chartView.setCreateBy(AuthUtils.getUser().getUsername());
+        chartView.setCreateTime(timestamp);
+        chartView.setUpdateTime(timestamp);
+        chartViewMapper.insertSelective(chartView);
+        // 新建的视图也存入缓存表中
+        extChartViewMapper.copyToCache(chartView.getId());
+
+        return chartView;
+    }
+
+
+    // 直接保存统一到缓存表
+    public void save2Cache(ChartViewCacheWithBLOBs chartView) {
+        long timestamp = System.currentTimeMillis();
+        chartView.setUpdateTime(timestamp);
+        chartViewCacheMapper.updateByPrimaryKeySelective(chartView);
+        Optional.ofNullable(chartView.getId()).ifPresent(id -> {
+            CacheUtils.remove(JdbcConstants.VIEW_CACHE_KEY, id);
+        });
+    }
+
+
+//    // 直接保存统一到缓存表
+//    public ChartViewWithBLOBs save(ChartViewRequest chartView) {
+//        checkName(chartView);
+//        long timestamp = System.currentTimeMillis();
+//        chartView.setUpdateTime(timestamp);
+//        if (ObjectUtils.isEmpty(chartView.getId())) {
+//            chartView.setId(UUID.randomUUID().toString());
+//            chartView.setCreateBy(AuthUtils.getUser().getUsername());
+//            chartView.setCreateTime(timestamp);
+//            chartView.setUpdateTime(timestamp);
+//            chartViewMapper.insertSelective(chartView);
+//        } else {
+//            chartViewMapper.updateByPrimaryKeySelective(chartView);
+//        }
+//        Optional.ofNullable(chartView.getId()).ifPresent(id -> {
+//            CacheUtils.remove(JdbcConstants.VIEW_CACHE_KEY, id);
+//        });
+//        return getOneWithPermission(chartView.getId());
+//    }
+
     public List<ChartViewDTO> list(ChartViewRequest chartViewRequest) {
         chartViewRequest.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
         return extChartViewMapper.search(chartViewRequest);
@@ -179,6 +222,22 @@ public class ChartViewService {
         return extChartViewMapper.searchOneWithPrivileges(userId, id);
     }
 
+    @Transactional
+    public ChartViewDTO getOne(String id,String queryFrom){
+        ChartViewDTO result;
+        //仪表板编辑页面 从缓存表中取数据 缓存表中没有数据则进行插入
+        if(CommonConstants.VIEW_QUERY_FROM.PANEL_EDIT.equals(queryFrom)){
+            result=  extChartViewMapper.searchOneFromCache(id);
+            if(result == null){
+                extChartViewMapper.copyToCache(id);
+                result = extChartViewMapper.searchOneFromCache(id);
+            }
+        }else{
+            result = extChartViewMapper.searchOne(id);
+        }
+        return result;
+    }
+
     public void delete(String id) {
         chartViewMapper.deleteByPrimaryKey(id);
     }
@@ -190,7 +249,7 @@ public class ChartViewService {
     }
 
     public ChartViewDTO getData(String id, ChartExtRequest request) throws Exception {
-        ChartViewDTO view = this.getOneWithPermission(id);
+        ChartViewDTO view = this.getOne(id,request.getQueryFrom());
         // 如果是从仪表板获取视图数据，则仪表板的查询模式，查询结果的数量，覆盖视图对应的属性
         if (CommonConstants.VIEW_QUERY_FROM.PANEL.equals(request.getQueryFrom()) && CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
             view.setResultMode(request.getResultMode());
@@ -1685,6 +1744,7 @@ public class ChartViewService {
     public String chartCopy(String id, String panelId) {
         String newChartId = UUID.randomUUID().toString();
         extChartViewMapper.chartCopy(newChartId, id, panelId);
+        extChartViewMapper.copyToCache(newChartId);
         return newChartId;
     }
 
@@ -1713,4 +1773,14 @@ public class ChartViewService {
             }
         }
     }
+
+    public  void initViewCache(String panelId){
+        extChartViewMapper.deleteCacheWithPanel(panelId);
+    }
+
+    public void resetViewCache (String viewId){
+        extChartViewMapper.deleteViewCache(viewId);
+
+        extChartViewMapper.copyToCache(viewId);
+    }
 }
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index d117cf443d..64ade01908 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -51,7 +51,9 @@ import org.springframework.transaction.annotation.Transactional;
 import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
-import java.io.*;
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.InputStream;
 import java.math.BigDecimal;
 import java.text.MessageFormat;
 import java.text.NumberFormat;
@@ -1182,6 +1184,14 @@ public class DataSetTableService {
                 DEException.throwException(
                         Translator.get("i18n_custom_ds_delete") + String.format(":table id [%s]", tableId));
             }
+            CurrentUserDto user = AuthUtils.getUser();
+            if (user != null && !user.getIsAdmin()) {
+                DataSetTableDTO withPermission = getWithPermission(datasetTable.getId(), user.getUserId());
+                if (ObjectUtils.isEmpty(withPermission.getPrivileges()) || !withPermission.getPrivileges().contains("use")) {
+                    DEException.throwException(
+                            Translator.get("i18n_dataset_no_permission") + String.format(":table name [%s]", withPermission.getName()));
+                }
+            }
             List<DatasetTableField> fields = dataSetTableFieldsService.getListByIdsEach(unionDTO.getCurrentDsField());
 
             String[] array = fields.stream()
@@ -1310,6 +1320,14 @@ public class DataSetTableService {
                 DEException.throwException(
                         Translator.get("i18n_custom_ds_delete") + String.format(":table id [%s]", tableId));
             }
+            CurrentUserDto user = AuthUtils.getUser();
+            if (user != null && !user.getIsAdmin()) {
+                DataSetTableDTO withPermission = getWithPermission(datasetTable.getId(), user.getUserId());
+                if (ObjectUtils.isEmpty(withPermission.getPrivileges()) || !withPermission.getPrivileges().contains("use")) {
+                    DEException.throwException(
+                            Translator.get("i18n_dataset_no_permission") + String.format(":table name [%s]", withPermission.getName()));
+                }
+            }
             List<DatasetTableField> fields = dataSetTableFieldsService.getListByIdsEach(unionDTO.getCurrentDsField());
 
             String[] array = fields.stream()
diff --git a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
index 81cfe76173..a53d283dd6 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
@@ -14,14 +14,17 @@ import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.LogUtil;
 import io.dataease.commons.utils.TreeUtils;
 import io.dataease.controller.request.authModel.VAuthModelRequest;
+import io.dataease.controller.request.dataset.DataSetTableRequest;
 import io.dataease.controller.request.panel.PanelGroupRequest;
 import io.dataease.dto.authModel.VAuthModelDTO;
 import io.dataease.dto.chart.ChartViewDTO;
+import io.dataease.dto.dataset.DataSetTableDTO;
 import io.dataease.dto.panel.PanelGroupDTO;
 import io.dataease.dto.panel.linkJump.PanelLinkJumpBaseRequest;
 import io.dataease.exception.DataEaseException;
 import io.dataease.i18n.Translator;
 import io.dataease.service.chart.ChartViewService;
+import io.dataease.service.dataset.DataSetTableService;
 import io.dataease.service.sys.SysAuthService;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -33,10 +36,7 @@ import org.springframework.transaction.annotation.Transactional;
 import org.springframework.util.Assert;
 
 import javax.annotation.Resource;
-import java.util.ArrayList;
-import java.util.List;
-import java.util.Optional;
-import java.util.UUID;
+import java.util.*;
 import java.util.stream.Collectors;
 
 /**
@@ -81,6 +81,11 @@ public class PanelGroupService {
     private ExtPanelViewLinkageMapper extPanelViewLinkageMapper;
     @Resource
     private ExtChartViewMapper extChartViewMapper;
+    @Resource
+    private ExtDataSetTableMapper extDataSetTableMapper;
+    @Resource
+    private DataSetTableService dataSetTableService;
+
 
     public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
         String userId = String.valueOf(AuthUtils.getUser().getUserId());
@@ -99,14 +104,11 @@ public class PanelGroupService {
     @DeCleaner(DePermissionType.PANEL)
 //    @Transactional
     public PanelGroup saveOrUpdate(PanelGroupRequest request) {
-        try {
-            Boolean mobileLayout = panelViewService.syncPanelViews(request);
-            request.setMobileLayout(mobileLayout);
-        } catch (Exception e) {
-            e.printStackTrace();
-            LOGGER.error("更新panelView出错panelId：{}", request.getId());
-        }
         String panelId = request.getId();
+        List<String> viewIds = null;
+        if(StringUtils.isNotEmpty(panelId)){
+            viewIds = panelViewService.syncPanelViews(request);
+        }
         if (StringUtils.isEmpty(panelId)) {
             // 新建
             checkPanelName(request.getName(), request.getPid(), PanelConstants.OPT_TYPE_INSERT, null, request.getNodeType());
@@ -164,7 +166,7 @@ public class PanelGroupService {
         }
 
         //移除没有用到的仪表板私有视图
-        extPanelGroupMapper.removeUselessViews(panelId);
+        extPanelGroupMapper.removeUselessViews(panelId,viewIds);
         return panelGroupDTOList.get(0);
     }
 
@@ -187,12 +189,18 @@ public class PanelGroupService {
     public void deleteCircle(String id) {
         Assert.notNull(id, "id cannot be null");
         sysAuthService.checkTreeNoManageCount("panel", id);
+
+        //清理view 和 view cache
+        extPanelGroupMapper.deleteCircleView(id);
+        extPanelGroupMapper.deleteCircleViewCache(id);
+
         // 同时会删除对应默认仪表盘
         extPanelGroupMapper.deleteCircle(id);
         storeService.removeByPanelId(id);
         shareService.delete(id, null);
         panelLinkService.deleteByResourceId(id);
 
+
         //清理跳转信息
         extPanelLinkJumpMapper.deleteJumpTargetViewInfoWithPanel(id);
         extPanelLinkJumpMapper.deleteJumpInfoWithPanel(id);
@@ -341,4 +349,42 @@ public class PanelGroupService {
         LogUtil.info("=====v1.8版本 仪表板私有化【结束】=====");
     }
 
+    // 获取仪表板的视图信息
+    public Map queryPanelComponents(String panelId) {
+        try {
+            Map result, tableWithFields, viewWithViewInfo, tableWithTableInfo;
+            //查找所有view
+            List<ChartViewDTO> views = extChartViewMapper.searchViewsWithPanelId(panelId);
+            viewWithViewInfo = views.stream().collect(Collectors.toMap(ChartViewDTO::getId, ChartViewDTO -> ChartViewDTO));
+            //查找所有dataset
+            List<DataSetTableDTO> tables = extDataSetTableMapper.searchDataSetTableWithPanelId(panelId, String.valueOf(AuthUtils.getUser().getUserId()));
+            tableWithTableInfo = tables.stream().collect(Collectors.toMap(DataSetTableDTO::getId, DataSetTableDTO -> DataSetTableDTO));
+            //查找所有datasetFields
+            tableWithFields = new HashMap();
+            if (CollectionUtils.isNotEmpty(tables)) {
+                for (DataSetTableDTO table : tables) {
+                    DataSetTableRequest dataSetTableRequest = new DataSetTableRequest();
+                    dataSetTableRequest.setId(table.getId());
+                    Map<String, List<DatasetTableField>> tableDataSetFields = dataSetTableService.getFieldsFromDE(dataSetTableRequest);
+                    tableWithFields.put(table.getId(), tableDataSetFields);
+                }
+            }
+
+            result = new HashMap();
+            result.put("tableWithFields", tableWithFields);
+            result.put("viewWithViewInfo", viewWithViewInfo);
+            result.put("tableWithTableInfo", tableWithTableInfo);
+            return result;
+        } catch (Exception e) {
+            e.printStackTrace();
+            LogUtil.error(e);
+        }
+        return null;
+    }
+
+    public void findPanelAttachInfo(String panelId) {
+
+    }
+
+
 }
diff --git a/backend/src/main/java/io/dataease/service/panel/PanelViewService.java b/backend/src/main/java/io/dataease/service/panel/PanelViewService.java
index 9351ddd953..ed54cc93c9 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelViewService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelViewService.java
@@ -7,6 +7,7 @@ import io.dataease.base.domain.PanelGroupWithBLOBs;
 import io.dataease.base.domain.PanelView;
 import io.dataease.base.domain.PanelViewExample;
 import io.dataease.base.mapper.PanelViewMapper;
+import io.dataease.base.mapper.ext.ExtChartViewMapper;
 import io.dataease.base.mapper.ext.ExtPanelViewMapper;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.BeanUtils;
@@ -39,6 +40,9 @@ public class PanelViewService {
     @Resource
     private PanelViewMapper panelViewMapper;
 
+    @Resource
+    private ExtChartViewMapper extChartViewMapper;
+
     private final static String SCENE_TYPE = "scene";
 
     public List<PanelViewDto> groups() {
@@ -80,7 +84,8 @@ public class PanelViewService {
     }
 
     @Transactional(propagation = Propagation.REQUIRES_NEW)
-    public Boolean syncPanelViews(PanelGroupWithBLOBs panelGroup) {
+    public List<String> syncPanelViews(PanelGroupWithBLOBs panelGroup) {
+        List<String> viewIds = new ArrayList<>();
         Boolean mobileLayout = null;
         String panelId = panelGroup.getId();
         Assert.notNull(panelId, "panelId cannot be null");
@@ -115,9 +120,14 @@ public class PanelViewService {
             extPanelViewMapper.deleteWithPanelId(panelId);
             if (CollectionUtils.isNotEmpty(panelViewInsertDTOList)) {
                 extPanelViewMapper.savePanelView(panelViewInsertDTOList);
+                //将视图从cache表中更新到正式表中
+                viewIds = panelViewInsertDTOList.stream().map(panelView ->panelView.getChartViewId()).collect(Collectors.toList());
+                extChartViewMapper.copyCacheToView(viewIds);
+                extChartViewMapper.deleteCacheWithPanel(panelId);
             }
         }
-        return mobileLayout;
+        panelGroup.setMobileLayout(mobileLayout);
+        return viewIds;
     }
 
     public List<PanelViewTableDTO> detailList(String panelId) {
diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
index fdb33ea352..df130211f2 100644
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -61,13 +61,14 @@ quartz.scheduler-name=deServerJob
 spring.servlet.multipart.max-file-size=500MB
 spring.servlet.multipart.max-request-size=500MB
 # actuator
-management.server.port=8083
-management.endpoints.web.exposure.include=*
+management.health.redis.enabled=false
+#management.server.port=8083
+#management.endpoints.web.exposure.include=*
 #spring.freemarker.checkTemplateLocation=false
 #RSA非对称加密参数：私钥
 rsa.private_key=MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEA0vfvyTdGJkdbHkB8mp0f3FE0GYP3AYPaJF7jUd1M0XxFSE2ceK3k2kw20YvQ09NJKk+OMjWQl9WitG9pB6tSCQIDAQABAkA2SimBrWC2/wvauBuYqjCFwLvYiRYqZKThUS3MZlebXJiLB+Ue/gUifAAKIg1avttUZsHBHrop4qfJCwAI0+YRAiEA+W3NK/RaXtnRqmoUUkb59zsZUBLpvZgQPfj1MhyHDz0CIQDYhsAhPJ3mgS64NbUZmGWuuNKp5coY2GIj/zYDMJp6vQIgUueLFXv/eZ1ekgz2Oi67MNCk5jeTF2BurZqNLR3MSmUCIFT3Q6uHMtsB9Eha4u7hS31tj1UWE+D+ADzp59MGnoftAiBeHT7gDMuqeJHPL4b+kC+gzV4FGTfhR9q3tTbklZkD2A==
 rsa.public_key=MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ==
-spring.cache.type=ehcache
+#spring.cache.type=ehcache
 spring.cache.ehcache.config=classpath:/ehcache/ehcache.xml
 #打印URL路径
 #logging.level.org.springframework.web=trace
@@ -85,6 +86,32 @@ server.compression.enabled=true
 server.compression.mime-types=application/javascript,text/css,application/json,application/xml,text/html,text/xml,text/plain
 server.compression.min-response-size=1024
 
+#下面的配置新增到/opt/dataease/conf/dataease/properties
+#缓存类型
+##spring.cache.type=redis
+#spring.cache.type=ehcache
+#redis公共配置
+#spring.redis.timeout=10000
+#spring.redis.lettuce.pool.max-active=8
+#spring.redis.lettuce.pool.max-wait=-1
+#spring.redis.lettuce.pool.max-idle=8
+
+#单机模式redis配置
+#spring.redis.database=0
+#spring.redis.host=192.168.0.110
+#spring.redis.port=6379
+#spring.redis.password=DataEase_ZNB@REDIS
+
+#哨兵模式redis配置
+#spring.redis.sentinel.master=mymaster
+#spring.redis.sentinel.nodes=192.168.0.110:26379,192.168.0.110:26380,192.168.0.110:26381
+#spring.redis.sentinel.password=
+
+#cluster模式redis配置
+#spring.redis.cluster.nodes=192.168.0.110:7001,192.168.0.110:7002,192.168.0.110:7003,192.168.0.110:7004,192.168.0.110:7005,192.168.0.110:7006
+#spring.redis.cluster.max-redirects=3
+#spring.redis.password=DataEase_ZNB@REDIS
+
 
 
 
diff --git a/backend/src/main/resources/db/migration/V33__1.9.sql b/backend/src/main/resources/db/migration/V33__1.9.sql
index d182498b0b..7694874363 100644
--- a/backend/src/main/resources/db/migration/V33__1.9.sql
+++ b/backend/src/main/resources/db/migration/V33__1.9.sql
@@ -1,2 +1,35 @@
 ALTER TABLE `chart_view` ADD COLUMN `senior` LONGTEXT COMMENT '高级' AFTER `drill_fields`;
 UPDATE `chart_view` SET `senior` = '{}';
+
+CREATE TABLE `chart_view_cache` (
+  `id` varchar(50) NOT NULL COMMENT 'ID',
+  `name` varchar(1024) DEFAULT NULL COMMENT '名称',
+  `title` varchar(1024) DEFAULT NULL COMMENT 'EChart标题',
+  `scene_id` varchar(50) NOT NULL COMMENT '场景ID chart_type为private的时候 是仪表板id',
+  `table_id` varchar(50) NOT NULL COMMENT '数据集表ID',
+  `type` varchar(50) DEFAULT NULL COMMENT '图表类型',
+  `render` varchar(50) DEFAULT NULL COMMENT '视图渲染方式',
+  `result_count` int(10) DEFAULT NULL COMMENT '展示结果',
+  `result_mode` varchar(50) DEFAULT NULL COMMENT '展示模式',
+  `x_axis` longtext COMMENT '横轴field',
+  `x_axis_ext` longtext COMMENT 'table-row',
+  `y_axis` longtext COMMENT '纵轴field',
+  `y_axis_ext` longtext COMMENT '副轴',
+  `ext_stack` longtext COMMENT '堆叠项',
+  `ext_bubble` longtext COMMENT '气泡大小',
+  `custom_attr` longtext COMMENT '图形属性',
+  `custom_style` longtext COMMENT '组件样式',
+  `custom_filter` longtext COMMENT '结果过滤',
+  `drill_fields` longtext COMMENT '钻取字段',
+  `senior` longtext COMMENT '高级',
+  `create_by` varchar(50) DEFAULT NULL COMMENT '创建人ID',
+  `create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
+  `update_time` bigint(13) DEFAULT NULL COMMENT '更新时间',
+  `snapshot` longtext COMMENT '缩略图 ',
+  `style_priority` varchar(255) DEFAULT 'panel' COMMENT '样式优先级 panel 仪表板 view 视图',
+  `chart_type` varchar(255) DEFAULT 'private' COMMENT '视图类型 public 公共 历史可复用的视图，private 私有 专属某个仪表板',
+  `is_plugin` bit(1) DEFAULT NULL COMMENT '是否插件',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+SET FOREIGN_KEY_CHECKS = 1;
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index ad83d89780..d5256f1916 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -63,5 +63,6 @@
         <table tableName="de_engine">
             <columnOverride column="configuration" property="configuration" javaType="java.lang.String"/>
         </table>
+        <table tableName="chart_view_cache"/>
     </context>
 </generatorConfiguration>
diff --git a/frontend/pom.xml b/frontend/pom.xml
index 1ca3d3227d..99ccea975c 100644
--- a/frontend/pom.xml
+++ b/frontend/pom.xml
@@ -6,7 +6,7 @@
   <parent>
     <artifactId>dataease-server</artifactId>
     <groupId>io.dataease</groupId>
-    <version>1.8.0</version>
+    <version>1.9.0</version>
   </parent>
 
   <modelVersion>4.0.0</modelVersion>
diff --git a/frontend/src/api/chart/chart.js b/frontend/src/api/chart/chart.js
index 5d9a956c7e..ef96c7f3e5 100644
--- a/frontend/src/api/chart/chart.js
+++ b/frontend/src/api/chart/chart.js
@@ -1,10 +1,12 @@
 import request from '@/utils/request'
+import store from '@/store'
+import { queryPanelComponents } from '@/api/panel/panel'
 
 export function post(url, data) {
   return request({
     url: url,
     method: 'post',
-    loading: true,
+    loading: false,
     data
   })
 }
@@ -13,7 +15,7 @@ export function getChartTree(data) {
   return request({
     url: 'api',
     method: 'post',
-    loading: true,
+    loading: false,
     data
   })
 }
@@ -38,7 +40,7 @@ export function searchAdviceSceneId(panelId) {
   return request({
     url: '/chart/view/searchAdviceSceneId/' + panelId,
     method: 'get',
-    loading: true
+    loading: false
   })
 }
 
@@ -54,7 +56,7 @@ export function ajaxGetDataOnly(id, panelId, data) {
   return request({
     url: '/chart/view/getData/' + id + '/' + panelId,
     method: 'post',
-    loading: true,
+    loading: false,
     hideMsg: true,
     data
   })
@@ -75,3 +77,34 @@ export function deleteCircle(id) {
   })
 }
 
+export function getChartDetails(id, panelId, data) {
+  return request({
+    url: '/chart/view/get/' + id + '/' + panelId,
+    method: 'post',
+    loading: false,
+    data
+  })
+}
+
+export function save2Cache(panelId, data) {
+  return request({
+    url: '/chart/view/save2Cache/' + panelId,
+    method: 'post',
+    loading: false,
+    data
+  })
+}
+
+export function resetViewCacheCallBack(viewId, panelId, callback) {
+  // 加载仪表板组件视图数据
+  resetViewCache(viewId, panelId).then(rep => {
+    callback(rep)
+  })
+}
+export function resetViewCache(viewId, panelId) {
+  return request({
+    url: '/chart/view/resetViewCache/' + viewId + '/' + panelId,
+    method: 'post',
+    loading: false
+  })
+}
diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js
index 0cb50e64af..17f555d3c5 100644
--- a/frontend/src/api/panel/panel.js
+++ b/frontend/src/api/panel/panel.js
@@ -164,3 +164,28 @@ export function queryPanelViewTree() {
   })
 }
 
+export function initPanelComponentsData(panelId, callback) {
+  // 加载仪表板组件视图数据
+  queryPanelComponents(panelId).then(rep => {
+    store.commit('initPanelComponents', rep.data)
+    callback(rep)
+  })
+}
+
+export function queryPanelComponents(id) {
+  return request({
+    url: 'panel/group/queryPanelComponents/' + id,
+    method: 'get',
+    loading: false
+  })
+}
+
+export function initViewCache(panelId) {
+  // 初始化仪表板视图缓存
+  return request({
+    url: 'chart/view/initViewCache/' + panelId,
+    method: 'post',
+    loading: false
+  })
+}
+
diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 115965c69e..20cb6b3100 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -531,7 +531,7 @@ export default {
         width: this.computedMainSlotWidth,
         height: this.computedMainSlotHeight
       }
-      if (this.element.commonBackground && this.element.commonBackground.enable) {
+      if (this.element.commonBackground&&this.element.commonBackground.enable) {
         if (this.element.commonBackground.backgroundType === 'innerImage') {
           style['background'] = `url(${this.element.commonBackground.innerImage}) no-repeat`
         } else if (this.element.commonBackground.backgroundType === 'outerImage') {
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index d3fd3226f3..d13c4f6910 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -184,22 +184,25 @@ export default {
       // resize
       this.$emit('resizeView')
     },
+    // edit() {
+    //   // 编辑时临时保存 当前修改的画布
+    //   this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+    //   this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+    //   if (this.curComponent.type === 'view') {
+    //     this.$store.dispatch('chart/setViewId', null)
+    //     this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+    //     bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+    //   }
+    //   if (this.curComponent.type === 'custom') {
+    //     bus.$emit('component-dialog-edit')
+    //   }
+    //   // 编辑样式组件
+    //   if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+    //     bus.$emit('component-dialog-style')
+    //   }
+    // },
     edit() {
-      // 编辑时临时保存 当前修改的画布
-      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
-      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
-      if (this.curComponent.type === 'view') {
-        this.$store.dispatch('chart/setViewId', null)
-        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
-      }
-      if (this.curComponent.type === 'custom') {
-        bus.$emit('component-dialog-edit')
-      }
-      // 编辑样式组件
-      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
-        bus.$emit('component-dialog-style')
-      }
+      bus.$emit('change_panel_right_draw', true)
     },
     linkageEdit() {
 
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
index 2c55a62779..c08b8b260c 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -46,23 +46,24 @@ export default {
   ]),
   methods: {
     edit() {
-      // 编辑时临时保存 当前修改的画布
-      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
-      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
-      if (this.curComponent.type === 'view') {
-        this.$store.dispatch('chart/setViewId', null)
-        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
-      }
-      if (this.curComponent.type === 'custom') {
-        bus.$emit('component-dialog-edit')
-      }
-
-      // 编辑样式组件
-
-      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
-        bus.$emit('component-dialog-style')
-      }
+      bus.$emit('change_panel_right_draw', true)
+      // // 编辑时临时保存 当前修改的画布
+      // this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      // this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      // if (this.curComponent.type === 'view') {
+      //   this.$store.dispatch('chart/setViewId', null)
+      //   this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+      //   bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+      // }
+      // if (this.curComponent.type === 'custom') {
+      //   bus.$emit('component-dialog-edit')
+      // }
+      //
+      // // 编辑样式组件
+      //
+      // if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+      //   bus.$emit('component-dialog-style')
+      // }
     },
     lock() {
       this.$store.commit('lock')
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index cd97d64708..62ca0c7aa8 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -57,6 +57,7 @@
       @linkJumpSet="linkJumpSet(item)"
       @boardSet="boardSet(item)"
       @canvasDragging="canvasDragging"
+      @editComponent="editComponent(index,item)"
     >
       <component
         :is="item.component"
@@ -1286,6 +1287,11 @@ export default {
         this.$refs.wrapperChild[index].chartResize()
       }
     },
+    editComponent(index, item) {
+      if (item.type === 'view') {
+        this.$refs.wrapperChild[index].editChart()
+      }
+    },
     handleDragOver(e) {
       this.dragComponentInfo.shadowStyle.x = e.pageX - 220
       this.dragComponentInfo.shadowStyle.y = e.pageY - 90 + this.scrollTop
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 44dc1c9c9f..e383170521 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -62,6 +62,7 @@
       class="table-class"
     />
     <label-normal v-else-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
+    <label-normal-text v-else-if="labelTextShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
     <div style="position: absolute;left: 8px;bottom:8px;">
       <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
     </div>
@@ -90,9 +91,10 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
+import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 export default {
   name: 'UserView',
-  components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: { LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
     element: {
       type: Object,
@@ -184,13 +186,13 @@ export default {
       return this.active && this.inTab && !this.mobileLayoutStatus
     },
     charViewShowFlag() {
-      return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'echarts'
+      return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'echarts'
     },
     charViewG2ShowFlag() {
-      return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
+      return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'antv'
     },
     charViewS2ShowFlag() {
-      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'antv'
     },
     tableShowFlag() {
       return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && this.renderComponent() === 'echarts'
@@ -198,6 +200,9 @@ export default {
     labelShowFlag() {
       return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')
     },
+    labelTextShowFlag() {
+      return this.httpRequest.status && this.chart.type && this.chart.type === 'label'
+    },
     loadingFlag() {
       return (this.canvasStyleData.refreshViewLoading || this.searchCount === 0) && this.requestStatus === 'waiting'
     },
@@ -372,6 +377,9 @@ export default {
       bus.$on('plugin-add-view-track-filter', param => {
         param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
       })
+      bus.$on('view-in-cache', param => {
+        param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
+      })
     },
 
     addViewTrackFilter(linkageParam) {
@@ -431,7 +439,8 @@ export default {
         }
         const requestInfo = {
           ...this.filter,
-          cache: cache
+          cache: cache,
+          queryFrom: this.isEdit ? 'panel_edit' : 'panel'
         }
         if (this.panelInfo.proxy) {
           // method = viewInfo
@@ -711,6 +720,19 @@ export default {
 
     renderComponent() {
       return this.chart.render
+    },
+    getDataEdit(param) {
+      this.$store.state.styleChangeTimes++
+      if (param.type === 'propChange') {
+        this.getData(param.viewId, false)
+      } else if (param.type === 'styleChange') {
+        this.chart.customAttr = param.viewInfo.customAttr
+        this.chart.customStyle = param.viewInfo.customStyle
+        this.chart.senior = param.viewInfo.senior
+        this.sourceCustomAttrStr = this.chart.customAttr
+        this.sourceCustomStyleStr = this.chart.customStyle
+        this.mergeScale()
+      }
     }
   }
 }
diff --git a/frontend/src/icons/svg/label.svg b/frontend/src/icons/svg/label.svg
new file mode 100644
index 0000000000..227ed39c51
--- /dev/null
+++ b/frontend/src/icons/svg/label.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621224495563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7328" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M376.795429 691.2c15.616 0 27.008-10.733714 27.008-27.337143v-46.848h1.316571c20.809143 45.878857 63.451429 74.514286 117.449143 74.514286 88.832 0 147.072-70.619429 147.072-179.620572s-58.569143-179.620571-146.413714-179.620571c-53.028571 0-96 28.964571-116.169143 74.203429h-1.627429v-166.290286c0-17.554286-11.062857-28.946286-27.337143-28.946286-16.274286 0-27.318857 11.373714-27.318857 28.946286v423.68c0 16.914286 10.422857 27.318857 26.020572 27.318857z m490.697142 0.329143c64.091429 0 118.765714-35.145143 137.325715-84.937143 1.938286-5.522286 2.925714-10.733714 2.925714-15.286857 0-13.988571-9.764571-23.753143-23.442286-23.753143-12.361143 0-18.870857 4.882286-26.020571 19.2-17.261714 37.101714-46.537143 57.270857-90.459429 57.270857-63.451429 0-105.106286-50.432-105.106285-131.785143 0-80.694857 41.654857-132.443429 105.106285-132.443428 41.965714 0 72.228571 19.858286 89.782857 57.929143 6.857143 13.659429 13.348571 18.541714 25.398858 18.541714 13.988571 0 23.753143-9.106286 23.753142-23.424 0-3.913143-0.969143-8.777143-2.267428-13.019429-16.274286-49.792-71.917714-87.533714-137.984-87.533714-96.950857 0-160.091429 71.259429-160.091429 180.278857 0 109.659429 63.780571 178.962286 161.078857 178.962286zM116.169143 691.2c49.444571 0 96.310857-27.008 115.84-68.662857h0.969143v42.313143c0.658286 15.926857 11.392 26.678857 26.697143 26.678857 15.597714 0 26.331429-10.733714 26.331428-27.977143v-215.405714c0-70.290286-51.401143-115.529143-133.394286-115.529143-60.854857 0-111.286857 26.697143-130.157714 68.022857-3.584 8.118857-5.851429 15.926857-5.851428 22.765714 0 14.317714 10.404571 23.424 24.722285 23.424 10.093714 0 17.554286-3.584 22.784-12.690285 17.554286-37.412571 45.220571-54.674286 87.204572-54.674286 50.102857 0 79.725714 27.977143 79.725714 73.216v27.337143l-103.808 5.851428C45.531429 491.428571 0 528.201143 0 588.068571 0 650.203429 47.506286 691.2 116.169143 691.2z m394.057143-47.177143c-61.184 0-104.777143-52.388571-104.777143-131.785143 0-79.725714 43.593143-132.114286 104.777143-132.114285 63.104 0 102.802286 51.090286 102.802285 131.785142 0 81.353143-39.68 132.114286-102.820571 132.114286z m-381.037715 1.956572c-43.611429 0-72.905143-23.771429-72.905142-58.898286 0-34.176 27.337143-56.630857 77.769142-60.196572l96.969143-6.180571v33.828571c0 51.419429-45.220571 91.428571-101.851428 91.428572z m700.891429 249.892571a39.168 39.168 0 0 0 39.04-39.058286 39.168 39.168 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.058286 39.04z m154.88 0A39.168 39.168 0 0 0 1024 856.813714c0-21.467429-17.554286-39.04-39.04-39.04-21.485714 0-39.058286 17.572571-39.058286 39.058286 0 21.467429 17.572571 39.04 39.058286 39.04z m-309.76 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z m-154.898286 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.485714 0-39.058286 17.572571-39.058285 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058285-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a39.241143 39.241143 0 0 0 39.350857-39.058286 39.222857 39.222857 0 0 0-78.409142 0c0 21.485714 17.554286 39.058286 39.04 39.058286z m-155.227428 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z" p-id="7329"></path></svg>
+
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 77b002b1c6..7c403d74cd 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1031,6 +1031,7 @@ export default {
     table_align_left: 'Left',
     table_align_center: 'Center',
     table_align_right: 'Right',
+    draw_back: 'Draw Back',
     senior: 'Senior',
     senior_cfg: 'Senior Config',
     function_cfg: 'Function Config',
@@ -1042,7 +1043,23 @@ export default {
     field_fixed: 'Fixed',
     line_type_dotted: 'Dotted',
     value_can_not_empty: 'Value can not be empty',
-    value_error: 'Value illegal'
+    value_error: 'Value illegal',
+    threshold: 'Threshold',
+    threshold_range: 'Range',
+    gauge_threshold_format_error: 'Format Error',
+    total_cfg: 'Total Config',
+    col_cfg: 'Column',
+    row_cfg: 'Row',
+    total_show: 'Total',
+    total_position: 'Position',
+    total_label: 'Alias',
+    sub_total_show: 'Sub Total',
+    total_pos_top: 'Top',
+    total_pos_bottom: 'Bottom',
+    total_pos_left: 'Left',
+    total_pos_right: 'Right',
+    chart_label: 'Label',
+    drag_block_label: 'Label'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
@@ -1591,7 +1608,8 @@ export default {
     uninstall_confirm: 'Comfirm to uninstall the plugin?',
     uninstall_cancel: 'Cancel uninstall plugin',
     setting_background: 'BackGround',
-    setting_jump: 'Jump Setting'
+    setting_jump: 'Jump Setting',
+    select_view: 'Select View'
   },
   display: {
     logo: 'Head system logo',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 1877ab88a2..733a11340a 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1031,6 +1031,7 @@ export default {
     table_align_left: '左對齊',
     table_align_center: '居中',
     table_align_right: '右對齊',
+    draw_back: '收回',
     senior: '高級',
     senior_cfg: '高級設置',
     function_cfg: '功能設置',
@@ -1042,7 +1043,23 @@ export default {
     field_fixed: '固定值',
     line_type_dotted: '點',
     value_can_not_empty: '值不能為空',
-    value_error: '值必須為數值'
+    value_error: '值必須為數值',
+    threshold: '閾值',
+    threshold_range: '閾值區間',
+    gauge_threshold_format_error: '格式錯誤',
+    total_cfg: '總計配置',
+    col_cfg: '列匯總',
+    row_cfg: '行匯總',
+    total_show: '總計',
+    total_position: '位置',
+    total_label: '別名',
+    sub_total_show: '小計',
+    total_pos_top: '頂部',
+    total_pos_bottom: '底部',
+    total_pos_left: '左側',
+    total_pos_right: '右側',
+    chart_label: '文本卡',
+    drag_block_label: '標簽'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
@@ -1577,7 +1594,8 @@ export default {
     choose_background: '选择组件背景',
     choose_background_tips: '组件自有的背景设置会覆盖当前设置',
     setting_background: '设置背景',
-    setting_jump: '跳转设置'
+    setting_jump: '跳转设置',
+    select_view: '请选择视图...'
   },
   plugin: {
     local_install: '本地安裝',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 49d97b0777..d0cbf18779 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1034,6 +1034,7 @@ export default {
     table_align_left: '左对齐',
     table_align_center: '居中',
     table_align_right: '右对齐',
+    draw_back: '收回',
     senior: '高级',
     senior_cfg: '高级设置',
     function_cfg: '功能设置',
@@ -1045,7 +1046,23 @@ export default {
     field_fixed: '固定值',
     line_type_dotted: '点',
     value_can_not_empty: '值不能为空',
-    value_error: '值必须为数值'
+    value_error: '值必须为数值',
+    threshold: '阈值',
+    threshold_range: '阈值区间',
+    gauge_threshold_format_error: '格式错误',
+    total_cfg: '总计配置',
+    col_cfg: '列汇总',
+    row_cfg: '行汇总',
+    total_show: '总计',
+    total_position: '位置',
+    total_label: '别名',
+    sub_total_show: '小计',
+    total_pos_top: '顶部',
+    total_pos_bottom: '底部',
+    total_pos_left: '左侧',
+    total_pos_right: '右侧',
+    chart_label: '文本卡',
+    drag_block_label: '标签'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
@@ -1586,7 +1603,8 @@ export default {
     choose_background: '选择组件背景',
     choose_background_tips: '组件自有的背景设置会覆盖当前设置',
     setting_background: '设置背景',
-    setting_jump: '跳转设置'
+    setting_jump: '跳转设置',
+    select_view: '请选择视图...'
   },
   plugin: {
     local_install: '本地安装',
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 55d58a53b2..1e416ae701 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -99,7 +99,9 @@ const data = {
       x: 300,
       y: 600
     },
-    scrollAutoMove: 0
+    scrollAutoMove: 0,
+    // 视图是否编辑记录
+    panelViewEditInfo: {}
   },
   mutations: {
     ...animation.mutations,
@@ -392,6 +394,17 @@ const data = {
     },
     setScrollAutoMove(state, offset) {
       state.scrollAutoMove = offset
+    },
+    initPanelComponents(state, panelComponents) {
+      if (panelComponents) {
+        state.canvasStyleData['panelComponents'] = panelComponents
+      }
+    },
+    recordViewEdit(state, viewInfo) {
+      state.panelViewEditInfo[viewInfo.viewId] = viewInfo.hasEdit
+    },
+    resetViewEditInfo(state) {
+      state.panelViewEditInfo = {}
     }
   },
   modules: {
diff --git a/frontend/src/views/chart/chart/bar/bar.js b/frontend/src/views/chart/chart/bar/bar.js
index b55d9a9ed3..aee859135f 100644
--- a/frontend/src/views/chart/chart/bar/bar.js
+++ b/frontend/src/views/chart/chart/bar/bar.js
@@ -25,7 +25,7 @@ export function baseBarOption(chart_option, chart) {
       const y = chart.data.series[i]
       // color
       y.itemStyle = {
-        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
       }
       // size
       if (customAttr.size) {
@@ -88,7 +88,7 @@ export function horizontalBarOption(chart_option, chart) {
       const y = chart.data.series[i]
       // color
       y.itemStyle = {
-        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
       }
       // size
       if (customAttr.size) {
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index d7d62bcdee..5da618a310 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -78,6 +78,38 @@ export const DEFAULT_TOOLTIP = {
   },
   formatter: ''
 }
+export const DEFAULT_TOTAL = {
+  row: {
+    showGrandTotals: true,
+    showSubTotals: true,
+    reverseLayout: false,
+    reverseSubLayout: false,
+    label: '总计',
+    subLabel: '小计',
+    subTotalsDimensions: [],
+    calcTotals: {
+      aggregation: 'SUM'
+    },
+    calcSubTotals: {
+      aggregation: 'SUM'
+    }
+  },
+  col: {
+    showGrandTotals: true,
+    showSubTotals: true,
+    reverseLayout: false,
+    reverseSubLayout: false,
+    label: '总计',
+    subLabel: '小计',
+    subTotalsDimensions: [],
+    calcTotals: {
+      aggregation: 'SUM'
+    },
+    calcSubTotals: {
+      aggregation: 'SUM'
+    }
+  }
+}
 export const DEFAULT_TITLE_STYLE = {
   show: true,
   fontSize: '18',
@@ -244,6 +276,9 @@ export const DEFAULT_FUNCTION_CFG = {
   sliderShow: false,
   sliderRange: [0, 10]
 }
+export const DEFAULT_THRESHOLD = {
+  gaugeThreshold: ''
+}
 // chart config
 export const BASE_BAR = {
   title: {
diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 4ffed26eeb..23f1a32b73 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -77,6 +77,11 @@ export function getCustomTheme(chart) {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
         fontSize: DEFAULT_SIZE.tableItemFontSize,
         textAlign: itemAlign
+      },
+      bolderText: {
+        fill: DEFAULT_COLOR_CASE.tableFontColor,
+        fontSize: DEFAULT_SIZE.tableItemFontSize,
+        textAlign: itemAlign
       }
     }
   }
@@ -114,6 +119,7 @@ export function getCustomTheme(chart) {
       theme.dataCell.cell.backgroundColor = i_c
       theme.dataCell.cell.horizontalBorderColor = b_c
       theme.dataCell.cell.verticalBorderColor = b_c
+      theme.dataCell.bolderText.fill = c.tableFontColor
       theme.dataCell.text.fill = c.tableFontColor
     }
     // size
@@ -137,6 +143,8 @@ export function getCustomTheme(chart) {
       theme.colCell.text.fontSize = parseInt(s.tableTitleFontSize)
       theme.colCell.text.textAlign = h_a
 
+      theme.dataCell.bolderText.fontSize = parseInt(s.tableItemFontSize)
+      theme.dataCell.bolderText.textAlign = i_a
       theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
       theme.dataCell.text.textAlign = i_a
     }
diff --git a/frontend/src/views/chart/chart/funnel/funnel.js b/frontend/src/views/chart/chart/funnel/funnel.js
index 522016ecfe..16f699d2b7 100644
--- a/frontend/src/views/chart/chart/funnel/funnel.js
+++ b/frontend/src/views/chart/chart/funnel/funnel.js
@@ -40,7 +40,7 @@ export function baseFunnelOption(chart_option, chart) {
         y.name = chart.data.x[i]
         // color
         y.itemStyle = {
-          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+          color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
         }
         // y.type = 'funnel'
         chart_option.series[0].data.push(y)
diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js
index 616d0b8561..71c6a1814c 100644
--- a/frontend/src/views/chart/chart/gauge/gauge.js
+++ b/frontend/src/views/chart/chart/gauge/gauge.js
@@ -1,5 +1,6 @@
 import { componentStyle } from '../common/common'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
 
 export function baseGaugeOption(chart_option, chart) {
   // 处理shape attr
@@ -49,6 +50,57 @@ export function baseGaugeOption(chart_option, chart) {
         value: chart.data.series[0].data[0]
       }
       chart_option.series[0].data.push(y)
+      // threshold
+      if (chart.senior) {
+        const range = []
+        let index = 0
+        let flag = false
+        const senior = JSON.parse(chart.senior)
+        const threshold = JSON.parse(JSON.stringify(senior.threshold ? senior.threshold : DEFAULT_THRESHOLD))
+        if (threshold.gaugeThreshold && threshold.gaugeThreshold !== '') {
+          const arr = threshold.gaugeThreshold.split(',')
+          const per = parseFloat(chart.data.series[0].data[0]) / parseFloat(chart_option.series[0].max)
+          for (let i = 0; i < arr.length; i++) {
+            const ele = arr[i]
+            const p = parseInt(ele) / 100
+            range.push([p, hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)])
+            if (!flag && per <= p) {
+              flag = true
+              index = i
+            }
+          }
+          if (!flag) {
+            index = arr.length
+          }
+
+          range.push([1, hexColorToRGBA(customAttr.color.colors[arr.length % customAttr.color.colors.length], customAttr.color.alpha)])
+          chart_option.series[0].axisLine = {
+            lineStyle: {
+              color: range
+            }
+          }
+
+          chart_option.series[0].itemStyle = {
+            color: hexColorToRGBA(customAttr.color.colors[index], customAttr.color.alpha)
+          }
+          chart_option.series[0].progress = {
+            show: false
+          }
+          chart_option.series[0].axisTick = {
+            lineStyle: {
+              color: 'auto'
+            }
+          }
+          chart_option.series[0].splitLine = {
+            lineStyle: {
+              color: 'auto'
+            }
+          }
+          chart_option.series[0].axisLabel = {
+            color: 'auto'
+          }
+        }
+      }
     }
   }
   // console.log(chart_option);
diff --git a/frontend/src/views/chart/chart/gauge/gauge_antv.js b/frontend/src/views/chart/chart/gauge/gauge_antv.js
index 1fe0979e30..82cd5071d7 100644
--- a/frontend/src/views/chart/chart/gauge/gauge_antv.js
+++ b/frontend/src/views/chart/chart/gauge/gauge_antv.js
@@ -1,6 +1,6 @@
 import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
 import { Gauge } from '@antv/g2plot'
-import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
+import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
 
 export function baseGaugeOptionAntV(plot, container, chart, action) {
   let max, labelContent, startAngel, endAngel
@@ -33,11 +33,39 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
       labelContent = false
     }
   }
+  const per = (parseFloat(data) / parseFloat(max))
+
+  const range = [0]
+  let index = 0
+  let flag = false
+  let hasThreshold = false
+
+  if (chart.senior) {
+    const senior = JSON.parse(chart.senior)
+    const threshold = JSON.parse(JSON.stringify(senior.threshold ? senior.threshold : DEFAULT_THRESHOLD))
+    if (threshold.gaugeThreshold && threshold.gaugeThreshold !== '') {
+      hasThreshold = true
+      const arr = threshold.gaugeThreshold.split(',')
+      for (let i = 0; i < arr.length; i++) {
+        const ele = arr[i]
+        const p = parseInt(ele) / 100
+        range.push(p)
+        if (!flag && per <= p) {
+          flag = true
+          index = i
+        }
+      }
+      if (!flag) {
+        index = arr.length
+      }
+    }
+  }
+  range.push(1)
 
   // options
   const options = {
     theme: theme,
-    percent: (parseFloat(data) / parseFloat(max)),
+    percent: per,
     startAngle: startAngel,
     endAngle: endAngel,
     appendPadding: getPadding(chart),
@@ -52,6 +80,24 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
     //   lineCap: 'round'
     // }
   }
+  if (hasThreshold) {
+    options.range = {
+      color: theme.styleSheet.paletteQualitative10,
+      ticks: range
+    }
+    options.indicator = {
+      pointer: {
+        style: {
+          stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length]
+        }
+      },
+      pin: {
+        style: {
+          stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length]
+        }
+      }
+    }
+  }
 
   // 开始渲染
   if (plot) {
diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js
index 2ef2ea59ba..faf0f5fb88 100644
--- a/frontend/src/views/chart/chart/line/line.js
+++ b/frontend/src/views/chart/chart/line/line.js
@@ -25,7 +25,7 @@ export function baseLineOption(chart_option, chart) {
       const y = chart.data.series[i]
       // color
       y.itemStyle = {
-        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
       }
       // size
       if (customAttr.size) {
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index aee4192f28..27ec15676d 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -73,7 +73,7 @@ export function baseMapOption(chart_option, chart) {
         y.name = chart.data.x[i]
         // color
         // y.itemStyle = {
-        //   color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha),
+        //   color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha),
         //   borderRadius: 0
         // }
         chart_option.series[0].data.push(y)
diff --git a/frontend/src/views/chart/chart/mix/mix.js b/frontend/src/views/chart/chart/mix/mix.js
index bad33d3181..3380996cb4 100644
--- a/frontend/src/views/chart/chart/mix/mix.js
+++ b/frontend/src/views/chart/chart/mix/mix.js
@@ -27,7 +27,7 @@ export function baseMixOption(chart_option, chart) {
       y.type = y.type ? y.type : 'bar'
       // color
       y.itemStyle = {
-        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
       }
       // size
       if (customAttr.size) {
diff --git a/frontend/src/views/chart/chart/mix/mix_antv.js b/frontend/src/views/chart/chart/mix/mix_antv.js
index c361008d3b..8298d79b5c 100644
--- a/frontend/src/views/chart/chart/mix/mix_antv.js
+++ b/frontend/src/views/chart/chart/mix/mix_antv.js
@@ -43,7 +43,7 @@ export function baseMixOptionAntV(plot, container, chart, action) {
     const o = {
       type: '',
       options: {
-        color: colors[i % 9],
+        color: colors[i % colors.length],
         data: d.data,
         xField: 'field',
         yField: 'value',
diff --git a/frontend/src/views/chart/chart/pie/pie.js b/frontend/src/views/chart/chart/pie/pie.js
index d2afdd159d..e7622d8dda 100644
--- a/frontend/src/views/chart/chart/pie/pie.js
+++ b/frontend/src/views/chart/chart/pie/pie.js
@@ -41,7 +41,7 @@ export function basePieOption(chart_option, chart) {
         y.name = chart.data.x[i]
         // color
         y.itemStyle = {
-          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha),
+          color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha),
           borderRadius: 0
         }
         y.type = 'pie'
@@ -94,7 +94,7 @@ export function rosePieOption(chart_option, chart) {
         y.name = chart.data.x[i]
         // color
         y.itemStyle = {
-          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha),
+          color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha),
           borderRadius: customAttr.size.pieRoseRadius
         }
         y.type = 'pie'
diff --git a/frontend/src/views/chart/chart/radar/radar.js b/frontend/src/views/chart/chart/radar/radar.js
index d2b582981c..0de2f39d7c 100644
--- a/frontend/src/views/chart/chart/radar/radar.js
+++ b/frontend/src/views/chart/chart/radar/radar.js
@@ -33,7 +33,7 @@ export function baseRadarOption(chart_option, chart) {
       }
       // color
       y.itemStyle = {
-        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
       }
       // label
       if (customAttr.label) {
diff --git a/frontend/src/views/chart/chart/scatter/scatter.js b/frontend/src/views/chart/chart/scatter/scatter.js
index 9e2924368a..d6f1a88a95 100644
--- a/frontend/src/views/chart/chart/scatter/scatter.js
+++ b/frontend/src/views/chart/chart/scatter/scatter.js
@@ -30,7 +30,7 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') {
       const y = chart.data.series[i]
       // color
       y.itemStyle = {
-        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+        color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
       }
       // size
       if (customAttr.size) {
diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js
index dd6b000952..d3e4f9ec90 100644
--- a/frontend/src/views/chart/chart/table/table-info.js
+++ b/frontend/src/views/chart/chart/table/table-info.js
@@ -1,5 +1,6 @@
 import { TableSheet, S2Event, PivotSheet } from '@antv/s2'
 import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
+import { DEFAULT_TOTAL } from '@/views/chart/chart/chart'
 
 export function baseTableInfo(s2, container, chart, action, tableData) {
   const containerDom = document.getElementById(container)
@@ -281,11 +282,31 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
     data: tableData
   }
 
+  // total config
+  let totalCfg = {}
+  const chartObj = JSON.parse(JSON.stringify(chart))
+  if (chartObj.customAttr) {
+    let customAttr = null
+    if (Object.prototype.toString.call(chartObj.customAttr) === '[object Object]') {
+      customAttr = JSON.parse(JSON.stringify(chartObj.customAttr))
+    } else {
+      customAttr = JSON.parse(chartObj.customAttr)
+    }
+    if (customAttr.totalCfg) {
+      totalCfg = customAttr.totalCfg
+    } else {
+      totalCfg = JSON.parse(JSON.stringify(DEFAULT_TOTAL))
+    }
+  }
+  totalCfg.row.subTotalsDimensions = r
+  totalCfg.col.subTotalsDimensions = c
+
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
-    style: getSize(chart)
+    style: getSize(chart),
+    totals: totalCfg
   }
 
   // 开始渲染
diff --git a/frontend/src/views/chart/chart/treemap/treemap.js b/frontend/src/views/chart/chart/treemap/treemap.js
index 4db4572bea..6c6befa083 100644
--- a/frontend/src/views/chart/chart/treemap/treemap.js
+++ b/frontend/src/views/chart/chart/treemap/treemap.js
@@ -49,7 +49,7 @@ export function baseTreemapOption(chart_option, chart) {
         y.name = chart.data.x[i]
         // color
         y.itemStyle = {
-          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+          color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
         }
         // y.type = 'treemap'
         chart_option.series[0].data.push(y)
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 4991c2a24b..e97b22ee84 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -50,6 +50,13 @@ export const TYPE_CONFIGS = [
     icon: 'table-pivot'
   },
 
+  {
+    render: 'antv',
+    category: 'chart.chart_type_quota',
+    value: 'label',
+    title: 'chart.chart_label',
+    icon: 'label'
+  },
   {
     render: 'antv',
     category: 'chart.chart_type_quota',
@@ -189,6 +196,13 @@ export const TYPE_CONFIGS = [
     icon: 'table-info'
   },
 
+  {
+    render: 'echarts',
+    category: 'chart.chart_type_quota',
+    value: 'label',
+    title: 'chart.chart_label',
+    icon: 'label'
+  },
   {
     render: 'echarts',
     category: 'chart.chart_type_quota',
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
new file mode 100644
index 0000000000..cd4eb3e6d1
--- /dev/null
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -0,0 +1,180 @@
+<template>
+  <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
+    <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
+    <div
+      v-if="chart.data && chart.data.datas && chart.data.datas.length > 0"
+      id="label-content"
+      :style="content_class"
+    >
+      <span :style="label_class">
+        <p :style="label_content_class">
+          {{ chart.data.datas[0].name }}
+        </p>
+      </span>
+      <!--      字段名暂时隐藏-->
+      <!--      <span v-if="dimensionShow" :style="label_space">-->
+      <!--        <p :style="label_class">-->
+      <!--          {{ chart.data.datas[0].category }}-->
+      <!--        </p>-->
+      <!--      </span>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import { hexColorToRGBA } from '../../chart/util'
+import eventBus from '@/components/canvas/utils/eventBus'
+
+export default {
+  name: 'LabelNormalText',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Object,
+      required: false,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      height: 'auto',
+      splitHeight: '10px',
+      dimensionShow: true,
+      quotaShow: true,
+      title_class: {
+        margin: '0 0',
+        width: '100%',
+        fontSize: '18px',
+        color: '#303133',
+        textAlign: 'left',
+        fontStyle: 'normal',
+        fontWeight: 'normal'
+      },
+      content_class: {
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 'auto'
+      },
+      label_class: {
+        margin: 0
+      },
+      label_content_class: {
+        margin: 0
+      },
+      label_space: {
+        marginTop: '10px',
+        textAlign: 'center'
+      },
+      bg_class: {
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      title_show: true,
+      borderRadius: '0px'
+    }
+  },
+  computed: {
+    // bg_class() {
+    //   return {
+    //     background: hexColorToRGBA('#ffffff', 0),
+    //     borderRadius: this.borderRadius
+    //   }
+    // }
+  },
+  watch: {
+    chart() {
+      this.init()
+      this.calcHeight()
+    }
+  },
+  mounted() {
+    this.init()
+    this.calcHeight()
+    // 监听元素变动事件
+    eventBus.$on('resizing', (componentId) => {
+      this.chartResize()
+    })
+  },
+  methods: {
+    init() {
+      const that = this
+      this.initStyle()
+      window.onresize = function() {
+        that.calcHeight()
+      }
+      this.setBackGroundBorder()
+    },
+    setBackGroundBorder() {
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.background) {
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+          this.bg_class.borderRadius = this.borderRadius
+        }
+      }
+    },
+    calcHeight() {
+      const that = this
+      this.$nextTick(function() {
+        if (that.$refs.tableContainer) {
+          const currentHeight = that.$refs.tableContainer.offsetHeight
+          const contentHeight = currentHeight - that.$refs.title.offsetHeight - 16
+          that.height = contentHeight + 'px'
+          that.content_class.height = that.height
+        }
+      })
+    },
+    initStyle() {
+      if (this.chart.customAttr) {
+        const customAttr = JSON.parse(this.chart.customAttr)
+        if (customAttr.color) {
+          this.label_class.color = customAttr.color.dimensionColor
+          this.label_content_class.color = customAttr.color.quotaColor
+        }
+        if (customAttr.size) {
+          this.dimensionShow = customAttr.size.dimensionShow
+          this.quotaShow = customAttr.size.quotaShow
+          this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          if (!this.dimensionShow) {
+            this.label_space.marginTop = '0px'
+          } else {
+            this.label_space.marginTop = customAttr.size.spaceSplit + 'px'
+          }
+        }
+      }
+      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.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        }
+      }
+    },
+    chartResize() {
+      // 指定图表的配置项和数据
+      this.calcHeight()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .table-class>>>.body--wrapper{
+    background: rgba(1,1,1,0);
+  }
+</style>
diff --git a/frontend/src/views/chart/components/senior/FunctionCfg.vue b/frontend/src/views/chart/components/senior/FunctionCfg.vue
index 242b66233a..d99773d66d 100644
--- a/frontend/src/views/chart/components/senior/FunctionCfg.vue
+++ b/frontend/src/views/chart/components/senior/FunctionCfg.vue
@@ -6,7 +6,7 @@
           <el-checkbox v-model="functionForm.sliderShow" @change="changeFunctionCfg">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
         <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_range')+'(%)'" class="form-item form-item-slider">
-          <el-slider v-model="functionForm.sliderRange" :min="0" :max="100" input-size="mini" range @change="changeFunctionCfg" />
+          <el-slider v-model="functionForm.sliderRange" style="width: 90%" :min="0" :max="100" input-size="mini" range @change="changeFunctionCfg" />
         </el-form-item>
       </el-form>
     </el-col>
diff --git a/frontend/src/views/chart/components/senior/Threshold.vue b/frontend/src/views/chart/components/senior/Threshold.vue
new file mode 100644
index 0000000000..ad764e3a2e
--- /dev/null
+++ b/frontend/src/views/chart/components/senior/Threshold.vue
@@ -0,0 +1,123 @@
+<template>
+  <div style="width: 100%">
+    <el-col v-if="chart.type && chart.type === 'gauge'">
+      <el-form ref="thresholdForm" :model="thresholdForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.threshold_range')+'(%)'" class="form-item">
+          <span>0,</span>
+          <el-input v-model="thresholdForm.gaugeThreshold" style="width: 100px;margin: 0 10px;" :placeholder="$t('chart.threshold_range')" size="mini" clearable @change="changeThreshold" />
+          <span>,100</span>
+          <el-tooltip class="item" effect="dark" placement="bottom">
+            <div slot="content">
+              阈值设置，决定仪表盘区间颜色，为空则不开启阈值，范围(0-100)，仅限整数，且逐级递增
+              <br>
+              例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
+            </div>
+            <i class="el-icon-info" style="cursor: pointer;margin-left: 10px;font-size: 12px;" />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+
+export default {
+  name: 'Threshold',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      thresholdForm: JSON.parse(JSON.stringify(DEFAULT_THRESHOLD))
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.senior) {
+        let senior = null
+        if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
+          senior = JSON.parse(JSON.stringify(chart.senior))
+        } else {
+          senior = JSON.parse(chart.senior)
+        }
+        if (senior.threshold) {
+          this.thresholdForm = senior.threshold
+        } else {
+          this.thresholdForm = JSON.parse(JSON.stringify(DEFAULT_THRESHOLD))
+        }
+      }
+    },
+    changeThreshold() {
+      // check input
+      if (this.thresholdForm.gaugeThreshold) {
+        const arr = this.thresholdForm.gaugeThreshold.split(',')
+        for (let i = 0; i < arr.length; i++) {
+          const ele = arr[i]
+          if (ele.indexOf('.') > -1 || parseInt(ele).toString() === 'NaN' || parseInt(ele) < 1 || parseInt(ele) > 99) {
+            this.$message({
+              message: this.$t('chart.gauge_threshold_format_error'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
+        }
+      }
+      this.$emit('onThresholdChange', this.thresholdForm)
+    }
+  }
+}
+</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/senior/dialog/AssistLineEdit.vue b/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
index 27b0449355..f249d3b5d3 100644
--- a/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue
@@ -58,7 +58,7 @@ export default {
         name: '辅助线',
         field: '0', // 固定值
         axis: 'y', // 主轴
-        value: 0,
+        value: '0',
         lineType: 'solid',
         color: '#ff0000'
       },
@@ -81,7 +81,7 @@ export default {
       this.lineArr = JSON.parse(JSON.stringify(this.line))
     },
     addLine() {
-      this.lineArr.push(this.lineObj)
+      this.lineArr.push(JSON.parse(JSON.stringify(this.lineObj)))
       this.changeAssistLine()
     },
     removeLine(index) {
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index eaf684e362..e90d82139e 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -3,7 +3,7 @@
     <el-col>
       <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
         <div v-if="sourceType==='view' || sourceType==='panelEchart'">
-          <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
+          <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.color_case')" class="form-item">
             <el-popover
               placement="bottom"
               width="400"
@@ -45,7 +45,7 @@
             </el-popover>
           </el-form-item>
 
-          <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
+          <el-form-item v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
             <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
           <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
@@ -71,7 +71,7 @@
           <!--              </el-form-item>-->
         </div>
 
-        <el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+        <el-form-item v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
           <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
         </el-form-item>
       </el-form>
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 0a96d990d7..7b9dfafa57 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -127,21 +127,21 @@
         </el-form-item>
       </el-form>
 
-      <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+      <el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
         <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-form-item v-show="chart.type && (chart.type.includes('text'))" :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-form-item v-show="chart.type && (chart.type.includes('text'))" :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-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.space_split')" class="form-item">
           <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index ebe711e1c2..8138e1105b 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -153,21 +153,21 @@
         </el-form-item>
       </el-form>
 
-      <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+      <el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
         <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-form-item v-show="chart.type && (chart.type.includes('text'))" :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-form-item v-show="chart.type && (chart.type.includes('text'))" :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-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.space_split')" class="form-item">
           <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
         </el-form-item>
       </el-form>
diff --git a/frontend/src/views/chart/components/shape-attr/TotalCfg.vue b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
new file mode 100644
index 0000000000..48e577833b
--- /dev/null
+++ b/frontend/src/views/chart/components/shape-attr/TotalCfg.vue
@@ -0,0 +1,182 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="totalForm" :model="totalForm" label-width="80px" size="mini">
+        <el-divider content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
+        <el-form-item :label="$t('chart.total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="totalForm.row.showGrandTotals">
+          <el-form-item :label="$t('chart.total_position')" class="form-item">
+            <el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg">
+              <el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
+              <el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.total_label')" class="form-item">
+            <el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+          </el-form-item>
+        </div>
+
+        <el-form-item :label="$t('chart.sub_total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="totalForm.row.showSubTotals">
+          <el-form-item :label="$t('chart.total_position')" class="form-item">
+            <el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg">
+              <el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
+              <el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.total_label')" class="form-item">
+            <el-input v-model="totalForm.row.subLabel" :disabled="rowNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+          </el-form-item>
+        </div>
+
+        <el-divider content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
+        <el-form-item :label="$t('chart.total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="totalForm.col.showGrandTotals">
+          <el-form-item :label="$t('chart.total_position')" class="form-item">
+            <el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg">
+              <el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
+              <el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.total_label')" class="form-item">
+            <el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+          </el-form-item>
+        </div>
+
+        <el-form-item :label="$t('chart.sub_total_show')" class="form-item">
+          <el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <div v-show="totalForm.col.showSubTotals">
+          <el-form-item :label="$t('chart.total_position')" class="form-item">
+            <el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg">
+              <el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
+              <el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="$t('chart.total_label')" class="form-item">
+            <el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_TOTAL } from '@/views/chart/chart/chart'
+
+export default {
+  name: 'TotalCfg',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      totalForm: JSON.parse(JSON.stringify(DEFAULT_TOTAL))
+    }
+  },
+  computed: {
+    rowNum() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.xaxisExt) {
+        let arr = null
+        if (Object.prototype.toString.call(chart.xaxisExt) === '[object Object]') {
+          arr = JSON.parse(JSON.stringify(chart.xaxisExt))
+        } else {
+          arr = JSON.parse(chart.xaxisExt)
+        }
+        return arr.length
+      }
+      return 0
+    },
+    colNum() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.xaxis) {
+        let arr = null
+        if (Object.prototype.toString.call(chart.xaxis) === '[object Object]') {
+          arr = JSON.parse(JSON.stringify(chart.xaxis))
+        } else {
+          arr = JSON.parse(chart.xaxis)
+        }
+        return arr.length
+      }
+      return 0
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    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.totalCfg) {
+          this.totalForm = customAttr.totalCfg
+        } else {
+          this.totalForm = JSON.parse(JSON.stringify(DEFAULT_TOTAL))
+        }
+      }
+    },
+    changeTotalCfg() {
+      this.$emit('onTotalCfgChange', this.totalForm)
+    }
+  }
+}
+</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/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 613c4d3e61..688f711a6a 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -309,7 +309,9 @@ import {
   DEFAULT_YAXIS_EXT_STYLE,
   DEFAULT_BACKGROUND_COLOR,
   DEFAULT_SPLIT,
-  DEFAULT_FUNCTION_CFG
+  DEFAULT_FUNCTION_CFG,
+  DEFAULT_THRESHOLD,
+  DEFAULT_TOTAL
 } from '../chart/chart'
 
 export default {
@@ -754,7 +756,8 @@ export default {
         tableColor: DEFAULT_COLOR_CASE,
         size: DEFAULT_SIZE,
         label: DEFAULT_LABEL,
-        tooltip: DEFAULT_TOOLTIP
+        tooltip: DEFAULT_TOOLTIP,
+        totalCfg: DEFAULT_TOTAL
       })
       view.customStyle = JSON.stringify({
         text: DEFAULT_TITLE_STYLE,
@@ -767,7 +770,8 @@ export default {
       })
       view.senior = JSON.stringify({
         functionCfg: DEFAULT_FUNCTION_CFG,
-        assistLine: []
+        assistLine: [],
+        threshold: DEFAULT_THRESHOLD
       })
       view.stylePriority = 'view' // 默认样式优先级视图
       view.xaxis = JSON.stringify([])
@@ -780,7 +784,7 @@ export default {
       view.extBubble = JSON.stringify([])
       this.setChartDefaultOptions(view)
       const _this = this
-      post('/chart/view/save/' + this.panelInfo.id, view).then(response => {
+      post('/chart/view/newOne/' + this.panelInfo.id, view).then(response => {
         this.closeCreateChart()
         this.$store.dispatch('chart/setTableId', null)
         this.$store.dispatch('chart/setTableId', this.table.id)
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 146713344b..a853736e20 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1,7 +1,10 @@
 <template>
-  <el-row v-loading="loading" style="height: 100%;overflow-y: hidden;width: 100%;">
+  <el-row v-loading="loading" style="height: 100%;overflow-y: hidden;width: 100%;border-left: 1px solid #E6E6E6">
+    <el-tooltip :content="$t('chart.draw_back')">
+      <el-button class="el-icon-d-arrow-right" style="position:absolute;left: 4px;top: 5px;z-index: 1000" size="mini" circle @click="closePanelEdit" />
+    </el-tooltip>
+    <!--    <i class="el-icon-d-arrow-right" style="position:absolute;left: 4px;top: 11px"></i>-->
     <el-row style="height: 40px;" class="padding-lr">
-      <span class="title-text" style="line-height: 40px;">{{ view.name }}</span>
       <el-popover
         placement="right-start"
         width="400"
@@ -10,25 +13,30 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
-        <i slot="reference" class="el-icon-warning icon-class" style="margin-left: 4px;cursor: pointer;" />
+        <i
+          slot="reference"
+          class="el-icon-warning icon-class"
+          style="position:absolute; margin-left: 30px; top:14px;cursor: pointer;"
+        />
       </el-popover>
+      <span class="title-text view-title-name" style="line-height: 40px;">{{ view.name }}</span>
       <span style="float: right;line-height: 40px;">
-        <el-button size="mini" @click="close">
-          {{ $t('chart.close') }}
-        </el-button>
-        <el-button size="mini" :disabled="!hasEdit" @click="reset">
+        <!--        <el-button size="mini" @click="closePanelEdit">-->
+        <!--          {{ $t('chart.draw_back') }}-->
+        <!--        </el-button>-->
+        <el-button type="warning" round size="mini" :disabled="!hasEdit" @click="reset">
           {{ $t('chart.recover') }}
         </el-button>
-        <el-button size="mini" type="primary" @click="closeEdit">
-          {{ $t('commons.save') }}
-        </el-button>
+        <!--        <el-button size="mini" type="primary" @click="closeEdit">-->
+        <!--          {{ $t('commons.save') }}-->
+        <!--        </el-button>-->
       </span>
     </el-row>
-    <el-row class="view-panel">
+    <el-row class="view-panel-row">
       <el-tabs :stretch="true" class="tab-header">
-        <el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 360px">
+        <el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 300px">
           <el-row class="view-panel">
-            <el-col class="theme-border-class" style="width: 180px;border-right: 1px solid #E6E6E6;">
+            <el-col class="theme-border-class" :span="12" style="border-right: 1px solid #E6E6E6;">
               <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
                 <el-input
                   v-model="searchField"
@@ -117,7 +125,8 @@
             </el-col>
 
             <el-col
-              style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
+              :span="12"
+              style="height: 100%;border-right: 1px solid #E6E6E6;"
               class="theme-border-class"
             >
               <div style="height: 60px;overflow:auto" class="padding-lr theme-border-class">
@@ -218,7 +227,11 @@
                     </el-row>
                   </el-row>
 
-                  <plugin-com v-if="view.isPlugin" :component-name="view.type + '-data'" :obj="{view, param, chart, dimensionData, quotaData}" />
+                  <plugin-com
+                    v-if="view.isPlugin"
+                    :component-name="view.type + '-data'"
+                    :obj="{view, param, chart, dimensionData, quotaData}"
+                  />
                   <div v-else>
 
                     <el-row v-if="view.type ==='map'" class="padding-lr">
@@ -298,6 +311,7 @@
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
                         <span v-else-if="view.type && view.type.includes('treemap')">{{ $t('chart.drag_block_treemap_label') }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
+                        <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
                         /
                         <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
                         <span
@@ -334,7 +348,7 @@
                       </div>
                     </el-row>
                     <!--yaxis-->
-                    <el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
+                    <el-row v-if="view.type !=='table-info' && view.type !=='label'" class="padding-lr" style="margin-top: 6px;">
                       <span style="width: 80px;text-align: right;">
                         <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
                         <span
@@ -352,7 +366,9 @@
                         <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
                         <span v-else-if="view.type && view.type.includes('tree')">{{ $t('chart.drag_block_treemap_size') }}</span>
                         <span v-else-if="view.type && view.type === 'chart-mix'">{{ $t('chart.drag_block_value_axis_main') }}</span>
-                        <span v-else-if="view.type && view.type === 'liquid'">{{ $t('chart.drag_block_progress') }}</span>
+                        <span
+                          v-else-if="view.type && view.type === 'liquid'"
+                        >{{ $t('chart.drag_block_progress') }}</span>
                         <span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_size') }}</span>
                         /
                         <span>{{ $t('chart.quota') }}</span>
@@ -462,7 +478,11 @@
                       </div>
                     </el-row>
                     <!--extBubble-->
-                    <el-row v-if="view.type && view.type.includes('scatter')" class="padding-lr" style="margin-top: 6px;">
+                    <el-row
+                      v-if="view.type && view.type.includes('scatter')"
+                      class="padding-lr"
+                      style="margin-top: 6px;"
+                    >
                       <span style="width: 80px;text-align: right;">
                         <span>{{ $t('chart.bubble_size') }}</span>
                         /
@@ -536,7 +556,7 @@
                       </div>
                     </el-row>
                     <el-row
-                      v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot'"
+                      v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot' && view.type !=='label'"
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
@@ -578,7 +598,7 @@
             </el-col>
           </el-row>
         </el-tab-pane>
-        <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
+        <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
           <el-row class="view-panel">
             <plugin-com
               v-if="view.isPlugin"
@@ -637,7 +657,7 @@
                     />
                   </el-collapse-item>
                   <el-collapse-item
-                    v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud'"
+                    v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud' && view.type !== 'label'"
                     name="label"
                     :title="$t('chart.label')"
                   >
@@ -657,7 +677,7 @@
                     />
                   </el-collapse-item>
                   <el-collapse-item
-                    v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge'"
+                    v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge' && view.type !== 'label'"
                     name="tooltip"
                     :title="$t('chart.tooltip')"
                   >
@@ -676,6 +696,18 @@
                       @onTooltipChange="onTooltipChange"
                     />
                   </el-collapse-item>
+                  <el-collapse-item
+                    v-show="view.type === 'table-pivot'"
+                    name="totalCfg"
+                    :title="$t('chart.total_cfg')"
+                  >
+                    <total-cfg
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onTotalCfgChange="onTotalCfgChange"
+                    />
+                  </el-collapse-item>
                 </el-collapse>
               </el-row>
               <el-row>
@@ -778,7 +810,7 @@
                     />
                   </el-collapse-item>
                   <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' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
+                    v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && view.type !== 'label' && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
                     name="legend"
                     :title="$t('chart.legend')"
                   >
@@ -810,14 +842,14 @@
             </div>
           </el-row>
         </el-tab-pane>
-        <el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 360px;">
+        <el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 300px;">
           <el-row class="view-panel">
             <div
-              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix'))"
+              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge'))"
               style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
               class="attr-style theme-border-class"
             >
-              <el-row>
+              <el-row v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix'))">
                 <span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
                 <el-collapse v-model="attrActiveNames" class="style-collapse">
                   <el-collapse-item name="function" :title="$t('chart.function_cfg')">
@@ -825,12 +857,15 @@
                   </el-collapse-item>
                 </el-collapse>
               </el-row>
-              <el-row>
+              <el-row v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge'))">
                 <span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
                 <el-collapse v-model="styleActiveNames" class="style-collapse">
-                  <el-collapse-item name="analyse" :title="$t('chart.assist_line')">
+                  <el-collapse-item v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix'))" name="analyse" :title="$t('chart.assist_line')">
                     <assist-line :param="param" class="attr-selector" :chart="chart" @onAssistLineChange="onAssistLineChange" />
                   </el-collapse-item>
+                  <el-collapse-item v-if="view.type && (view.type.includes('gauge'))" name="threshold" :title="$t('chart.threshold')">
+                    <threshold :param="param" class="attr-selector" :chart="chart" @onThresholdChange="onThresholdChange" />
+                  </el-collapse-item>
                 </el-collapse>
               </el-row>
             </div>
@@ -841,7 +876,7 @@
         </el-tab-pane>
       </el-tabs>
 
-      <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
+      <el-col v-if="editFrom==='view'" style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
             <plugin-com
@@ -852,7 +887,7 @@
               class="chart-class"
             />
             <chart-component
-              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'"
+              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'echarts'"
               ref="dynamicChart"
               :chart-id="chart.id"
               :chart="chart"
@@ -860,7 +895,7 @@
               @onChartClick="chartClick"
             />
             <chart-component-g2
-              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'antv'"
               ref="dynamicChart"
               :chart-id="chart.id"
               :chart="chart"
@@ -868,7 +903,7 @@
               @onChartClick="chartClick"
             />
             <chart-component-s2
-              v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
+              v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'antv'"
               ref="dynamicChart"
               :chart-id="chart.id"
               :chart="chart"
@@ -886,6 +921,11 @@
               :chart="chart"
               class="table-class"
             />
+            <label-normal-text
+              v-else-if="httpRequest.status && chart.type && chart.type === 'label'"
+              :chart="chart"
+              class="table-class"
+            />
             <div v-if="!httpRequest.status" class="chart-error-class">
               <div
                 style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;"
@@ -1020,7 +1060,14 @@
 </template>
 
 <script>
-import { ajaxGetDataOnly, post } from '@/api/chart/chart'
+import {
+  ajaxGetDataOnly,
+  post,
+  getChartDetails,
+  save2Cache,
+  resetViewCache,
+  resetViewCacheCallBack
+} from '@/api/chart/chart'
 import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
 import FilterItem from '../components/drag-item/FilterItem'
@@ -1040,8 +1087,10 @@ import {
   DEFAULT_LEGEND_STYLE,
   DEFAULT_SIZE,
   DEFAULT_SPLIT,
+  DEFAULT_THRESHOLD,
   DEFAULT_TITLE_STYLE,
   DEFAULT_TOOLTIP,
+  DEFAULT_TOTAL,
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_EXT_STYLE,
   DEFAULT_YAXIS_STYLE
@@ -1082,11 +1131,19 @@ import { compareItem } from '@/views/chart/chart/compare'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
 import PluginCom from '@/views/system/plugin/PluginCom'
+import { mapState } from 'vuex'
+
 import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
 import AssistLine from '@/views/chart/components/senior/AssistLine'
+import Threshold from '@/views/chart/components/senior/Threshold'
+import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
+import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 export default {
   name: 'ChartEdit',
   components: {
+    LabelNormalText,
+    TotalCfg,
+    Threshold,
     AssistLine,
     FunctionCfg,
     DimensionExtItem,
@@ -1136,6 +1193,11 @@ export default {
     param: {
       type: Object,
       required: true
+    },
+    editFrom: {
+      type: String,
+      required: false,
+      default: 'view'
     }
   },
   data() {
@@ -1161,7 +1223,8 @@ export default {
           color: DEFAULT_COLOR_CASE,
           size: DEFAULT_SIZE,
           label: DEFAULT_LABEL,
-          tooltip: DEFAULT_TOOLTIP
+          tooltip: DEFAULT_TOOLTIP,
+          totalCfg: DEFAULT_TOTAL
         },
         customStyle: {
           text: DEFAULT_TITLE_STYLE,
@@ -1174,7 +1237,8 @@ export default {
         },
         senior: {
           functionCfg: DEFAULT_FUNCTION_CFG,
-          assistLine: []
+          assistLine: [],
+          threshold: DEFAULT_THRESHOLD
         },
         customFilter: [],
         render: 'antv',
@@ -1225,7 +1289,8 @@ export default {
       drill: false,
       hasEdit: false,
       quotaItemCompare: {},
-      showEditQuotaCompare: false
+      showEditQuotaCompare: false,
+      preChartId: ''
 
     }
   },
@@ -1235,15 +1300,19 @@ export default {
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo
-    }
+    },
+    ...mapState([
+      'panelViewEditInfo'
+    ])
   },
   watch: {
-    'param': function() {
+    'param': function(val) {
       if (this.param.optType === 'new') {
         //
-      } else {
-        this.resetDrill()
-        this.getData(this.param.id)
+      } else if (this.param.id !== this.preChartId) {
+        this.preChartId = this.param.id
+        this.chartInit()
+        // console.log('fromwatch:' + JSON.stringify(val))
       }
     },
     searchField(val) {
@@ -1262,15 +1331,24 @@ export default {
     // this.initAreas()
   },
   mounted() {
+    debugger
     this.bindPluginEvent()
-    // this.get(this.$store.state.chart.viewId);
-    this.getData(this.param.id)
-    // this.myEcharts();
+    this.initFromPanel()
+    this.chartInit()
+    // console.log('mounted')
   },
   activated() {
   },
 
   methods: {
+    initFromPanel() {
+      this.hasEdit = (this.panelViewEditInfo[this.param.id] || false)
+    },
+    chartInit() {
+      this.resetDrill()
+      this.initFromPanel()
+      this.getChart(this.param.id)
+    },
     bindPluginEvent() {
       bus.$on('show-dimension-edit-filter', this.showDimensionEditFilter)
       bus.$on('show-rename', this.showRename)
@@ -1488,51 +1566,58 @@ export default {
       delete view.data
       return view
     },
-    calcData(getData, trigger, needRefreshGroup = false, switchType = false) {
-      this.hasEdit = true
-      const view = this.buildParam(getData, trigger, needRefreshGroup, switchType)
+    // calcData(getData, trigger, needRefreshGroup = false, switchType = false) {
+    // this.hasEdit = true
+    // const view = this.buildParam(getData, trigger, needRefreshGroup, switchType)
+    // if (!view) return
+    // post('/chart/view/calcData/' + this.panelInfo.id, {
+    //   view: view,
+    //   requestList: {
+    //     filter: [],
+    //     drill: this.drillClickDimensionList
+    //   }
+    // }).then(response => {
+    //   const view = JSON.parse(JSON.stringify(response.data))
+    //   this.view.xaxis = view.xaxis ? JSON.parse(view.xaxis) : []
+    //   this.view.xaxisExt = view.xaxisExt ? JSON.parse(view.xaxisExt) : []
+    //   this.view.yaxis = view.yaxis ? JSON.parse(view.yaxis) : []
+    //   this.view.yaxisExt = view.yaxisExt ? JSON.parse(view.yaxisExt) : []
+    //   this.view.extStack = view.extStack ? JSON.parse(view.extStack) : []
+    //   this.view.drillFields = view.drillFields ? JSON.parse(view.drillFields) : []
+    //   this.view.extBubble = view.extBubble ? JSON.parse(view.extBubble) : []
+    //   this.view.customAttr = view.customAttr ? JSON.parse(view.customAttr) : {}
+    //   this.view.customStyle = view.customStyle ? JSON.parse(view.customStyle) : {}
+    //   this.view.customFilter = view.customFilter ? JSON.parse(view.customFilter) : {}
+    // this.view.senior = view.senior ? JSON.parse(view.senior) : {}
+    // 将视图传入echart组件
+    //   this.chart = response.data
+    //   this.data = response.data.data
+    //   // console.log(JSON.stringify(this.chart))
+    //   this.httpRequest.status = true
+    //   if (this.chart.privileges) {
+    //     this.param.privileges = this.chart.privileges
+    //   }
+    //   if (!response.data.drill) {
+    //     this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
+    //
+    //     this.resetDrill()
+    //   }
+    //   this.drill = response.data.drill
+    //   this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : []))
+    //
+    //   this.closeChangeChart()
+    // })
+    // },
+    calcData() {
+      this.changeEditStatus(true)
+      const view = this.buildParam(true, 'chart', false, false)
       if (!view) return
-      post('/chart/view/calcData/' + this.panelInfo.id, {
-        view: view,
-        requestList: {
-          filter: [],
-          drill: this.drillClickDimensionList
-        }
-      }).then(response => {
-        const view = JSON.parse(JSON.stringify(response.data))
-        this.view.xaxis = view.xaxis ? JSON.parse(view.xaxis) : []
-        this.view.xaxisExt = view.xaxisExt ? JSON.parse(view.xaxisExt) : []
-        this.view.yaxis = view.yaxis ? JSON.parse(view.yaxis) : []
-        this.view.yaxisExt = view.yaxisExt ? JSON.parse(view.yaxisExt) : []
-        this.view.extStack = view.extStack ? JSON.parse(view.extStack) : []
-        this.view.drillFields = view.drillFields ? JSON.parse(view.drillFields) : []
-        this.view.extBubble = view.extBubble ? JSON.parse(view.extBubble) : []
-        this.view.customAttr = view.customAttr ? JSON.parse(view.customAttr) : {}
-        this.view.customStyle = view.customStyle ? JSON.parse(view.customStyle) : {}
-        this.view.customFilter = view.customFilter ? JSON.parse(view.customFilter) : {}
-        this.view.senior = view.senior ? JSON.parse(view.senior) : {}
-        // 将视图传入echart组件
-        this.chart = response.data
-        this.data = response.data.data
-        // console.log(JSON.stringify(this.chart))
-        this.httpRequest.status = true
-        if (this.chart.privileges) {
-          this.param.privileges = this.chart.privileges
-        }
-        if (!response.data.drill) {
-          this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
-
-          this.resetDrill()
-        }
-        this.drill = response.data.drill
-        this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : []))
-
-        this.closeChangeChart()
+      save2Cache(this.panelInfo.id, view).then(() => {
+        bus.$emit('view-in-cache', { type: 'propChange', viewId: this.param.id })
       })
     },
-
     calcStyle() {
-      this.hasEdit = true
+      this.changeEditStatus(true)
       // 将视图传入echart...组件
       const view = JSON.parse(JSON.stringify(this.view))
       view.xaxis = JSON.stringify(this.view.xaxis)
@@ -1546,8 +1631,15 @@ export default {
       view.customStyle = JSON.stringify(this.view.customStyle)
       view.customFilter = JSON.stringify(this.view.customFilter)
       view.senior = JSON.stringify(this.view.senior)
-      view.data = this.data
+      // view.data = this.data
       this.chart = view
+
+      // 保存到缓存表
+      const viewSave = this.buildParam(true, 'chart', false, false)
+      if (!viewSave) return
+      save2Cache(this.panelInfo.id, viewSave)
+
+      bus.$emit('view-in-cache', { type: 'styleChange', viewId: this.param.id, viewInfo: view })
     },
 
     closeEdit() {
@@ -1570,6 +1662,9 @@ export default {
         this.$success(this.$t('commons.save_success'))
       })
     },
+    closePanelEdit() {
+      bus.$emit('change_panel_right_draw', false)
+    },
     close() {
       this.closeChangeChart()
       // 从仪表板入口关闭
@@ -1583,7 +1678,8 @@ export default {
       if (id) {
         ajaxGetDataOnly(id, this.panelInfo.id, {
           filter: [],
-          drill: this.drillClickDimensionList
+          drill: this.drillClickDimensionList,
+          queryFrom: 'panelEdit'
         }).then(response => {
           this.initTableData(response.data.tableId)
           this.view = JSON.parse(JSON.stringify(response.data))
@@ -1627,9 +1723,9 @@ export default {
         this.view = {}
       }
     },
-    getChart(id) {
+    getChart(id, queryFrom = 'panel_edit') {
       if (id) {
-        post('/chart/view/get/' + id + '/' + this.panelInfo.id, {}).then(response => {
+        getChartDetails(id, this.panelInfo.id, { queryFrom: queryFrom }).then(response => {
           this.initTableData(response.data.tableId)
           this.view = JSON.parse(JSON.stringify(response.data))
           this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
@@ -1721,6 +1817,11 @@ export default {
       this.calcStyle()
     },
 
+    onTotalCfgChange(val) {
+      this.view.customAttr.totalCfg = val
+      this.calcStyle()
+    },
+
     onChangeXAxisForm(val) {
       this.view.customStyle.xAxis = val
       this.calcStyle()
@@ -1756,6 +1857,11 @@ export default {
       this.calcStyle()
     },
 
+    onThresholdChange(val) {
+      this.view.senior.threshold = val
+      this.calcStyle()
+    },
+
     showDimensionEditFilter(item) {
       this.dimensionItem = JSON.parse(JSON.stringify(item))
       this.dimensionFilterEdit = true
@@ -2219,7 +2325,10 @@ export default {
       // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
       const current = this.$refs.dynamicChart
       if (this.view.isPlugin) {
-        current && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: this.currentAcreaNode.code })
+        current && current.callPluginInner({
+          methodName: 'registerDynamicMap',
+          methodParam: this.currentAcreaNode.code
+        })
       } else {
         current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
       }
@@ -2243,7 +2352,10 @@ export default {
         // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(nextNode.code)
         const current = this.$refs.dynamicChart
         if (this.view.isPlugin) {
-          nextNode && current && current.callPluginInner({ methodName: 'registerDynamicMap', methodParam: nextNode.code })
+          nextNode && current && current.callPluginInner({
+            methodName: 'registerDynamicMap',
+            methodParam: nextNode.code
+          })
         } else {
           nextNode && current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
         }
@@ -2268,9 +2380,17 @@ export default {
     },
 
     reset() {
-      this.getData(this.param.id)
+      this.changeEditStatus(false)
+      this.getChart(this.param.id, 'panel')
+      const _this = this
+      resetViewCacheCallBack(this.param.id, this.panelInfo.id, function(rsp) {
+        bus.$emit('view-in-cache', { type: 'propChange', viewId: _this.param.id })
+      })
+    },
+    changeEditStatus(status) {
+      this.hasEdit = status
+      this.$store.commit('recordViewEdit', { viewId: this.param.id, hasEdit: status })
     },
-
     changeChartType() {
       this.setChartDefaultOptions()
       this.calcData(true, 'chart', true, true)
@@ -2327,9 +2447,17 @@ export default {
     margin-left: 10px;
   }
 
+  .view-panel-row {
+    display: flex;
+    background-color: #f7f8fa;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100vh - 75px);
+  }
+
   .view-panel {
     display: flex;
-    height: calc(100% - 40px);
+    height: calc(100% - 80px);
     background-color: #f7f8fa;
   }
 
@@ -2432,7 +2560,7 @@ export default {
 
   .tab-header > > > .el-tabs__item {
     font-size: 12px;
-    padding: 0 40px!important;
+    padding: 0 20px !important;
   }
 
   .blackTheme .tab-header > > > .el-tabs__item {
@@ -2448,7 +2576,6 @@ export default {
   }
 
   .tab-header > > > .el-tabs__content {
-    height: 100%;
   }
 
   .draggable-group {
@@ -2622,13 +2749,38 @@ export default {
   }
 
   .result-count {
-    width: 80px;
+    width: 50px;
+  }
+  .result-count >>> input {
+    padding:0 4px;
   }
 
   .radio-span > > > .el-radio__label {
     margin-left: 4px;
   }
 
+  .view-title-name {
+    display: -moz-inline-box;
+    display: inline-block;
+    width: 130px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-left: 45px;
+  }
+
+  ::v-deep .item-axis {
+    width: 128px !important;
+  }
+
+  ::v-deep .el-slider__input {
+    width: 80px !important;
+  }
+
+  ::v-deep .el-input-number--mini {
+    width: 80px !important;
+  }
+
   .no-senior {
     width: 100%;
     text-align: center;
diff --git a/frontend/src/views/dataset/common/DatasetChartDetail.vue b/frontend/src/views/dataset/common/DatasetChartDetail.vue
index c890cddc2d..969a01d8f0 100644
--- a/frontend/src/views/dataset/common/DatasetChartDetail.vue
+++ b/frontend/src/views/dataset/common/DatasetChartDetail.vue
@@ -145,12 +145,12 @@ export default {
     init() {
       if (this.data.id) {
         if (this.type === 'dataset') {
-          post('/dataset/table/datasetDetail/' + this.data.id, null).then(res => {
+          post('/dataset/table/datasetDetail/' + this.data.id, null,false).then(res => {
             this.detail = res.data
             this.info = JSON.parse(res.data.table.info)
           })
         } else if (this.type === 'chart') {
-          post('/chart/view/chartDetail/' + this.data.id + '/' + this.panelInfo.id, null).then(res => {
+          post('/chart/view/chartDetail/' + this.data.id + '/' + this.panelInfo.id, null,false).then(res => {
             this.detail = res.data
             this.info = JSON.parse(res.data.table.info)
           })
diff --git a/frontend/src/views/dataset/data/CalcFieldEdit.vue b/frontend/src/views/dataset/data/CalcFieldEdit.vue
index 5b468dc0fa..c4f3e682b8 100644
--- a/frontend/src/views/dataset/data/CalcFieldEdit.vue
+++ b/frontend/src/views/dataset/data/CalcFieldEdit.vue
@@ -126,7 +126,7 @@
                 <br>
                 如日期格式化：MySQL使用DATE_FORMAT(date,format)；Oracle使用TO_DATE(X,[,fmt])
                 <br>
-                非直连模式数据集，使用Doris数据库函数，可参考Doris官网 http://doris.apache.org/master/zh-CN/
+                非直连模式数据集，使用Doris数据库函数，可参考Doris官网 https://doris.apache.org/zh-CN/
               </div>
               <i class="el-icon-info" style="cursor: pointer;" />
             </el-tooltip>
diff --git a/frontend/src/views/panel/ViewSelect/index.vue b/frontend/src/views/panel/ViewSelect/index.vue
index aedf7e0c26..feacb4068a 100644
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -2,7 +2,7 @@
   <el-col v-loading="loading">
     <el-row style="margin-top: 5px">
       <el-row style="margin-left: 5px;margin-right: 5px">
-        <el-col :span="23">
+        <el-col :span="17">
           <el-input
             v-model="templateFilterText"
             :placeholder="$t('panel.filter_keywords')"
@@ -11,9 +11,9 @@
             prefix-icon="el-icon-search"
           />
         </el-col>
-        <!--        <el-col v-if="!selectModel" :span="7">-->
-        <!--          <el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>-->
-        <!--        </el-col>-->
+        <el-col v-if="!selectModel" :span="7">
+          <el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>
+        </el-col>
 
       </el-row>
       <el-row style="margin-top: 5px">
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 093612249d..084cf2a8a7 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -1,7 +1,10 @@
 <template>
   <el-row>
     <el-header class="de-header">
-      <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;color: #606266;font-size: 16px">
+      <el-col
+        :span="8"
+        style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;color: #606266;font-size: 16px"
+      >
         <span style="line-height: 35px;">
           {{ $t('commons.name') }} ：{{ panelInfo.name || '测试仪表板' }}
         </span>
@@ -19,66 +22,113 @@
       </el-col>
     </el-header>
     <de-container>
-      <!--左侧导航栏-->
       <de-aside-container class="ms-aside-container">
         <div v-if="showAside" style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
-          <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
+          <div
+            style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px"
+          >
             <!-- 视图图表 start -->
-            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
+            <div
+              class="button-div-class"
+              style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;"
+            >
               <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="newChart()" />
             </div>
             <div class="button-text" style="position: relative; margin: 18px auto 16px;">
-              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+              <div
+                style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              >
                 {{ $t('panel.view') }}
               </div>
             </div>
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+              <div
+                style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              />
             </div>
             <!-- 视图图表 end -->
             <!-- 过滤组件 start -->
 
-            <div class="button-div-class" style="  width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px; ">
-              <el-button circle :class="show&&showIndex===1? 'button-show':'button-closed'" class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
+            <div
+              class="button-div-class"
+              style="  width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px; "
+            >
+              <el-button
+                circle
+                :class="show&&showIndex===1? 'button-show':'button-closed'"
+                class="el-icon-s-tools"
+                size="mini"
+                @click="showPanel(1)"
+              />
             </div>
             <div class="button-text" style=" position: relative; margin: 18px auto 16px;">
-              <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+              <div
+                style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              >
                 {{ $t('panel.module') }}
               </div>
             </div>
 
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+              <div
+                style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              />
             </div>
             <!-- 过滤组件 end -->
             <!-- 其他组件 start -->
 
-            <div class="button-div-class" style="  width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px; ">
-              <el-button circle :class="show&&showIndex===3? 'button-show':'button-closed'" class="el-icon-brush" size="mini" @click="showPanel(3)" />
+            <div
+              class="button-div-class"
+              style="  width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px; "
+            >
+              <el-button
+                circle
+                :class="show&&showIndex===3? 'button-show':'button-closed'"
+                class="el-icon-brush"
+                size="mini"
+                @click="showPanel(3)"
+              />
             </div>
             <div class="button-text" style=" position: relative; margin: 18px auto 16px;">
-              <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+              <div
+                style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              >
                 {{ $t('panel.other_module') }}
               </div>
             </div>
 
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+              <div
+                style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              />
             </div>
             <!-- 其他组件 end -->
 
             <!-- 视图复用 start -->
-            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
-              <el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-copy-document" size="mini" @click="showPanel(0)" />
+            <div
+              class="button-div-class"
+              style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;"
+            >
+              <el-button
+                :class="show&&showIndex===0? 'button-show':'button-closed'"
+                circle
+                class="el-icon-copy-document"
+                size="mini"
+                @click="showPanel(0)"
+              />
             </div>
             <div class="button-text" style="position: relative; margin: 18px auto 16px;">
-              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+              <div
+                style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              >
                 <!--                {{ $t('panel.view') }}-->
                 复用
               </div>
             </div>
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+              <div
+                style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;"
+              />
             </div>
             <!-- 视图复用 end -->
           </div>
@@ -141,12 +191,26 @@
                 class="this_mobile_canvas_main"
                 :style="mobileCanvasStyle"
               >
-                <Editor v-if="mobileEditorShow" id="editorMobile" ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" @canvasDragging="canvasDragging" />
+                <Editor
+                  v-if="mobileEditorShow"
+                  id="editorMobile"
+                  ref="editorMobile"
+                  :matrix-count="mobileMatrixCount"
+                  :out-style="outStyle"
+                  :scroll-top="scrollTop"
+                  @canvasDragging="canvasDragging"
+                />
               </el-row>
               <el-row class="this_mobile_canvas_inner_bottom">
                 <el-col :span="12">
                   <i v-if="!hasStar" class="el-icon-star-off" size="mini" @click="star" />
-                  <i v-if="hasStar" class="el-icon-star-on" style="color: #0a7be0;font-size: 18px" size="mini" @click="unstar" />
+                  <i
+                    v-if="hasStar"
+                    class="el-icon-star-on"
+                    style="color: #0a7be0;font-size: 18px"
+                    size="mini"
+                    @click="unstar"
+                  />
                 </el-col>
                 <el-col :span="12" style="float: right">
                   <i class="el-icon-refresh-right" size="mini" @click="mobileRefresh" />
@@ -160,6 +224,24 @@
           </el-col>
         </el-row>
       </de-main-container>
+
+      <div v-if="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main">
+        <div v-if="showViewToolsAside">
+          <chart-edit v-if="curComponent" ref="chartEditRef" :edit-from="'panel'" :param="chartEditParam" />
+        </div>
+        <div v-if="!showViewToolsAside">
+          <el-row style="height: 40px">
+            <el-tooltip :content="$t('chart.draw_back')">
+              <el-button class="el-icon-d-arrow-right" style="position:absolute;left: 4px;top: 5px;" size="mini" circle @click="changeRightDrawOpen(false)" />
+            </el-tooltip>
+          </el-row>
+          <el-row>
+            <div class="view-selected-message-class">
+              <span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.select_view') }}</span>
+            </div>
+          </el-row>
+        </div>
+      </div>
     </de-container>
 
     <el-dialog
@@ -202,9 +284,21 @@
     </el-dialog>
 
     <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
-      <Preview v-if="previewVisible" :in-screen="!previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
+      <Preview
+        v-if="previewVisible"
+        :in-screen="!previewVisible"
+        :show-type="canvasStyleData.selfAdaption?'full':'width'"
+      />
     </fullscreen>
-    <input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
+    <input
+      id="input"
+      ref="files"
+      type="file"
+      accept="image/*"
+      hidden
+      @click="e => {e.target.value = '';}"
+      @change="handleFileChange"
+    >
 
     <!--矩形样式组件-->
     <TextAttr v-if="showAttr" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
@@ -240,7 +334,7 @@ import componentList, {
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
-import { initPanelData } from '@/api/panel/panel'
+import { initPanelComponentsData, initPanelData, initViewCache } from '@/api/panel/panel'
 import Preview from '@/components/canvas/components/Editor/Preview'
 import AttrListExtend from '@/components/canvas/components/AttrListExtend'
 import elementResizeDetectorMaker from 'element-resize-detector'
@@ -259,6 +353,7 @@ import generateID from '@/components/canvas/utils/generateID'
 import TextAttr from '@/components/canvas/components/TextAttr'
 import ComponentWait from '@/views/panel/edit/ComponentWait'
 import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
+import ChartEdit from '@/views/chart/view/ChartEdit'
 
 export default {
   name: 'PanelEdit',
@@ -278,7 +373,8 @@ export default {
     AssistComponent,
     PanelTextEditor,
     TextAttr,
-    ChartGroup
+    ChartGroup,
+    ChartEdit
   },
   data() {
     return {
@@ -332,15 +428,29 @@ export default {
         'de-video'
       ],
       enableSureButton: false,
-      filterFromDrag: false
+      filterFromDrag: false,
+      activeToolsName: 'view',
+      rightDrawOpen: false
     }
   },
 
   computed: {
+    // 侧边显示控制
+    chartEditParam() {
+      return this.curComponent ? { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' } : {}
+    },
     // 侧边显示控制
     showAside() {
       return !this.linkageSettingStatus && !this.mobileLayoutStatus
     },
+    // 显示仪表板工具栏
+    showPanelToolsAside() {
+      return !this.curComponent
+    },
+    // 显示视图工具栏
+    showViewToolsAside() {
+      return this.curComponent && this.curComponent.type === 'view'
+    },
     showAttr() {
       if (this.mobileLayoutStatus) {
         return false
@@ -449,8 +559,10 @@ export default {
 
     this.$store.commit('setCurComponent', { component: null, index: null })
     this.$store.commit('clearLinkageSettingInfo', false)
+    this.$store.commit('resetViewEditInfo')
   },
   mounted() {
+    debugger
     // this.insertToBody()
     bus.$on('component-on-drag', () => {
       this.show = false
@@ -466,6 +578,10 @@ export default {
     bus.$on('previewFullScreenClose', () => {
       this.previewVisible = false
     })
+
+    bus.$on('change_panel_right_draw', (param) => {
+      this.changeRightDrawOpen(param)
+    })
     const _this = this
     const erd = elementResizeDetectorMaker()
     // 监听div变动事件
@@ -480,6 +596,14 @@ export default {
     elx && elx.remove()
   },
   methods: {
+    changeRightDrawOpen(param) {
+      this.rightDrawOpen = param
+      if (this.rightDrawOpen) {
+        setTimeout(() => {
+          this.outStyle.width = this.outStyle.width + 0.000001
+        }, 0)
+      }
+    },
     init(panelId) {
       const _this = this
       _this.initHasStar()
@@ -493,7 +617,16 @@ export default {
         _this.$store.dispatch('panel/setCanvasStyleDataTemp', null)
       } else if (panelId) {
         initPanelData(panelId, function() {
-          _this.$store.commit('recordSnapshot', 'init')// 记录快照
+          // 初始化视图缓存
+          initViewCache(panelId)
+          // 初始化保存状态
+          setTimeout(() => {
+            _this.$store.commit('refreshSaveStatus')
+          }, 500)
+          // initPanelComponentsData(panelId, function(rsp) {
+          //   _this.$store.commit('initPanelComponents', rsp)// 初始化仪表板组件视图数据
+          //   _this.$store.commit('recordSnapshot', 'init')// 记录快照
+          // })
         })
       }
     },
@@ -848,14 +981,21 @@ export default {
       this.clearCurrentInfo()
       this.$store.commit('setCurComponent', { component: component, index: this.componentData.length - 1 })
 
-      // 编辑时临时保存 当前修改的画布
-      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
-      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
-      if (this.curComponent.type === 'view') {
-        this.$store.dispatch('chart/setViewId', null)
-        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
-      }
+      // 打开属性栏
+      bus.$emit('change_panel_right_draw', true)
+
+      //
+      // // 编辑时临时保存 当前修改的画布
+      // this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      // this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      // if (this.curComponent.type === 'view') {
+      //   this.$store.dispatch('chart/setViewId', null)
+      //   this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+      //   bus.$emit('PanelSwitchComponent', {
+      //     name: 'ChartEdit',
+      //     param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }
+      //   })
+      // }
     },
     canvasScroll(event) {
       this.scrollLeft = event.target.scrollLeft
@@ -934,212 +1074,250 @@ export default {
     border-bottom: 1px solid #E6E6E6;
 
   }
+
   .blackTheme .de-header {
-      background-color: var(--SiderBG) !important;
-      color: var(--TextActive);
+    background-color: var(--SiderBG) !important;
+    color: var(--TextActive);
   }
 
   .showLeftPanel {
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
 </style>
 
 <style lang="scss" scoped>
-.leftPanel-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-  background: rgba(0, 0, 0, .2);
-  z-index: -1;
-}
-
-.leftPanel {
-  width: 100%;
-  max-width: 300px;
-  height: calc(100vh - 35px);
-  position: fixed;
-  top: 91px;
-  left: 60px;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-  transition: all .25s cubic-bezier(.7, .3, .1, 1);
-  transform: translate(100%);
-  background: var(--SiderBG, #fff);
-  z-index: 1003;
-}
-
-.show {
-  transition: all .3s cubic-bezier(.7, .3, .1, 1);
-
   .leftPanel-background {
-    z-index: 1002;
-    opacity: 1;
-    width: 100%;
-    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+    background: rgba(0, 0, 0, .2);
+    z-index: -1;
   }
 
   .leftPanel {
-    transform: translate(0);
+    width: 100%;
+    max-width: 300px;
+    height: calc(100vh - 35px);
+    position: fixed;
+    top: 91px;
+    left: 60px;
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+    transition: all .25s cubic-bezier(.7, .3, .1, 1);
+    transform: translate(100%);
+    background: var(--SiderBG, #fff);
+    z-index: 1003;
   }
-}
 
-.mobile_canvas_main{
-  width: 80%;
-  height: 90%;
-  margin-left: 10%;
-  margin-top: 3%;
-}
+  .show {
+    transition: all .3s cubic-bezier(.7, .3, .1, 1);
 
-.this_mobile_canvas{
-  border-radius:30px;
-  min-width: 300px;
-  max-width: 350px;
-  min-height: 600px;
-  max-height: 700px;
-  overflow: hidden;
-  background-color: #000000;
-  background-size:100% 100% !important;
-}
+    .leftPanel-background {
+      z-index: 1002;
+      opacity: 1;
+      width: 100%;
+      height: 100%;
+    }
 
-.this_mobile_canvas_inner_top{
-  vertical-align: middle;
-  text-align: center;
-  background-color: #f7f8fa;
-  height: 30px;
-  line-height: 30px;
-  font-size: 14px;
-  width: 100%;
-}
-
-.this_mobile_canvas_top{
-  height: 30px;
-  width: 100%;
-}
-
-.this_mobile_canvas_inner_bottom{
-  background-color: #f7f8fa;
-  line-height: 30px;
-  vertical-align: middle;
-  color: gray;
-  height: 30px;
-  width: 100%;
-}
-
-.this_mobile_canvas_bottom{
-  height: 30px;
-  width: 100%;
-}
-
-.this_mobile_canvas_main{
-  overflow-x: hidden;
-  overflow-y: auto;
-  height:  calc(100% - 120px);;
-  background-color: #d7d9e3;
-  background-size:100% 100% !important;
-}
-
-.this_mobile_canvas_cell{
-  text-align: center;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.this_mobile_canvas_wait_cell{
-  background-size:100% 100% !important;
-  border: 2px solid #9ea6b2
-}
-
-.this_canvas{
-  width: 100%;
-  height: calc(100vh - 35px);
-  overflow-x: hidden;
-  overflow-y: auto;
-  background-size:100% 100% !important;
-}
-.el-main{
-  height: calc(100vh - 35px);
-  padding: 0!important;
-  overflow: auto;
-  position: relative;
-}
-
-.el-main ::v-deep .el-drawer__wrapper{
-  width: 310px!important;
-}
-.el-main ::v-deep .el-drawer__body{
-  overflow-y: auto;
-}
-.button-show{
-    background-color: var(--ContentBG, #ebf2fe)!important;
-}
-
-.button-closed{
-  background-color: var(--SiderBG, #ffffff)!important;
-}
-.style-aside{
-  width: 250px;
-  max-width:250px!important;
-  border: 1px solid var(--TableBorderColor, #E6E6E6);
-  padding: 10px;
-  transition: all 0.3s;
-
-}
-.placeholder{
-  font-size: 14px;
-  color: gray;
-}
-.show {
-  transform: translateX(0);
-}
-
-.hidden {
-  transform: translateX(100%);
-}
-
-.style-edit-dialog {
-  width: 300px!important;
-  height: 400px!important;
-
-  .el-dialog__header{
-    padding: 10px 20px !important;
-
-    .el-dialog__headerbtn {
-      top: 15px !important;
+    .leftPanel {
+      transform: translate(0);
     }
   }
-  .el-dialog__body{
-    padding: 1px 15px !important;
+
+  .mobile_canvas_main {
+    width: 80%;
+    height: 90%;
+    margin-left: 10%;
+    margin-top: 3%;
   }
-}
-.style-hidden{
-  overflow-x: hidden;
-}
-.button-text {
+
+  .this_mobile_canvas {
+    border-radius: 30px;
+    min-width: 300px;
+    max-width: 350px;
+    min-height: 600px;
+    max-height: 700px;
+    overflow: hidden;
+    background-color: #000000;
+    background-size: 100% 100% !important;
+  }
+
+  .this_mobile_canvas_inner_top {
+    vertical-align: middle;
+    text-align: center;
+    background-color: #f7f8fa;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    width: 100%;
+  }
+
+  .this_mobile_canvas_top {
+    height: 30px;
+    width: 100%;
+  }
+
+  .this_mobile_canvas_inner_bottom {
+    background-color: #f7f8fa;
+    line-height: 30px;
+    vertical-align: middle;
+    color: gray;
+    height: 30px;
+    width: 100%;
+  }
+
+  .this_mobile_canvas_bottom {
+    height: 30px;
+    width: 100%;
+  }
+
+  .this_mobile_canvas_main {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: calc(100% - 120px);;
+    background-color: #d7d9e3;
+    background-size: 100% 100% !important;
+  }
+
+  .this_mobile_canvas_cell {
+    text-align: center;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .this_mobile_canvas_wait_cell {
+    background-size: 100% 100% !important;
+    border: 2px solid #9ea6b2
+  }
+
+  .this_canvas {
+    width: 100%;
+    height: calc(100vh - 35px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-size: 100% 100% !important;
+  }
+
+  .el-main {
+    height: calc(100vh - 35px);
+    padding: 0 !important;
+    overflow: auto;
+    position: relative;
+  }
+
+  .el-main ::v-deep .el-drawer__wrapper {
+    width: 310px !important;
+  }
+
+  .el-main ::v-deep .el-drawer__body {
+    overflow-y: auto;
+  }
+
+  .button-show {
+    background-color: var(--ContentBG, #ebf2fe) !important;
+  }
+
+  .button-closed {
+    background-color: var(--SiderBG, #ffffff) !important;
+  }
+
+  .style-aside {
+    width: 250px;
+    max-width: 250px !important;
+    border: 1px solid var(--TableBorderColor, #E6E6E6);
+    padding: 10px;
+    transition: all 0.3s;
+
+  }
+
+  .placeholder {
+    font-size: 14px;
+    color: gray;
+  }
+
+  .show {
+    transform: translateX(0);
+  }
+
+  .hidden {
+    transform: translateX(100%);
+  }
+
+  .style-edit-dialog {
+    width: 300px !important;
+    height: 400px !important;
+
+    .el-dialog__header {
+      padding: 10px 20px !important;
+
+      .el-dialog__headerbtn {
+        top: 15px !important;
+      }
+    }
+
+    .el-dialog__body {
+      padding: 1px 15px !important;
+    }
+  }
+
+  .style-hidden {
+    overflow-x: hidden;
+  }
+
+  .button-text {
     color: var(--TextActive);
-}
-  .mobile-canvas{
+  }
+
+  .mobile-canvas {
     width: 300px;
     height: 600px;
   }
 
-.info-class{
-  text-align: center;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #FFFFFF;
-  font-size: 12px;
-  color: #9ea6b2;
-}
+  .info-class {
+    text-align: center;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #FFFFFF;
+    font-size: 12px;
+    color: #9ea6b2;
+  }
 
-::-webkit-scrollbar {
-  width: 2px!important;
-  height: 2px!important;
-}
+  ::-webkit-scrollbar {
+    width: 2px !important;
+    height: 2px !important;
+  }
+
+  .tools-window-main {
+    width: 300px;
+    background-color: #FFFFFF;
+    transition: 1s;
+  }
+
+  .tools-window-tabs {
+    height: calc(100vh - 100px);
+    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  > > > .el-tabs__item {
+    padding: 0 15px;
+  }
+  .view-selected-message-class {
+    font-size: 12px;
+    color: #9ea6b2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100vh - 100px);
+  }
 
 </style>
diff --git a/mobile/pom.xml b/mobile/pom.xml
index 9585aafe53..a9cea5fa16 100644
--- a/mobile/pom.xml
+++ b/mobile/pom.xml
@@ -6,7 +6,7 @@
     <parent>
         <artifactId>dataease-server</artifactId>
         <groupId>io.dataease</groupId>
-        <version>1.8.0</version>
+        <version>1.9.0</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>
diff --git a/pom.xml b/pom.xml
index e59e6851b1..19d17f696d 100644
--- a/pom.xml
+++ b/pom.xml
@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>io.dataease</groupId>
     <artifactId>dataease-server</artifactId>
-    <version>1.8.0</version>
+    <version>1.9.0</version>
     <packaging>pom</packaging>
 
     <parent>