perf: 优化饼图展示

src/packages/chartConfiguration/echarts/index.ts

@@ -1,2 +1,3 @@
 export * from './axis'
-export * from './line'
+export * from './line'
+export * from './label'

src/packages/chartConfiguration/echarts/label.ts

@@ -0,0 +1,7 @@
+export const labelConfig = {
+  position: [
+    { label: '外侧', value: 'outside' },
+    { label: '内部', value: 'inside' },
+    { label: '中心', value: 'center' }
+  ]
+}

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

@@ -14,41 +14,37 @@
           <n-text>展示标签</n-text>
         </n-space>
       </SettingItem>
-      <SettingItem name="位置">
-        <n-select v-model:value="optionData.series[0].label.position" :options="[
-            { label: '外侧', value: 'outside' },
-            { label: '内部', value: 'inside' },
-            { label: '中心', value: 'center' }
-          ]" />
-      </SettingItem>
-    </SettingItemBox>
-    <setting-item-box name="标签数据">
-      <setting-item>
-        <n-select v-model:value="optionData.series[0].label.formatter" :options="[
-            { label: '数据名', value: '{b}' },
-            { label: '百分比', value: '{d}' },
-            { label: '列名:百分比', value: '{b}:{d}%' },
-          ]" />
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="引导线">
       <setting-item>
         <n-space>
           <n-switch v-model:value="optionData.series[0].labelLine.show" size="small"></n-switch>
-          <n-text>展示引导线</n-text>
+          <n-text>引导线</n-text>
         </n-space>
       </setting-item>
-    </setting-item-box>
+      <SettingItem name="位置">
+        <n-select v-model:value="optionData.series[0].label.position" size="small" :options="labelConfig.position" />
+      </SettingItem>
+      <setting-item name="展示类型">
+        <n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
+      </setting-item>
+    </SettingItemBox>
     <setting-item-box name="圆角">
       <setting-item>
         <n-space>
-          <n-input-number v-model:value="optionData.series[0].itemStyle.borderRadius" size="small" :min="0"></n-input-number>
+          <n-input-number
+            v-model:value="optionData.series[0].itemStyle.borderRadius"
+            size="small"
+            :min="0"
+          ></n-input-number>
           <n-text>圆角大小</n-text>
         </n-space>
       </setting-item>
       <setting-item>
         <n-space>
-          <n-input-number v-model:value="optionData.series[0].itemStyle.borderWidth" size="small" :min="0"></n-input-number>
+          <n-input-number
+            v-model:value="optionData.series[0].itemStyle.borderWidth"
+            size="small"
+            :min="0"
+          ></n-input-number>
           <n-text>线条宽度</n-text>
         </n-space>
       </setting-item>
@@ -61,6 +57,7 @@ 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 { labelConfig } from '@/packages/chartConfiguration/echarts'
 
 const props = defineProps({
   optionData: {
@@ -82,4 +79,10 @@ const fontWeightOptions = [
     value: PieTypeObject[PieTypeEnum.ROSE]
   }
 ]
+
+const labelFormatterOptions = [
+  { label: '数据名', value: '{b}' },
+  { label: '百分比', value: '{d}' },
+  { label: '列名:百分比', value: '{b}:{d}%' }
+]
 </script>