From 97e289f4b8bf305c53f2b0ed17476eb4c34ebbf3 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 13 Sep 2021 11:03:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E5=B0=9D=E8=AF=95?=
 =?UTF-8?q?=E6=8E=A5=E5=85=A5G2=E5=88=B6=E4=BD=9C=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=EF=BC=9B=E5=A2=9E=E5=8A=A0=E6=B0=B4=E6=B3=A2=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chart/chart/liquid/liquid.js    | 27 ++++++++++++-------
 .../component-style/TitleSelector.vue         |  4 +--
 frontend/src/views/chart/view/ChartEdit.vue   |  2 +-
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/chart/chart/liquid/liquid.js b/frontend/src/views/chart/chart/liquid/liquid.js
index 25a1561fdd..355c55a123 100644
--- a/frontend/src/views/chart/chart/liquid/liquid.js
+++ b/frontend/src/views/chart/chart/liquid/liquid.js
@@ -5,15 +5,7 @@ import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
 export function baseLiquid(plot, container, chart) {
   let value = 0
   const colors = []
-  let max
-  let radius
-  let outlineBorder
-  let outlineDistance
-  let waveLength
-  let waveCount
-  let bgColor
-  let shape
-  let labelContent
+  let max, radius, outlineBorder, outlineDistance, waveLength, waveCount, bgColor, shape, labelContent, title
   if (chart.data) {
     if (chart.data.series.length > 0) {
       value = chart.data.series[0].data[0].value
@@ -62,6 +54,22 @@ export function baseLiquid(plot, container, chart) {
     if (customStyle.background) {
       bgColor = customStyle.background.color.concat(digToHex(parseInt(customStyle.background.alpha)))
     }
+    if (customStyle.text) {
+      const t = JSON.parse(JSON.stringify(customStyle.text))
+      if (t.show) {
+        title = {
+          formatter: () => { return chart.title },
+          style: ({ percent }) => ({
+            fontSize: parseInt(t.fontSize),
+            color: t.color,
+            fontWeight: t.isBolder ? 'bold' : 'normal',
+            fontStyle: t.isItalic ? 'italic' : 'normal'
+          })
+        }
+      } else {
+        title = false
+      }
+    }
   }
   // 开始渲染
   if (plot) {
@@ -87,6 +95,7 @@ export function baseLiquid(plot, container, chart) {
       count: waveCount
     },
     statistic: {
+      title: title,
       content: labelContent
     }
   })
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index c9e31d4181..59f479f1a1 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -24,14 +24,14 @@
           <el-form-item :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
           </el-form-item>
-          <el-form-item :label="$t('chart.text_h_position')" class="form-item">
+          <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
             <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
               <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
               <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
+          <el-form-item v-show="chart.type && !chart.type.includes('table') && chart.type !== 'liquid'" :label="$t('chart.text_v_position')" class="form-item">
             <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
               <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
               <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index caa8554b65..07c8dbd807 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -503,7 +503,7 @@
                   <el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
                     <split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
                   </el-collapse-item>
-                  <el-collapse-item v-show="view.type && view.type !== 'liquid'" name="title" :title="$t('chart.title')">
+                  <el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
                     <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
                   </el-collapse-item>
                   <el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && chart.type !== 'treemap' && view.type !== 'liquid'" name="legend" :title="$t('chart.legend')">