style: 优化水球图代码结构

src/packages/components/Charts/Mores/WaterPolo/config.ts

@@ -3,6 +3,37 @@ import { CreateComponentType } from '@/packages/index.d'
 import { WaterPoloConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
+export const shapes = [
+  {
+    label: '圆形',
+    value: 'circle'
+  },
+  {
+    label: '正方形',
+    value: 'rect'
+  },
+  {
+    label: '带圆角的正方形',
+    value: 'roundRect'
+  },
+  {
+    label: '正三角形',
+    value: 'triangle'
+  },
+  {
+    label: '菱形',
+    value: 'diamond'
+  },
+  {
+    label: '水滴',
+    value: 'pin'
+  },
+  {
+    label: '箭头',
+    value: 'arrow'
+  },
+]
+
 export const includes = []
 
 export const option = {
@@ -10,7 +41,7 @@ export const option = {
   series: [
     {
       type: 'liquidFill',
-      shape: 'circle',
+      shape: shapes[0].value,
       radius: '90%',
       data: [0],
       center: ['50%', '50%'],

src/packages/components/Charts/Mores/WaterPolo/config.vue

@@ -18,7 +18,7 @@
       <SettingItem name="形状">
         <n-select v-model:value="item.shape" :options="shapes" placeholder="选择形状" />
       </SettingItem>
-      <SettingItem name="文字大小">
+      <SettingItem name="文本">
         <n-input-number v-model:value="item.label.normal.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
         </n-input-number>
       </SettingItem>
@@ -51,7 +51,7 @@
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
-import { option } from './config'
+import { option, shapes } from './config'
 import {
   CollapseItem,
   SettingItemBox,
@@ -68,35 +68,4 @@ const props = defineProps({
 const seriesList = computed(() => {
   return props.optionData.series
 })
-
-const shapes = [
-  {
-    label: '圆形',
-    value: 'circle'
-  },
-  {
-    label: '正方形',
-    value: 'rect'
-  },
-  {
-    label: '带圆角的正方形',
-    value: 'roundRect'
-  },
-  {
-    label: '正三角形',
-    value: 'triangle'
-  },
-  {
-    label: '菱形',
-    value: 'diamond'
-  },
-  {
-    label: '水滴',
-    value: 'pin'
-  },
-  {
-    label: '箭头',
-    value: 'arrow'
-  },
-]
 </script>