feat: 饼图类型新增可选

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -5,7 +5,20 @@ import dataJson from './data.json'
 
 export const includes = ['legend']
 
+export enum PieTypeEnum {
+  NORMAL = '常规图',
+  RING = '环形图',
+  ROSE = '玫瑰图'
+}
+
+export const PieTypeObject = {
+  [PieTypeEnum.NORMAL]: 'nomal',
+  [PieTypeEnum.RING]: 'ring',
+  [PieTypeEnum.ROSE]: 'rose'
+}
+
 const option = {
+  type: 'ring',
   tooltip: {
     show: true,
     trigger: 'item'
@@ -19,6 +32,7 @@ const option = {
       type: 'pie',
       radius: ['40%', '65%'],
       center: ['50%', '60%'],
+      roseType: false,
       avoidLabelOverlap: false,
       itemStyle: {
         show: true,

src/packages/components/Charts/Pies/PieCommon/config.vue

@@ -1,17 +1,48 @@
 <template>
   <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData"></global-setting>
+  <global-setting :optionData="optionData" ></global-setting>
+  <CollapseItem name="饼图配置" :expanded="true">
+    <SettingItemBox name="类型">
+      <SettingItem>
+        <n-select
+          v-model:value="optionData.type"
+          size="small"
+          :options="fontWeightOptions"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, watch } from "vue";
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
-import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import {
+   GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from "@/components/Pages/ChartItemSetting";
+import { PieTypeObject, PieTypeEnum } from "./config";
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<GlobalThemeJsonType>,
-    required: true
+    required: true,
-  }
+  },
-})
+});
+const fontWeightOptions = [
+  {
+    label: PieTypeEnum.NORMAL,
+    value: PieTypeObject[PieTypeEnum.NORMAL],
+  },
+  {
+    label: PieTypeEnum.RING,
+    value: PieTypeObject[PieTypeEnum.RING],
+  },
+  {
+    label: PieTypeEnum.ROSE,
+    value: PieTypeObject[PieTypeEnum.ROSE],
+  },
+];
 </script>

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -1,39 +1,45 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, reactive, watch } from "vue";
-import VChart from 'vue-echarts'
+import VChart from "vue-echarts";
-import { use } from 'echarts/core'
+import { use } from "echarts/core";
-import { CanvasRenderer } from 'echarts/renderers'
+import { CanvasRenderer } from "echarts/renderers";
-import { PieChart } from 'echarts/charts'
+import { PieChart } from "echarts/charts";
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme } from "@/packages/public/chart";
-import config, { includes } from './config'
+import config, { includes } from "./config";
-import { useChartDataFetch } from '@/hooks'
+import { useChartDataFetch } from "@/hooks";
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
-import { isPreview } from '@/utils'
+import { isPreview } from "@/utils";
 import {
   DatasetComponent,
   GridComponent,
   TooltipComponent,
   LegendComponent,
-} from 'echarts/components'
+} from "echarts/components";
 
 const props = defineProps({
   themeSetting: {
     type: Object,
-    required: true
+    required: true,
   },
   themeColor: {
     type: Object,
-    required: true
+    required: true,
   },
   chartConfig: {
     type: Object as PropType<config>,
-    required: true
+    required: true,
-  }
+  },
-})
+});
 
 use([
   DatasetComponent,
@@ -42,12 +48,28 @@ use([
   GridComponent,
   TooltipComponent,
   LegendComponent,
-])
+]);
-
 
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+watch(
+  () => props.chartConfig.option.type,
+  (newData) => {
+    if (newData === "nomal") {
+      props.chartConfig.option.series[0].radius = "70%";
+      props.chartConfig.option.series[0].roseType = false;
+    } else if (newData === "ring") {
+      props.chartConfig.option.series[0].radius = ["40%", "65%"];
+      props.chartConfig.option.series[0].roseType = false;
+    } else {
+      props.chartConfig.option.series[0].radius = "70%";
+      props.chartConfig.option.series[0].roseType = true;
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
 </script>