存货分布

src/views/pms/stat/rhkb/inventorySituation.vue

@@ -133,8 +133,8 @@ function getChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
     distributionTitleTop: compact ? 6 : 18,
     distributionTitleFontSize: compact ? 12 : 14,
     distributionTitleLineHeight: compact ? 14 : 16,
-    distributionPieRadius: compact ? ['42%', '56%'] : ['50%', '62%'],
-    distributionPieCenterY: compact ? '62%' : '57%',
+    distributionPieRadius: compact ? ['34%', '46%'] : ['38%', '50%'],
+    distributionPieCenterY: compact ? '60%' : '57%',
     distributionLegendBottom: compact ? 0 : 10,
     distributionLegendItemSize: compact ? 9 : 13,
     distributionLegendGap: compact ? 8 : 14,
@@ -239,7 +239,7 @@ function getDistributionOption(
     graphic: [
       {
         type: 'text',
-        left: '21%',
+        left: '19.5%',
         top: '45%',
         style: {
           text: `总库存\n${formatAmount(inventoryTotal)}万元`,
@@ -253,7 +253,7 @@ function getDistributionOption(
       },
       {
         type: 'text',
-        left: '67%',
+        left: '69%',
         top: '45%',
         style: {
           text: `总积压\n${formatAmount(backlogTotal)}万元`,
@@ -271,11 +271,14 @@ function getDistributionOption(
         name: '库存',
         type: 'pie',
         radius: layout.distributionPieRadius,
-        center: ['27%', layout.distributionPieCenterY],
+        center: ['25%', layout.distributionPieCenterY],
         minAngle: 5,
+        avoidLabelOverlap: true,
         label: {
           show: true,
           position: 'outside',
+          alignTo: 'labelLine',
+          bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
           fontSize: layout.labelFontSize,
@@ -284,12 +287,17 @@ function getDistributionOption(
         },
         labelLine: {
           show: true,
-          // length: layout.labelDistance,
-          // length2: layout.labelDistance,
+          length: layout.compact ? 6 : 10,
+          length2: layout.compact ? 8 : 14,
+          minTurnAngle: 90,
           lineStyle: {
             color: 'inherit'
           }
         },
+        labelLayout: {
+          hideOverlap: false,
+          moveOverlap: 'shiftY'
+        },
         data: data.map((item) => ({
           name: item.project,
           value: item.mayInventoryAmount
@@ -299,11 +307,14 @@ function getDistributionOption(
         name: '积压库存',
         type: 'pie',
         radius: layout.distributionPieRadius,
-        center: ['73%', layout.distributionPieCenterY],
+        center: ['75%', layout.distributionPieCenterY],
         minAngle: 5,
+        avoidLabelOverlap: true,
         label: {
           show: true,
           position: 'outside',
+          alignTo: 'labelLine',
+          bleedMargin: 0,
           formatter: '{b}\n{d}%',
           color: 'inherit',
           fontSize: layout.labelFontSize,
@@ -312,12 +323,17 @@ function getDistributionOption(
         },
         labelLine: {
           show: true,
-          // length: layout.labelDistance,
-          // length2: layout.labelDistance,
+          length: layout.compact ? 6 : 10,
+          length2: layout.compact ? 8 : 14,
+          minTurnAngle: 90,
           lineStyle: {
             color: 'inherit'
           }
         },
+        labelLayout: {
+          hideOverlap: false,
+          moveOverlap: 'shiftY'
+        },
         data: data
           .filter((item) => item.mayBacklogAmount > 0)
           .map((item) => ({