From bbe480932b9a9fc8d384c97303af576787de0d10 Mon Sep 17 00:00:00 2001
From: Free-sss <630042479@qq.com>
Date: Tue, 26 Aug 2025 11:34:00 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=9C=86?=
 =?UTF-8?q?=E7=8E=AFecharts=EF=BC=88=E6=97=A0=E8=BE=B9=E6=A1=86=EF=BC=8C?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=97=A5=E6=9C=9F=E5=BE=85=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/ConfinedSpace/Map/index.ts         |   2 +-
 .../ConfinedSpace/PieCircleCommen/config.ts   | 126 +++++++++++++++++
 .../ConfinedSpace/PieCircleCommen/config.vue  |  21 +++
 .../ConfinedSpace/PieCircleCommen/data.json   |  24 ++++
 .../ConfinedSpace/PieCircleCommen/index.ts    |  13 ++
 .../ConfinedSpace/PieCircleCommen/index.vue   | 128 ++++++++++++++++++
 .../components/Charts/ConfinedSpace/index.ts  |   4 +-
 7 files changed, 315 insertions(+), 3 deletions(-)
 create mode 100644 src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts
 create mode 100644 src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.vue
 create mode 100644 src/packages/components/Charts/ConfinedSpace/PieCircleCommen/data.json
 create mode 100644 src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.ts
 create mode 100644 src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.vue

diff --git a/src/packages/components/Charts/ConfinedSpace/Map/index.ts b/src/packages/components/Charts/ConfinedSpace/Map/index.ts
index d727651..3c7b428 100644
--- a/src/packages/components/Charts/ConfinedSpace/Map/index.ts
+++ b/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,
diff --git a/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts b/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts
new file mode 100644
index 0000000..6c1f7d9
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.vue b/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.vue
new file mode 100644
index 0000000..c68d286
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/data.json b/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/data.json
new file mode 100644
index 0000000..5a730dc
--- /dev/null
+++ b/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
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.ts b/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.ts
new file mode 100644
index 0000000..718d6a1
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.vue b/src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.vue
new file mode 100644
index 0000000..5a31683
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Charts/ConfinedSpace/index.ts b/src/packages/components/Charts/ConfinedSpace/index.ts
index 54b5e8b..c5eccf6 100644
--- a/src/packages/components/Charts/ConfinedSpace/index.ts
+++ b/src/packages/components/Charts/ConfinedSpace/index.ts
@@ -1,4 +1,4 @@
 import {MapConfig} from './Map'
+import {PieCircleCommenConfig} from './PieCircleCommen'
 
-
-export default [MapConfig]
\ No newline at end of file
+export default [MapConfig,PieCircleCommenConfig]
\ No newline at end of file