feat(src/packages): 图表修改水球图改变数值，静态数据未跟着改变问题

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideWaterPoloConfig } 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 = {
+  dataset: 0.5,
+  series: [
+    {
+      type: 'liquidFill',
+      shape: shapes[0].value,
+      radius: '90%',
+      data: [0],
+      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 PublicConfigClass implements CreateComponentType
+{
+  public key = OverrideWaterPoloConfig.key
+  public chartConfig = cloneDeep(OverrideWaterPoloConfig)
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="水球"
+    :expanded="true"
+  >
+    <SettingItemBox name="内容">
+      <SettingItem name="数值">
+        <n-input-number
+          v-model:value="optionData.dataset"
+          :min="0"
+          :step="0.01"
+          size="small"
+          placeholder="水球数值"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="形状">
+        <n-select v-model:value="item.shape" :options="shapes" placeholder="选择形状" />
+      </SettingItem>
+      <SettingItem name="文本">
+        <n-input-number v-model:value="item.label.normal.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="颜色1">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.color[0].colorStops[0].color"
+      ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色2">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.color[0].colorStops[1].color"
+      ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景" :alone="true">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.backgroundStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { option, shapes } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideWaterPolo', true)
+
+export const OverrideWaterPoloConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义水球图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'water_WaterPolo.png'
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, reactive } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import 'echarts-liquidfill/src/liquidFill.js'
+import { CanvasRenderer } from 'echarts/renderers'
+import { GridComponent } from 'echarts/components'
+import config from './config'
+import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([CanvasRenderer, GridComponent])
+
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  value: {}
+})
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
+      if (!isPreview()) {
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        // 背景颜色
+        props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
+        // 水球颜色
+        props.chartConfig.option.series[0].color[0].colorStops = [
+          {
+            offset: 0,
+            color: themeColor[0]
+          },
+          {
+            offset: 1,
+            color: themeColor[1]
+          }
+        ]
+      }
+      option.value = props.chartConfig.option
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+// 数据处理
+const dataHandle = (newData: number | string) => {
+  newData = isString(newData) ? parseFloat(newData) : newData
+  return parseFloat(newData.toFixed(2))
+}
+
+// 编辑
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    if (!isString(newData) && !isNumber(newData)) return
+    props.chartConfig.option.series[0].data = [dataHandle(newData)]
+    option.value = props.chartConfig.option
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  // @ts-ignore
+  option.value.series[0].data = [dataHandle(newData)]
+})
+</script>

@@ -21,6 +21,7 @@ import { OverridePieCircleConfig } from '@/packages/components/external/Charts/P
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
+import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
 
 
 export function useInjectLib(packagesList: EPackagesType) {
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
@@ -43,8 +44,13 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)
-  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig)
+  addWidgetToCategoryByCategoryName(
+    packagesList,
+    PackagesCategoryEnum.INFORMATIONS,
+    OverrideILoadConfigurationframeConfig
+  )
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)
 }
 }
 
 
 /**
 /**