From 39d9aa1896afbdac34b7a87ffe99197ea2aa6958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=92=8B=E6=89=BF?= <jiangc@hsmap.com>
Date: Mon, 26 Sep 2022 11:17:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E9=A5=BC=E5=9B=BE=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=96=B0=E5=A2=9E=E5=8F=AF=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Pies/PieCommon/config.ts           | 14 +++++
 .../Charts/Pies/PieCommon/config.vue          | 45 +++++++++++---
 .../Charts/Pies/PieCommon/index.vue           | 62 +++++++++++++------
 3 files changed, 94 insertions(+), 27 deletions(-)

diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
index 6697ada2..ab41e20c 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.ts
+++ b/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,
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.vue b/src/packages/components/Charts/Pies/PieCommon/config.vue
index 8dc6e327..1e76dbc8 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.vue
+++ b/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 { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import { PropType, watch } from "vue";
+import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
+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>
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue
index 49903a6c..547432b7 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/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 VChart from 'vue-echarts'
-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 { isPreview } from '@/utils'
+import { computed, PropType, reactive, watch } from "vue";
+import VChart from "vue-echarts";
+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 { 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>

From 43f35de27abf9cdaa41e69e2c3f56b77ec1a6aa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=92=8B=E6=89=BF?= <jiangc@hsmap.com>
Date: Mon, 26 Sep 2022 17:34:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E9=A5=BC=E5=9B=BE=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Pies/PieCommon/config.ts           |  2 +-
 .../Charts/Pies/PieCommon/config.vue          | 37 ++++-----
 .../Charts/Pies/PieCommon/index.vue           | 76 +++++++------------
 3 files changed, 44 insertions(+), 71 deletions(-)

diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
index ab41e20c..1af07f40 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/config.ts
@@ -24,7 +24,7 @@ const option = {
     trigger: 'item'
   },
   legend: {
-    show: true,
+    show: true
   },
   dataset: { ...dataJson },
   series: [
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.vue b/src/packages/components/Charts/Pies/PieCommon/config.vue
index 1e76dbc8..55aa8de5 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.vue
+++ b/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
-          v-model:value="optionData.type"
-          size="small"
-          :options="fontWeightOptions"
-        />
+        <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
 </template>
 
 <script setup lang="ts">
-import { PropType, watch } from "vue";
-import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
-import {
-   GlobalSetting,
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from "@/components/Pages/ChartItemSetting";
-import { PieTypeObject, PieTypeEnum } from "./config";
+import { PropType, watch } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+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],
+    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>
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue
index 547432b7..3f47c66a 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@@ -1,54 +1,36 @@
 <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, reactive, watch } from "vue";
-import VChart from "vue-echarts";
-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 { isPreview } from "@/utils";
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-} from "echarts/components";
+import { computed, PropType, reactive, watch } from 'vue'
+import VChart from 'vue-echarts'
+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 { isPreview } from '@/utils'
+import { 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([
-  DatasetComponent,
-  CanvasRenderer,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-]);
+use([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) => {
-    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;
+  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;
+      props.chartConfig.option.series[0].radius = '70%'
+      props.chartConfig.option.series[0].roseType = true
     }
   },
   { deep: true, immediate: true }
-);
+)
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>