feat: 新增饼图配置项

src/components/Pages/VChartItemSetting/common/FontStyle.vue

@@ -20,7 +20,7 @@
       <n-input-number v-model:value="style.dy.value" size="small" />
     </setting-item>
     <setting-item v-if="style?.angle" name="旋转">
-      <n-input-number v-model:value="style.angle.value" :min="0" :max="360" size="small" />
+      <n-input-number v-model:value="style.angle.value" :step="0.1" :min="0" :max="360" size="small" />
     </setting-item>
   </template>
 </template>

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

@@ -81,7 +81,7 @@
         ></n-color-picker>
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="圆角">
+    <setting-item-box name="分段样式">
       <setting-item name="圆角大小">
         <n-input-number
           v-model:value="optionData.series[0].itemStyle.borderRadius"

src/packages/components/VChart/Pies/VChartPie/config.ts

@@ -5,7 +5,8 @@ import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
 import data from './data.json'
 import cloneDeep from 'lodash/cloneDeep'
 import type { ChatCategoryEnum, IPieOption } from '../../index.d'
-import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+
+const OUTER_RADIUS = 0.75
 
 export const includes = ['legends', 'tooltip']
 export const option: IPieOption & { dataset?: any } = {
@@ -19,7 +20,7 @@ export const option: IPieOption & { dataset?: any } = {
   centerX: '50%',
   centerY: '50%',
   innerRadius: 0.68,
-  outerRadius: 0.75,
+  outerRadius: OUTER_RADIUS,
   label: {
     visible: true,
     position: 'outside',
@@ -29,11 +30,41 @@ export const option: IPieOption & { dataset?: any } = {
       fontFamily: 'SimSun',
       fontWeight: 'normal',
       angle: 0
+    },
+    line: {
+      visible: true
+    }
+  },
+  pie: {
+    style: {
+      // 圆角
+      cornerRadius: 50,
+      // 描边宽度
+      outerBorder: {
+        // 透明度
+        strokeOpacity: 1,
+        // 外描边距离
+        distance: 0,
+        // 宽度
+        lineWidth: 0,
+        // 颜色
+        stroke: '#ffffff'
+      }
+    },
+    state: {
+      hover: {
+        outerRadius: 0.85
+      },
+      selected: {
+        outerRadius: 0.85
+      }
     }
   },
   // 业务配置（后续会被转换为图表spec)
   category: VChartPieConfig.category as ChatCategoryEnum.PIE,
-  extensionMark: []
+  extensionMark: [],
+  // 动画
+  animationNormal: {}
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/VChart/Pies/VChartPie/config.vue

@@ -2,7 +2,15 @@
   <!-- vCharts 全局设置 -->
   <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
   <!-- 饼图配制 -->
-  <collapse-item name="饼图" expanded>
+  <CollapseItem name="饼图" expanded>
+    <SettingItemBox name="动画">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="animationRef" size="small" @update:value="animationHandle"></n-switch>
+          <n-text>开启动画</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
     <SettingItemBox name="图形">
       <setting-item name="内圈范围">
         <n-input-number v-model:value="optionData.innerRadius" :step="0.1" :min="0" size="small"></n-input-number>
@@ -24,19 +32,55 @@
           <n-text>展示标签</n-text>
         </n-space>
       </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.label.line.visible" size="small"></n-switch>
+          <n-text>引导线</n-text>
+        </n-space>
+      </SettingItem>
       <SettingItem name="位置">
         <n-select v-model:value="optionData.label.position" :options="labelConfig.position" size="small" />
       </SettingItem>
       <FontStyle :style="toRefs(optionData.label.style)"></FontStyle>
     </SettingItemBox>
-    <setting-item-box name="内环形">
+    <SettingItemBox name="分段样式">
+      <setting-item name="圆角大小">
+        <n-input-number v-model:value="optionData.pie.style.cornerRadius" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="描边宽度">
+        <n-input-number
+          v-model:value="optionData.pie.style.outerBorder.lineWidth"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker v-model:value="optionData.pie.style.outerBorder.stroke" size="small" />
+      </setting-item>
+      <setting-item name="外描边距离">
+        <n-input-number
+          v-model:value="optionData.pie.style.outerBorder.distance"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="透明度">
+        <n-input-number
+          v-model:value="optionData.pie.style.outerBorder.strokeOpacity"
+          :step="0.1"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+    </SettingItemBox>
+    <SettingItemBox name="内环形">
       <setting-item name="可见性">
         <n-space>
           <n-switch v-model:value="extensionMarkRef" size="small" @update:value="markerHandle"></n-switch>
         </n-space>
       </setting-item>
-    </setting-item-box>
+    </SettingItemBox>
-  </collapse-item>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
@@ -54,8 +98,7 @@ const props = defineProps({
   }
 })
 
-const a = toRefs(props.optionData.label.style)
+const animationRef = ref(props.optionData.animationNormal && Object.keys(props.optionData.animationNormal)?.length > 0)
-
 const extensionMarkRef = ref(!!props.optionData?.extensionMark)
 
 const markerHandle = (value: boolean) => {
@@ -65,4 +108,54 @@ const markerHandle = (value: boolean) => {
     delete props.optionData.extensionMark
   }
 }
+
+const animationHandle = (value: boolean) => {
+  if (value) {
+    props.optionData.animationNormal = {
+      pie: [
+        {
+          loop: true,
+          startTime: 800,
+          oneByOne: true,
+          timeSlices: [
+            {
+              effects: {
+                channel: {
+                  outerRadius: {
+                    to: props.optionData.outerRadius * 100 + 0.1
+                  }
+                },
+                easing: 'linear'
+              },
+              duration: 500
+            },
+            {
+              effects: {
+                channel: {
+                  outerRadius: {
+                    to: props.optionData.outerRadius * 100 + 0.1
+                  }
+                },
+                easing: 'linear'
+              },
+              duration: 500
+            },
+            {
+              effects: {
+                channel: {
+                  outerRadius: {
+                    to: props.optionData.outerRadius * 100
+                  }
+                }
+              },
+              duration: 500
+            }
+          ]
+        }
+      ]
+    }
+  } else {
+    props.optionData.animationNormal = {}
+  }
+}
 </script>