feat(图表): 水波图支持边框

core/core-frontend/src/locales/en.ts

@@ -2120,7 +2120,10 @@ export default {
     table_field_total_label: 'Field Alias',
     table_row_header_freeze: 'Row Header Freeze',
     value_formatter_total_out_percent: 'Show percentage',
-    enable_slider_tip: 'After enabling the slider, the carousel prompt will be disabled.'
+    enable_slider_tip: 'After enabling the slider, the carousel prompt will be disabled.',
+    liquid_show_border: 'Show Border',
+    liquid_border_width: 'Border Width',
+    liquid_border_distance: 'Border Distance'
   },
   dataset: {
     field_value: 'Field Value',

core/core-frontend/src/locales/tw.ts

@@ -2061,7 +2061,10 @@ export default {
     table_field_total_label: '字段別名',
     table_row_header_freeze: '行頭凍結',
     value_formatter_total_out_percent: '顯示佔比',
-    enable_slider_tip: '開啟縮略軸後，輪播提示將會失效'
+    enable_slider_tip: '開啟縮略軸後，輪播提示將會失效',
+    liquid_show_border: '顯示邊框',
+    liquid_border_width: '邊框寬度',
+    liquid_border_distance: '邊框間距'
   },
   dataset: {
     field_value: '欄位值',

core/core-frontend/src/locales/zh-CN.ts

@@ -2070,7 +2070,10 @@ export default {
     table_field_total_label: '字段别名',
     table_row_header_freeze: '行头冻结',
     value_formatter_total_out_percent: '显示占比',
-    enable_slider_tip: '开启缩略轴后，轮播提示将会失效'
+    enable_slider_tip: '开启缩略轴后，轮播提示将会失效',
+    liquid_show_border: '显示边框',
+    liquid_border_width: '边框宽度',
+    liquid_border_distance: '边框间距'
   },
   dataset: {
     field_value: '字段值',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -730,6 +730,18 @@ declare interface ChartMiscAttr {
    * 水波图形状
    */
   liquidShape: string
+  /**
+   * 水波图边框显示
+   */
+  liquidShowBorder: boolean
+  /**
+   * 水波图边框宽度
+   */
+  liquidBorderWidth: number
+  /**
+   * 水波图边框距离
+   */
+  liquidBorderDistance: number
   /**
    * 地图倾角
    */

core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue

@@ -553,6 +553,59 @@ onMounted(() => {
     <!--gauge-end-->
 
     <!--liquid-begin-->
+    <el-form-item
+      v-show="showProperty('liquidShowBorder')"
+      class="form-item"
+      :class="'form-item-' + themes"
+    >
+      <el-checkbox
+        :effect="themes"
+        v-model="state.miscForm.liquidShowBorder"
+        @change="changeMisc('liquidShowBorder')"
+      >
+        {{ t('chart.liquid_show_border') }}
+      </el-checkbox>
+    </el-form-item>
+    <el-row :guter="8">
+      <el-col :span="12">
+        <el-form-item
+          v-show="showProperty('liquidBorderWidth')"
+          class="form-item"
+          :label="t('chart.liquid_border_width')"
+          :class="'form-item-' + themes"
+        >
+          <el-input-number
+            v-model="state.miscForm.liquidBorderWidth"
+            :disabled="!state.miscForm.liquidShowBorder"
+            :effect="themes"
+            :min="1"
+            :max="100"
+            size="small"
+            controls-position="right"
+            @change="changeMisc('liquidBorderWidth')"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item
+          v-show="showProperty('liquidBorderDistance')"
+          class="form-item"
+          :label="t('chart.liquid_border_distance')"
+          :class="'form-item-' + themes"
+        >
+          <el-input-number
+            v-model="state.miscForm.liquidBorderDistance"
+            :disabled="!state.miscForm.liquidShowBorder"
+            :effect="themes"
+            :min="1"
+            :max="100"
+            size="small"
+            controls-position="right"
+            @change="changeMisc('liquidBorderDistance')"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
     <el-row :gutter="8">
       <el-col :span="12">
         <el-form-item

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -344,7 +344,10 @@ export const DEFAULT_MISC: ChartMiscAttr = {
         symbolSize: 4
       }
     }
-  }
+  },
+  liquidShowBorder: false,
+  liquidBorderWidth: 4,
+  liquidBorderDistance: 8
 }
 
 export const DEFAULT_MARK = {

core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts

@@ -7,6 +7,7 @@ import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/uti
 import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import { useI18n } from '@/hooks/web/useI18n'
+import { defaultsDeep } from 'lodash-es'
 
 const { t } = useI18n()
 const DEFAULT_LIQUID_DATA = []
@@ -28,7 +29,15 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
     'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha'],
     'label-selector': ['fontSize', 'color', 'labelFormatter'],
-    'misc-selector': ['liquidShape', 'liquidSize', 'liquidMaxType', 'liquidMaxField'],
+    'misc-selector': [
+      'liquidShape',
+      'liquidSize',
+      'liquidMaxType',
+      'liquidMaxField',
+      'liquidShowBorder',
+      'liquidBorderWidth',
+      'liquidBorderDistance'
+    ],
     'title-selector': [
       'title',
       'fontSize',
@@ -131,6 +140,15 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
       radius: radius,
       shape: shape
     }
+    const { misc } = customAttr
+    if (misc?.liquidShowBorder) {
+      defaultsDeep(size, {
+        outline: {
+          border: misc.liquidBorderWidth ?? DEFAULT_MISC.liquidBorderWidth,
+          distance: misc.liquidBorderDistance ?? DEFAULT_MISC.liquidBorderDistance
+        }
+      })
+    }
     return { ...options, ...size }
   }