diff --git a/README.md b/README.md
index 0af2e887db..4352dd9327 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,6 @@
 <p align="center">
   <a href="https://www.gnu.org/licenses/gpl-3.0.html"><img src="https://img.shields.io/github/license/dataease/dataease?color=%231890FF" alt="License: GPL v3"></a>
   <a href="https://app.codacy.com/gh/dataease/dataease?utm_source=github.com&utm_medium=referral&utm_content=dataease/dataease&utm_campaign=Badge_Grade_Dashboard"><img src="https://app.codacy.com/project/badge/Grade/da67574fd82b473992781d1386b937ef" alt="Codacy"></a>
-  <a href="https://github.com/dataease/dataease/releases/latest"><img src="https://img.shields.io/github/v/release/dataease/dataease" alt="Latest release"></a>
   <a href="https://github.com/dataease/dataease"><img src="https://img.shields.io/github/stars/dataease/dataease?color=%231890FF&style=flat-square" alt="Stars"></a>
   <a href="https://app.fossa.com/projects/git%2Bgithub.com%2F1dataease%2Fdataease?ref=badge_shield"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdataease%2Fdataease.svg?type=shield" alt="FOSSA Status"></a>  
 </p>
@@ -13,23 +12,21 @@
 
 DataEase 是开源的数据可视化分析工具，帮助用户快速分析数据并洞察业务趋势，从而实现业务的改进与优化。DataEase 支持丰富的数据源连接，能够通过拖拉拽方式快速制作图表，并可以方便的与他人分享。
 
