feat(视图): 尝试接入G2制作视图；增加水波图

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
     }
   })

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>

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')">