feat: 饼图新增类型

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

@@ -24,7 +24,7 @@ const option = {
     trigger: 'item'
   },
   legend: {
-    show: true,
+    show: true
   },
   dataset: { ...dataJson },
   series: [

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

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

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

@@ -1,54 +1,36 @@
 <template>
-  <v-chart
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
-    autoresize
-  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, reactive, watch } 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 {
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-} 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([
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
-  CanvasRenderer,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-]);
 
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@@ -56,20 +38,20 @@ const option = computed(() => {
 
 watch(
   () => props.chartConfig.option.type,
-  (newData) => {
+  newData => {
-    if (newData === "nomal") {
+    if (newData === 'nomal') {
-      props.chartConfig.option.series[0].radius = "70%";
+      props.chartConfig.option.series[0].radius = '70%'
-      props.chartConfig.option.series[0].roseType = false;
+      props.chartConfig.option.series[0].roseType = false
-    } else if (newData === "ring") {
+    } else if (newData === 'ring') {
-      props.chartConfig.option.series[0].radius = ["40%", "65%"];
+      props.chartConfig.option.series[0].radius = ['40%', '65%']
-      props.chartConfig.option.series[0].roseType = false;
+      props.chartConfig.option.series[0].roseType = false
     } else {
-      props.chartConfig.option.series[0].radius = "70%";
+      props.chartConfig.option.series[0].radius = '70%'
-      props.chartConfig.option.series[0].roseType = true;
+      props.chartConfig.option.series[0].roseType = true
     }
   },
   { deep: true, immediate: true }
-);
+)
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>