perf(src/packages): 重写图表里的饼图-环形，修改绑定数值小数点问题

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverridePieCircleConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const includes = []
+
+const option = {
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  legend: {
+    show: true,
+  },
+  dataset: 0.25,
+  title: {
+    text: 25 + "%",
+    x: "center",
+    y: "center",
+    textStyle: {
+      color: "#56B9F8",
+      fontSize: 30
+    }
+  },
+  series: [
+    {
+      type: "pie",
+      radius: ["75%", "80%"],
+      center: ["50%", "50%"],
+      hoverAnimation: true,
+      color: ["#00bcd44a", "transparent"],
+      label: {
+        show: false
+      },
+      data: [
+        {
+          value: [25],
+          itemStyle: {
+            color: "#03a9f4",
+            shadowBlur: 10,
+            shadowColor:"#97e2f5"
+          }
+        },
+        {
+          value: [75],
+          itemStyle: {
+            color: "#00bcd44a",
+            shadowBlur: 0,
+            shadowColor:"#00bcd44a"
+          }
+        }
+      ]
+    },
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = OverridePieCircleConfig.key
+
+  public chartConfig = cloneDeep(OverridePieCircleConfig)
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- 遍历 seriesList -->
+  <CollapseItem v-for="(item, index) in config.series" :key="index" :name="`圆环`" :expanded="true">
+    <SettingItemBox name="数据">
+      <SettingItem name="数值">
+        <n-input-number v-model:value="config.dataset" :min="0" :max="1" :step="0.01" size="small" placeholder="数值">
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <!-- Echarts 全局设置 -->
+    <SettingItemBox name="进度条">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.data[0].itemStyle.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="阴影模糊等级">
+        <n-input-number
+          v-model:value="item.data[0].itemStyle.shadowBlur"
+          :min="0"
+          :max="50"
+          :step="1"
+          size="small"
+          placeholder="阴影模糊等级"
+        >
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="阴影颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.data[0].itemStyle.shadowColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <!-- 中心标题 -->
+    <SettingItemBox v-if="config.title" name="标题">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="config.title.textStyle.fontSize"
+          :min="0"
+          :step="1"
+          size="small"
+          placeholder="字体大小"
+        >
+        </n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <!-- 其他样式 -->
+    <SettingItemBox name="轨道样式">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="阴影模糊等级">
+        <n-input-number
+          v-model:value="item.data[1].itemStyle.shadowBlur"
+          :min="0"
+          :step="1"
+          size="small"
+          placeholder="阴影模糊等级"
+        >
+        </n-input-number>
+      </SettingItem>
+      <SettingItem name="阴影颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.data[1].itemStyle.shadowColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+// 以下是封装的设置模块布局组件，具体效果可在官网查看
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const config = computed(() => {
+  return props.optionData
+})
+</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('OverridePieCircle', true)
+
+export const OverridePieCircleConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义饼图-环形',
+  category: ChatCategoryEnum.PIE,
+  categoryName: ChatCategoryEnumName.PIE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'pie-circle.png'
+}

+<template>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
+
+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([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+const option = reactive({
+  value: {}
+})
+
+const dataHandle = (newData: any) => {
+  const d = parseFloat(`${newData}`) * 100
+  let config = props.chartConfig.option
+  config.title.text = d.toFixed(0) + '%'
+  config.series[0].data[0].value[0] = d
+  config.series[0].data[1].value[0] = 100 - d
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  let d = parseFloat(`${resData}`) * 100
+  // @ts-ignore
+  option.value.title.text = d.toFixed(0) + '%'
+  // @ts-ignore
+  option.value.series[0].data[0].value[0] = d
+  // @ts-ignore
+  option.value.series[0].data[1].value[0] = 100 - d
+})
+</script>

@@ -17,6 +17,7 @@ import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/B
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
+import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 
 
 export function useInjectLib(packagesList: EPackagesType) {
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
@@ -37,6 +38,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)
 }
 }
 
 
 /**
 /**