feat：新增圆环echarts（无边框，切换日期待完善）

src/packages/components/Charts/ConfinedSpace/Map/index.ts

@@ -5,7 +5,7 @@ export const MapConfig: ConfigType = {
     key: 'Map',
     chartKey: 'VMap',
     conKey: 'VCMap',
-    title: '无无敌大地图',
+    title: '大地图',
     category: 'ConfinedSpace',
     categoryName: '有限空间',
     package: PackagesCategoryEnum.CHARTS,

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts

@@ -0,0 +1,126 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { PieCircleCommenConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+export const includes = []
+
+// dataJson:{
+//   "dimensions": ["name", "value"],
+//   "source": [
+//     {
+//       "name": "分类一",
+//       "value": 94
+//     },
+//     {
+//       "name": "分类二",
+//       "value": 82
+//     },
+//     {
+//       "name": "分类三",
+//       "value": 78
+//     },
+//     {
+//       "name": "分类四",
+//       "value": 60
+//     }
+//   ]
+// }
+const otherConfig = {
+  // 轮播动画
+  isCarousel: false,
+}
+
+// ECharts配置
+const option = {
+  ...otherConfig,
+  color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
+
+  // 使用dataset关联数据
+  dataset: {
+    ...dataJson
+  },
+
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}: {c} ({d}%)'
+  },
+
+  title: {
+    // text: total, /
+    subtext: '总数',
+    left: '30%',
+    top: 'center',
+    textAlign: 'center',
+    textStyle: {
+      color: '#fff',
+      fontSize: 35,
+      fontWeight: 'bold',
+      lineHeight: 40
+    },
+    subtextStyle: {
+      color: '#ced4da',
+      fontSize: 15
+    },
+    itemGap: 1
+  },
+
+  legend: {
+    show: true,
+    orient: 'vertical',
+    left: '60%',
+    top: 'center',
+    itemGap: 15,
+    itemWidth: 10,
+    itemHeight: 35,
+    formatter: (name: string) => name,
+    icon: 'roundRect',
+    textStyle: {
+      rich: {
+        title: {
+          fontSize: 14,
+          color: '#ffffff',
+          align: 'left',
+          padding: [0, 0, 10, 10]
+        },
+        detail: {
+          fontSize: 14,
+          color: '#ced4da',
+          align: 'left',
+          padding: [0, 0, 0, 10]
+
+        }
+      }
+    }
+  },
+
+  series: [
+    {
+      name: '总数',
+      type: 'pie',
+      radius: ['50%', '70%'],
+      center: ['30%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+      },
+      emphasis: {
+        label: {
+          show: false
+        }
+      },
+      labelLine: {
+        show: false
+      }
+    }
+  ]
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = PieCircleCommenConfig.key
+
+  public chartConfig = cloneDeep(PieCircleCommenConfig)
+
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.vue

@@ -0,0 +1,21 @@
+<template>
+
+</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>

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/data.json

@@ -0,0 +1,24 @@
+{
+  "dimensions": [
+    "name",
+    "value"
+  ],
+  "source": [
+    {
+      "name": "分类一",
+      "value": 94
+    },
+    {
+      "name": "分类二",
+      "value": 82
+    },
+    {
+      "name": "分类三",
+      "value": 78
+    },
+    {
+      "name": "分类四",
+      "value": 60
+    }
+  ]
+}

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.ts

@@ -0,0 +1,13 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+
+export const PieCircleCommenConfig: ConfigType = {
+  key: 'PieCircleCommen',
+  chartKey: 'VPieCircleCommen',
+  conKey: 'VCPieCircleCommen',
+  title: '环形饼图',
+  category: 'ConfinedSpace',
+  categoryName: '有限空间',
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'PieCircleCommen.png'
+}

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-chart ref="vChartRef" :theme="themeColor" :init-options="initOptions" :option="option" autoresize> </v-chart>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, watch, onMounted } 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'
+
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+])
+
+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)
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+// 总数计算
+const calculateTotal = (data: any) => {
+  if (!data || !data.source) return 0
+  return data.source.reduce((total: number, item: any) => {
+    return total + (item[data.dimensions[1]] || 0)
+  }, 0)
+}
+// 计算百分比
+const calculatePercentage = (value: number, total: number) => {
+  if (total === 0) return '0.0%';
+  const percentage = (value / total * 100).toFixed(1);
+  return `${percentage}%`;
+};
+
+// 处理数据更新
+const dataHandle = (newData: any) => {
+  if (!newData) return
+  const total = calculateTotal(newData)
+
+  // 更新标题总数
+  props.chartConfig.option.title.text = `${total}`
+  // 更新图例格式化器，确保使用最新数据
+  props.chartConfig.option.legend.formatter = (name: string) => {
+    const item = newData.source.find((it: any) => it[newData.dimensions[0]] === name)
+    if (!item) return name;
+    const value = item[newData.dimensions[1]] ?? 0
+    const percentage = calculatePercentage(value, total)
+
+    // const value = item[newData.dimensions[1]];
+    // const percentage = calculatePercentage(value, total);
+
+    return `{title|${name}}\n{detail|${value}\t${percentage}}`;
+
+  };
+
+  // 更新tooplip
+  props.chartConfig.option.tooltip.formatter = (params: any) => {
+    // 获取当前数据项的名称和值
+    const name = params.name;
+    const item = newData.source.find((it: any) => it[newData.dimensions[0]] === name);
+    if (!item) return `${name}: 0(0.0%)`;
+
+    const value = item[newData.dimensions[1]] ?? 0;
+    const percentage = calculatePercentage(value, total);
+
+    return `${name}: ${value}(${percentage})`;
+  };
+
+}
+
+// 监听配置中的数据集变化（配置时）
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData) => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.error('数据处理错误:', error)
+    }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+  dataHandle(newData)
+})
+onMounted(() => {
+  dataHandle(props.chartConfig.option.dataset)
+})
+
+</script>

src/packages/components/Charts/ConfinedSpace/index.ts

@@ -1,4 +1,4 @@
 import {MapConfig} from './Map'
+import {PieCircleCommenConfig} from './PieCircleCommen'
 
-
-export default [MapConfig]
+export default [MapConfig,PieCircleCommenConfig]