From b4b736de7e382e2f4ce1908672130e5657a402f2 Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Thu, 10 Mar 2022 13:34:19 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=96=87=E6=9C=AC=E5=8D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/custom-component/UserView.vue      |  13 +-
 frontend/src/icons/svg/label.svg              |   2 +
 frontend/src/lang/en.js                       |   4 +-
 frontend/src/lang/tw.js                       |   4 +-
 frontend/src/lang/zh.js                       |   4 +-
 frontend/src/views/chart/chart/util.js        |  14 ++
 .../components/normal/LabelNormalText.vue     | 180 ++++++++++++++++++
 .../components/shape-attr/ColorSelector.vue   |   6 +-
 .../components/shape-attr/SizeSelector.vue    |   8 +-
 .../shape-attr/SizeSelectorAntV.vue           |   8 +-
 frontend/src/views/chart/view/ChartEdit.vue   |  28 ++-
 11 files changed, 243 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/icons/svg/label.svg
 create mode 100644 frontend/src/views/chart/components/normal/LabelNormalText.vue

diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 4d7cac0222..08e2c7e65e 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'
     },
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 f5eafb711e..b01fc62e48 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1056,7 +1056,9 @@ export default {
     total_pos_top: 'Top',
     total_pos_bottom: 'Bottom',
     total_pos_left: 'Left',
-    total_pos_right: 'Right'
+    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',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index c9f61df9e1..edd2787ce9 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1056,7 +1056,9 @@ export default {
     total_pos_top: '頂部',
     total_pos_bottom: '底部',
     total_pos_left: '左側',
-    total_pos_right: '右側'
+    total_pos_right: '右側',
+    chart_label: '文本卡',
+    drag_block_label: '標簽'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 78022d5387..186cb46870 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1059,7 +1059,9 @@ export default {
     total_pos_top: '顶部',
     total_pos_bottom: '底部',
     total_pos_left: '左侧',
-    total_pos_right: '右侧'
+    total_pos_right: '右侧',
+    chart_label: '文本卡',
+    drag_block_label: '标签'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
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/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/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1f9ec47efd..4557370826 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -311,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
@@ -347,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
@@ -555,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;"
                     >
@@ -656,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')"
                   >
@@ -676,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')"
                   >
@@ -809,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')"
                   >
@@ -841,7 +842,7 @@
             </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') || view.type.includes('gauge'))"
@@ -886,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"
@@ -894,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"
@@ -902,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"
@@ -920,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;"
@@ -1131,9 +1137,11 @@ 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,
@@ -2548,7 +2556,7 @@ export default {
 
   .tab-header > > > .el-tabs__item {
     font-size: 12px;
-    padding: 0 60px !important;
+    padding: 0 40px !important;
   }
 
   .blackTheme .tab-header > > > .el-tabs__item {

From fdd314288775b1a4485ccb5125e2de89406e67c9 Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Thu, 10 Mar 2022 16:49:59 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20doris=E5=AE=98=E7=BD=91=E9=93=BE?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/dataset/data/CalcFieldEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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>

From 3d1c3958f30237c9cc1755d1a697839ebcf0ce1a Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 10 Mar 2022 17:10:25 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E5=8D=87=E7=BA=A7=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=B71.9.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/pom.xml  | 6 +++---
 frontend/pom.xml | 2 +-
 mobile/pom.xml   | 2 +-
 pom.xml          | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/backend/pom.xml b/backend/pom.xml
index 7d1e213fc0..de5cb967ad 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>
@@ -215,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>
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/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>