!108 饼状图新增功能 显示标签,标签显示内容,引导线显示,饼状图圆角设置

Merge pull request !108 from 李少白/master-fetch

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

@@ -43,7 +43,9 @@ const option = {
       },
       label: {
         show: false,
-        position: 'center'
+        position: 'center',
+        formatter: '{b}',
+        fontSize:12
       },
       emphasis: {
         label: {

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

@@ -7,6 +7,52 @@
         <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="标签">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.series[0].label.show" size="small"></n-switch>
+          <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-space>
+      </setting-item>
+    </setting-item-box>
+    <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-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-text>线条宽度</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
   </CollapseItem>
 </template>