-![de-architecture](https://dataease.io/images/screenshot/de-chart-new.jpg)
-
 **DataEase 的功能包括：**
 
--   图表展示：支持 PC 端、移动端、大屏;
--   图表制作：支持丰富的图表类型(Apache ECharts / AntV)、支持拖拉拽方式快速制作仪表板;
--   数据引擎：支持直连模式、本地模式(基于 Apache Doris / Kettle 实现);
+-   图表展示：支持 PC 端、移动端、大屏及嵌入式使用场景;
+-   图表制作：支持丰富的图表类型、支持拖拉拽方式快速制作仪表板;
+-   数据引擎：基于 Apache Calcite，实现统一的 SQL 解析、验证、优化和执行;
 -   数据连接：支持数据仓库/数据湖、OLAP 数据库、OLTP 数据库、Excel 数据文件、API 等各种数据源。
 
-## DataEase 的优势
+**DataEase 的优势：**
 
 -   开源开放：零门槛，线上快速获取和安装；快速获取用户反馈、按月发布新版本；
 -   简单易用：极易上手，通过鼠标点击和拖拽即可完成分析；
--   秒级响应：集成 Apache Doris，超大数据量下秒级查询返回延时；
+-   全场景支持：多平台支持、多种嵌入式方案支持；
 -   安全分享：支持多种数据分享方式，确保数据安全。
 
-## DataEase 支持的数据源
+**DataEase 支持的数据源：**
 
 <p align="center">
   <img src="https://dataease.io/images/dataSource/excel.jpg" alt="excel" border="0" width="155" height="107"/>
@@ -37,36 +34,18 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
   <img src="https://dataease.io/images/dataSource/oracle.jpg" alt="oracle" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/sqlservel.jpg" alt="sqlserver" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/mariadb.jpg" alt="mariadb" border="0" width="155" height="107"/>  
-  <img src="https://dataease.io/images/dataSource/elasticsearch.jpg" alt="elasticsearch" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/clickhouse.jpg" alt="clickhouse" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/doris.jpg" alt="doris" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/mongodb.jpg" alt="mongodb" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/redshift.jpg" alt="redshift" border="0" width="155" height="107"/>
-  <img src="https://dataease.io/images/dataSource/hive.png" alt="hive" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/DB2.jpg" alt="DB2" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/API.jpg" alt="API" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/TiDB.jpg" alt="TiDB" border="0" width="155" height="107"/>
   <img src="https://dataease.io/images/dataSource/StarRocks.jpg" alt="StarRocks" border="0" width="155" height="107"/>
-  <img src="https://dataease.io/images/dataSource/PrestoDB.jpg" alt="PrestoDB" border="0" width="155" height="107"/>
-  <img src="https://dataease.io/images/dataSource/dm.jpg" alt="dm" border="0" width="155" height="107"/>
-  <img src="https://dataease.io/images/dataSource/kingbase.jpg" alt="KingBase" border="0" width="155" height="107"/>
-  <img src="https://dataease.io/images/dataSource/kylin.jpg" alt="Kylin" border="0" width="180" height="107"/>
 </p>
 
-## DataEase 模板市场
-
--   [模板市场](https://dataease.io/templates/)
-
-![模板市场](https://dataease.io/images/templates/templates.gif)
-
 ## 快速开始
 
-**在线体验**
-
--   环境地址：<https://dataease.fit2cloud.com/>
--   用户名：demo
--   密码：dataease
-
 **一键安装**
 
 仅需两步快速安装 DataEase：
@@ -83,17 +62,13 @@ curl -sSL https://dataease.oss-cn-hangzhou.aliyuncs.com/quick_start.sh | bash
 -   [在线文档](https://dataease.io/docs/)
 -   [社区论坛](https://bbs.fit2cloud.com/c/de/6)
 
-**加入微信交流群**
-
-<img src="https://dataease.oss-cn-hangzhou.aliyuncs.com/img/wechat-helper.png" width="156" height="156"/>
-
 ## DataEase 的技术栈
 
 -   前端：[Vue.js](https://vuejs.org/)、[Element](https://element.eleme.cn/)
--   图库：[Apache ECharts](https://github.com/apache/echarts)、[AntV](https://antv.vision/zh)
+-   图库：[AntV](https://antv.vision/zh)
 -   后端：[Spring Boot](https://spring.io/projects/spring-boot)
 -   中间件：[MySQL](https://www.mysql.com/)
--   数据处理：[Kettle](https://github.com/pentaho/pentaho-kettle)、[Apache Doris](https://github.com/apache/doris/)
+-   数据处理：[Apache Calcite](https://github.com/apache/calcite/)
 -   基础设施：[Docker](https://www.docker.com/)
 
 ## Star History
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 325315cf9f..f647db8531 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -951,6 +951,7 @@ export default {
     field_can_not_empty: '字段不能为空',
     conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
     remark: '备注',
+    remark_show: '显示备注',
     remark_edit: '编辑备注',
     remark_bg_color: '背景填充',
     quota_font_family: '值字体',
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
index bf0f2dd0dc..b8e56891ec 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue
@@ -199,7 +199,7 @@ const getQuotaField = id => {
 }
 
 const isValidField = field => {
-  return field.id !== 'count' && field.deType !== 0 && field.deType !== 1 && field.deType !== 5
+  return field.id !== '-1' && state.quotaData.findIndex(ele => ele.id === field.id) !== -1
 }
 
 onMounted(() => {
@@ -282,27 +282,25 @@ onMounted(() => {
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-select
               :effect="themes"
-              v-model="state.miscForm.gaugeMinField.id"
               :placeholder="t('chart.field')"
+              :class="{ 'invalid-field': !validMinField }"
+              v-model="state.miscForm.gaugeMinField.id"
               @change="changeQuotaField('min', true)"
             >
               <el-option
+                class="series-select-option"
                 v-for="item in state.quotaData"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id"
               >
-                <span style="float: left">
-                  <el-icon>
-                    <Icon
-                      :className="`field-icon-${fieldType[item.deType]}`"
-                      :name="`field_${fieldType[item.deType]}`"
-                    ></Icon>
-                  </el-icon>
-                </span>
-                <span class="field-item">
-                  {{ item.name }}
-                </span>
+                <el-icon style="margin-right: 8px">
+                  <Icon
+                    :className="`field-icon-${fieldType[item.deType]}`"
+                    :name="`field_${fieldType[item.deType]}`"
+                  />
+                </el-icon>
+                {{ item.name }}
               </el-option>
             </el-select>
           </el-form-item>
@@ -311,8 +309,8 @@ onMounted(() => {
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-select
               :effect="themes"
-              v-model="state.miscForm.gaugeMinField.summary"
               :placeholder="t('chart.summary')"
+              v-model="state.miscForm.gaugeMinField.summary"
               @change="changeQuotaField('min')"
             >
               <el-option v-if="validMinField" key="sum" value="sum" :label="t('chart.sum')" />
@@ -375,27 +373,25 @@ onMounted(() => {
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-select
               :effect="themes"
-              v-model="state.miscForm.gaugeMaxField.id"
               :placeholder="t('chart.field')"
+              :class="{ 'invalid-field': !validMaxField }"
+              v-model="state.miscForm.gaugeMaxField.id"
               @change="changeQuotaField('max', true)"
             >
               <el-option
+                class="series-select-option"
                 v-for="item in state.quotaData"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id"
               >
-                <span style="float: left">
-                  <el-icon>
-                    <Icon
-                      :className="`field-icon-${fieldType[item.deType]}`"
-                      :name="`field_${fieldType[item.deType]}`"
-                    ></Icon>
-                  </el-icon>
-                </span>
-                <span class="field-item">
-                  {{ item.name }}
-                </span>
+                <el-icon style="margin-right: 8px">
+                  <Icon
+                    :className="`field-icon-${fieldType[item.deType]}`"
+                    :name="`field_${fieldType[item.deType]}`"
+                  />
+                </el-icon>
+                {{ item.name }}
               </el-option>
             </el-select>
           </el-form-item>
@@ -519,8 +515,9 @@ onMounted(() => {
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-select
               :effect="themes"
-              v-model="state.miscForm.liquidMaxField.id"
               :placeholder="t('chart.field')"
+              :class="{ 'invalid-field': !validLiquidMaxField }"
+              v-model="state.miscForm.liquidMaxField.id"
               @change="changeQuotaField('max', true)"
             >
               <el-option
@@ -847,22 +844,32 @@ onMounted(() => {
     flex-direction: row;
     justify-content: space-between;
   }
+
   :deep(.dynamic-item) {
     width: 100px !important;
   }
 }
+
 .field-item {
   float: left;
   color: #8492a6;
   font-size: 12px;
 }
+
 .margin-bottom-8 {
   margin-bottom: 8px !important;
 }
+
 .series-select-option {
   display: flex;
   align-items: center;
   justify-content: start;
   padding: 0 11px;
 }
+
+.invalid-field {
+  ::v-deep(.ed-input__wrapper) {
+    box-shadow: 0 0 0 1px rgb(245, 74, 69) inset !important;
+  }
+}
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
index 178d77c595..feea8b5fc1 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick } from 'vue'
+import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
   COLOR_PANEL,
@@ -10,6 +10,8 @@ import {
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
+import { ElButton, ElIcon } from 'element-plus-secondary'
+import Icon from '@/components/icon-custom/src/Icon.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { batchOptStatus } = storeToRefs(dvMainStore)
 
@@ -55,7 +57,6 @@ const fontSizeList = computed(() => {
 })
 
 const changeTitleStyle = prop => {
-  console.log(prop)
   emit('onTextChange', state.titleForm, prop)
 }
 
@@ -73,6 +74,25 @@ const init = () => {
   })
 }
 
+const showEditRemark = ref<boolean>(false)
+const tempRemark = ref<string>('')
+
+const openEditRemark = () => {
+  tempRemark.value = cloneDeep(state.titleForm.remark)
+  showEditRemark.value = true
+}
+
+const closeEditRemark = () => {
+  showEditRemark.value = false
+  tempRemark.value = ''
+}
+
+const saveEditRemark = () => {
+  showEditRemark.value = false
+  state.titleForm.remark = tempRemark.value
+  changeTitleStyle('remark')
+}
+
 onMounted(() => {
   init()
 })
@@ -87,219 +107,268 @@ watch(
 </script>
 
 <template>
-  <el-form
-    ref="titleForm"
-    :disabled="!state.titleForm.show"
-    :model="state.titleForm"
-    label-position="top"
-  >
-    <el-form-item
-      :label="t('chart.title')"
-      class="form-item"
-      :class="'form-item-' + themes"
-      v-if="!batchOptStatus"
+  <div>
+    <el-form
+      ref="titleForm"
+      :disabled="!state.titleForm.show"
+      :model="state.titleForm"
+      label-position="top"
     >
-      <el-input
-        :effect="themes"
-        v-model="chart.title"
-        size="small"
-        maxlength="100"
-        :placeholder="t('chart.title')"
-        clearable
-        @blur="changeTitleStyle('title')"
-      />
-    </el-form-item>
-
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      :effect="themes"
-      :label="t('chart.text')"
-    >
-      <el-select
-        :effect="themes"
-        v-model="state.titleForm.fontFamily"
-        :placeholder="t('chart.font_family')"
-        @change="changeTitleStyle('fontFamily')"
+      <el-form-item
+        :label="t('chart.title')"
+        class="form-item"
+        :class="'form-item-' + themes"
+        v-if="!batchOptStatus"
       >
-        <el-option
-          v-for="option in fontFamily"
-          :key="option.value"
-          :label="option.name"
-          :value="option.value"
-        />
-      </el-select>
-    </el-form-item>
-
-    <div style="display: flex">
-      <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
-        <el-color-picker
+        <el-input
           :effect="themes"
-          v-model="state.titleForm.color"
-          class="color-picker-style"
-          :predefine="predefineColors"
-          @change="changeTitleStyle('color')"
-          is-custom
+          v-model="chart.title"
+          size="small"
+          maxlength="100"
+          :placeholder="t('chart.title')"
+          clearable
+          @blur="changeTitleStyle('title')"
         />
       </el-form-item>
-      <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
-        <el-tooltip content="字号" :effect="toolTip" placement="top">
-          <el-select
-            style="width: 56px"
-            :effect="themes"
-            v-model="state.titleForm.fontSize"
-            :placeholder="t('chart.text_fontsize')"
-            size="small"
-            @change="changeTitleStyle('fontSize')"
-          >
-            <el-option
-              v-for="option in fontSizeList"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </el-form-item>
 
-      <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
+      <el-form-item
+        class="form-item"
+        :class="'form-item-' + themes"
+        :effect="themes"
+        :label="t('chart.text')"
+      >
         <el-select
           :effect="themes"
-          v-model="state.titleForm.letterSpace"
-          :placeholder="t('chart.quota_letter_space')"
-          @change="changeTitleStyle('letterSpace')"
+          v-model="state.titleForm.fontFamily"
+          :placeholder="t('chart.font_family')"
+          @change="changeTitleStyle('fontFamily')"
         >
-          <template #prefix>
-            <el-icon>
-              <Icon name="icon_letter-spacing_outlined" />
-            </el-icon>
-          </template>
           <el-option
-            v-for="option in fontLetterSpace"
+            v-for="option in fontFamily"
             :key="option.value"
             :label="option.name"
             :value="option.value"
           />
         </el-select>
       </el-form-item>
-    </div>
 
-    <el-space>
+      <div style="display: flex">
+        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
+          <el-color-picker
+            :effect="themes"
+            v-model="state.titleForm.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeTitleStyle('color')"
+            is-custom
+          />
+        </el-form-item>
+        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
+          <el-tooltip content="字号" :effect="toolTip" placement="top">
+            <el-select
+              style="width: 56px"
+              :effect="themes"
+              v-model="state.titleForm.fontSize"
+              :placeholder="t('chart.text_fontsize')"
+              size="small"
+              @change="changeTitleStyle('fontSize')"
+            >
+              <el-option
+                v-for="option in fontSizeList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-tooltip>
+        </el-form-item>
+
+        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
+          <el-select
+            :effect="themes"
+            v-model="state.titleForm.letterSpace"
+            :placeholder="t('chart.quota_letter_space')"
+            @change="changeTitleStyle('letterSpace')"
+          >
+            <template #prefix>
+              <el-icon>
+                <Icon name="icon_letter-spacing_outlined" />
+              </el-icon>
+            </template>
+            <el-option
+              v-for="option in fontLetterSpace"
+              :key="option.value"
+              :label="option.name"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <el-space>
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <el-checkbox
+            :effect="themes"
+            class="icon-checkbox"
+            v-model="state.titleForm.isBolder"
+            @change="changeTitleStyle('isBolder')"
+          >
+            <el-tooltip :effect="toolTip" placement="top">
+              <template #content>
+                {{ t('chart.bolder') }}
+              </template>
+              <div
+                class="icon-btn"
+                :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
+              >
+                <el-icon>
+                  <Icon name="icon_bold_outlined" />
+                </el-icon>
+              </div>
+            </el-tooltip>
+          </el-checkbox>
+        </el-form-item>
+
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <el-checkbox
+            :effect="themes"
+            class="icon-checkbox"
+            v-model="state.titleForm.isItalic"
+            @change="changeTitleStyle('isItalic')"
+          >
+            <el-tooltip :effect="toolTip" placement="top">
+              <template #content>
+                {{ t('chart.italic') }}
+              </template>
+              <div
+                class="icon-btn"
+                :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
+              >
+                <el-icon>
+                  <Icon name="icon_italic_outlined" />
+                </el-icon>
+              </div>
+            </el-tooltip>
+          </el-checkbox>
+        </el-form-item>
+
+        <div class="position-divider" :class="'position-divider--' + themes"></div>
+
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <el-radio-group
+            :effect="themes"
+            class="icon-radio-group"
+            v-model="state.titleForm.hPosition"
+            @change="changeTitleStyle('hPosition')"
+          >
+            <el-radio :effect="themes" label="left">
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.text_pos_left') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
+                >
+                  <el-icon>
+                    <Icon name="icon_left-alignment_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-radio>
+            <el-radio :effect="themes" label="center">
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.text_pos_center') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.titleForm.hPosition === 'center'
+                  }"
+                >
+                  <el-icon>
+                    <Icon name="icon_center-alignment_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-radio>
+            <el-radio :effect="themes" label="right">
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.text_pos_right') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.titleForm.hPosition === 'right'
+                  }"
+                >
+                  <el-icon>
+                    <Icon name="icon_right-alignment_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-space>
+
       <el-form-item class="form-item" :class="'form-item-' + themes">
         <el-checkbox
+          size="small"
           :effect="themes"
-          class="icon-checkbox"
-          v-model="state.titleForm.isBolder"
-          @change="changeTitleStyle('isBolder')"
+          v-model="state.titleForm.fontShadow"
+          @change="changeTitleStyle('fontShadow')"
         >
-          <el-tooltip :effect="toolTip" placement="top">
-            <template #content>
-              {{ t('chart.bolder') }}
-            </template>
-            <div
-              class="icon-btn"
-              :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
-            >
-              <el-icon>
-                <Icon name="icon_bold_outlined" />
-              </el-icon>
-            </div>
-          </el-tooltip>
+          {{ t('chart.font_shadow') }}
         </el-checkbox>
       </el-form-item>
 
       <el-form-item class="form-item" :class="'form-item-' + themes">
         <el-checkbox
+          size="small"
           :effect="themes"
-          class="icon-checkbox"
-          v-model="state.titleForm.isItalic"
-          @change="changeTitleStyle('isItalic')"
+          v-model="state.titleForm.remarkShow"
+          @change="changeTitleStyle('remarkShow')"
         >
-          <el-tooltip :effect="toolTip" placement="top">
-            <template #content>
-              {{ t('chart.italic') }}
-            </template>
-            <div
-              class="icon-btn"
-              :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
-            >
-              <el-icon>
-                <Icon name="icon_italic_outlined" />
-              </el-icon>
-            </div>
-          </el-tooltip>
+          {{ t('chart.remark_show') }}
         </el-checkbox>
       </el-form-item>
-
-      <div class="position-divider" :class="'position-divider--' + themes"></div>
-
-      <el-form-item class="form-item" :class="'form-item-' + themes">
-        <el-radio-group
-          :effect="themes"
-          class="icon-radio-group"
-          v-model="state.titleForm.hPosition"
-          @change="changeTitleStyle('hPosition')"
-        >
-          <el-radio :effect="themes" label="left">
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.text_pos_left') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
-              >
-                <el-icon>
-                  <Icon name="icon_left-alignment_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-radio>
-          <el-radio :effect="themes" label="center">
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.text_pos_center') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'center' }"
-              >
-                <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-radio>
-          <el-radio :effect="themes" label="right">
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.text_pos_right') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'right' }"
-              >
-                <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-radio>
-        </el-radio-group>
+      <el-form-item class="form-item" :class="'form-item-' + themes" style="margin-left: 22px">
+        <label class="remark-label" :class="{ 'remark-label--dark': themes === 'dark' }">
+          {{ t('chart.remark_edit') }}
+        </label>
+        <el-button text @click="openEditRemark" :effect="themes">
+          <el-icon size="14px">
+            <Icon name="icon_edit_outlined" />
+          </el-icon>
+        </el-button>
       </el-form-item>
-    </el-space>
+    </el-form>
 
-    <el-form-item class="form-item" :class="'form-item-' + themes">
-      <el-checkbox
-        size="small"
-        :effect="themes"
-        v-model="state.titleForm.fontShadow"
-        @change="changeTitleStyle('fontShadow')"
-      >
-        {{ t('chart.font_shadow') }}
-      </el-checkbox>
-    </el-form-item>
-  </el-form>
+    <el-dialog
+      :title="t('chart.remark_edit')"
+      :visible="showEditRemark"
+      v-model="showEditRemark"
+      width="420px"
+      :close-on-click-modal="false"
+    >
+      <div @keydown.stop @keyup.stop>
+        <el-form-item :label="t('chart.remark')" class="form-item" prop="chartShowName">
+          <el-input type="textarea" autosize v-model="tempRemark" :maxlength="50" clearable />
+        </el-form-item>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeEditRemark">{{ t('chart.cancel') }}</el-button>
+          <el-button type="primary" @click="saveEditRemark()">{{ t('chart.confirm') }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <style lang="less" scoped>
@@ -401,4 +470,16 @@ watch(
     background: rgba(235, 235, 235, 0.15);
   }
 }
+.remark-label {
+  color: var(--N600, #646a73);
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+
+  &.remark-label--dark {
+    color: var(--N600-Dark, #a6a6a6);
+  }
+}
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 50743ba206..d4e6d92910 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1088,7 +1088,7 @@ const onRefreshChange = val => {
             <span style="font-size: 14px">{{ view.title }}</span>
           </el-row>
 
-          <el-row style="height: calc(100vh - 110px)">
+          <el-row style="height: calc(100vh - 110px); overflow-y: auto">
             <div class="query-style-tab" v-if="view.type === 'VQuery'">
               <div class="tab-container" style="width: 100%">
                 <el-tabs v-model="tabActiveVQuery">
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 8626c69479..bac2b3e34f 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -101,6 +101,10 @@ const snapshotStore = snapshotStoreWithOut()
 const state = reactive({
   initReady: true, //curComponent 切换期间 不接收外部的calcData 和 renderChart 事件
   title_show: true,
+  title_remark: {
+    show: false,
+    remark: ''
+  },
   title_class: {
     fontSize: '18px',
     color: '#303133',
@@ -240,6 +244,9 @@ const initTitle = () => {
         customStyle.background.alpha
       )
     }
+
+    state.title_remark.show = customStyle.text.remarkShow
+    state.title_remark.remark = customStyle.text.remark
   }
 }
 
@@ -563,8 +570,16 @@ const toolTip = computed(() => {
       <div
         class="icons-container"
         :class="{ 'is-editing': titleEditStatus }"
-        v-if="trackMenu.length > 0"
+        v-if="trackMenu.length > 0 || state.title_remark.show"
       >
+        <el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
+          <template #content>
+            <div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
+          </template>
+          <el-icon size="16px" class="inner-icon">
+            <Icon name="icon_info_outlined" />
+          </el-icon>
+        </el-tooltip>
         <el-tooltip :effect="toolTip" placement="top" content="已设置联动" v-if="hasLinkIcon">
           <el-icon size="16px" class="inner-icon">
             <Icon name="icon_link-record_outlined" />
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
index 813dc642bd..ffea6854cb 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@@ -131,6 +131,7 @@ const initForm = type => {
   if (type === 'oracle') {
     form.value.configuration.connectionType = 'sid'
   }
+
   form.value.type = type
   setTimeout(() => {
     dsForm.value.clearValidate()