!60 饼图新增类型可修改

Merge pull request !60 from jiangcheng/dev

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

@@ -5,13 +5,26 @@ 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'
   },
   legend: {
-    show: true,
+    show: true
   },
   dataset: { ...dataJson },
   series: [
@@ -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,12 +1,20 @@
 <template>
   <!-- Echarts 全局设置 -->
   <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 { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { PieTypeObject, PieTypeEnum } from './config'
 
 const props = defineProps({
   optionData: {
@@ -14,4 +22,18 @@ const props = defineProps({
     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

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -13,12 +13,7 @@ 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 { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -35,19 +30,28 @@ const props = defineProps({
   }
 })
 
-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)
 })
 
+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>