feat: 新增水球图数据变化和样式设置

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart 
+    ref="vChartRef" 
+    :theme="themeColor" 
+    :option="option.options" 
+    :manual-update="isPreview()" 
+    autoresize>
+  </v-chart>
 </template>
 
 <script setup lang="ts">

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

@@ -6,11 +6,12 @@ import cloneDeep from 'lodash/cloneDeep'
 export const includes = []
 
 export const option = {
+  dataset: 0.5,
   series: [
     {
       type: 'liquidFill',
       radius: '90%',
-      data: [0.5],
+      data: [0],
       center: ['50%', '50%'],
       color: [
         {
@@ -34,7 +35,7 @@ export const option = {
       ],
       backgroundStyle: {
         borderWidth: 1,
-        color: 'RGBA(51, 66, 127, 0.7)',
+        color: 'rgba(51, 66, 127, 0.7)',
       },
       label: {
         normal: {
@@ -56,9 +57,7 @@ export const option = {
   ],
 }
 
-export default class Config
-  extends publicConfig
-  implements CreateComponentType
+export default class Config extends publicConfig implements CreateComponentType
 {
   public key = WaterPoloConfig.key
   public chartConfig = cloneDeep(WaterPoloConfig)

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

@@ -1,6 +1,41 @@
 <template>
+  <CollapseItem name="水球" :expanded="true">
+    <SettingItemBox name="内容">
+      <SettingItem name="数值">
+        <n-input-number
+          v-model:value="optionData.series[0].data[0]"
+          :min="0"
+          :step="0.01"
+          size="small"
+          placeholder="水球数值"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景" :alone="true">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.series[0].backgroundStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
 </script>

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

@@ -2,22 +2,24 @@
   <v-chart
     ref="vChartRef"
     :theme="themeColor"
-    :option="option"
+    :option="option.options"
     :manual-update="isPreview()"
     autoresize
   ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { PropType, watch, reactive } 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 config  from './config'
 import { isPreview } from '@/utils'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   themeSetting: {
@@ -36,9 +38,52 @@ const props = defineProps({
 
 use([CanvasRenderer, GridComponent])
 
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  options: {},
+})
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    if (!isPreview()) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series[0].color[0].colorStops = [  
+        {
+          offset: 0,
+          color: themeColor[0],
+        },
+        {
+          offset: 1,
+          color: themeColor[1],
+        },
+      ]
+    }
+    option.options = props.chartConfig.option
+  },
+  {
+    immediate: true,
+  }
+)
+
+const updateDataset = (newData: number) => {
+  props.chartConfig.option.series[0].data = [newData]
+  option.options = props.chartConfig.option
+}
+
+updateDataset(0.5)
+
+watch(
+  () => props.chartConfig.option.value,
+  newData => updateDataset(newData),
+  {
+    deep: true,
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  updateDataset(newData)
 })
 </script>
-
-<style lang="scss" scoped></style>