fix: 新增水球

src/hooks/useChartDataFetch.hook.ts

@@ -9,7 +9,7 @@ import { isPreview } from '@/utils'
 type ChartEditStoreType = typeof useChartEditStore
 
 /**
- * 图表的 setdata 数据监听与更改
+ * 图表针对 setdata 数据监听与更改
  * @param chartConfig
  */
 export const useChartDataFetch = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType) => {

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

@@ -1,14 +1,66 @@
-import { publicConfig } from '@/packages/public'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { WaterPoloConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
-  
+
+export const includes = []
+
 export const option = {
-  colors: ['#4fd2dd', '#235fa7'],
+  series: [
+    {
+      type: 'liquidFill',
+      radius: '90%',
+      data: [0.5],
+      center: ['50%', '50%'],
+      color: [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#446bf5',
+            },
+            {
+              offset: 1,
+              color: '#2ca3e2',
+            },
+          ],
+          globalCoord: false,
+        },
+      ],
+      backgroundStyle: {
+        borderWidth: 1,
+        color: 'RGBA(51, 66, 127, 0.7)',
+      },
+      label: {
+        normal: {
+          textStyle: {
+            fontSize: 50,
+            color: '#fff',
+          },
+        },
+      },
+      outline: {
+        show: false,
+        borderDistance: 10,
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: '#112165',
+        },
+      },
+    },
+  ],
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config
+  extends publicConfig
+  implements CreateComponentType
+{
   public key = WaterPoloConfig.key
   public chartConfig = cloneDeep(WaterPoloConfig)
-  public option = option
+  public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,13 +1,44 @@
 <template>
-  <div>
-    水波
-  </div>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import 'echarts-liquidfill/src/liquidFill.js'
+import { CanvasRenderer } from 'echarts/renderers'
+import { GridComponent } from 'echarts/components'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
+import { isPreview } from '@/utils'
 
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true,
+  },
+  themeColor: {
+    type: Object,
+    required: true,
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true,
+  },
+})
+
+use([CanvasRenderer, GridComponent])
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>