存货分布

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

@@ -163,6 +163,17 @@ function getDistributionOption(
   totals?: Pick<InventoryDistributionResponse, 'totalInventory' | 'totalOverStock'>
 ): echarts.EChartsOption {
   const layout = getChartLayout(distributionChartRef)
+  const distributionColors = [
+    THEME.color.blue.line,
+    THEME.color.orange.line,
+    THEME.color.green.line,
+    THEME.color.red.line,
+    THEME.color.blue.mid,
+    THEME.color.orange.mid,
+    THEME.color.green.mid,
+    THEME.color.red.mid,
+    THEME.color.blue.light
+  ]
   const inventoryTotal =
     totals?.totalInventory != null
       ? yuanToWan(totals.totalInventory)
@@ -174,17 +185,7 @@ function getDistributionOption(
 
   return {
     ...ANIMATION,
-    color: [
-      THEME.color.blue.line,
-      THEME.color.orange.line,
-      THEME.color.green.line,
-      THEME.color.red.line,
-      THEME.color.blue.mid,
-      THEME.color.orange.mid,
-      THEME.color.green.mid,
-      THEME.color.red.mid,
-      THEME.color.blue.light
-    ],
+    color: distributionColors,
     tooltip: createTooltip({
       trigger: 'item',
       formatter(params: any) {
@@ -291,16 +292,32 @@ function getDistributionOption(
           length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
           lineStyle: {
-            color: 'inherit'
+            color: distributionColors[0],
+            width: 1.5,
+            opacity: 1
           }
         },
         labelLayout: {
           hideOverlap: false,
           moveOverlap: 'shiftY'
         },
-        data: data.map((item) => ({
+        data: data.map((item, index) => ({
           name: item.project,
-          value: item.mayInventoryAmount
+          value: item.mayInventoryAmount,
+          itemStyle: {
+            color: distributionColors[index % distributionColors.length]
+          },
+          label: {
+            color: distributionColors[index % distributionColors.length]
+          },
+          labelLine: {
+            show: true,
+            lineStyle: {
+              color: distributionColors[index % distributionColors.length],
+              width: 1.5,
+              opacity: 1
+            }
+          }
         }))
       },
       {
@@ -327,7 +344,9 @@ function getDistributionOption(
           length2: layout.compact ? 8 : 14,
           minTurnAngle: 90,
           lineStyle: {
-            color: 'inherit'
+            color: distributionColors[0],
+            width: 1.5,
+            opacity: 1
           }
         },
         labelLayout: {
@@ -336,9 +355,23 @@ function getDistributionOption(
         },
         data: data
           .filter((item) => item.mayBacklogAmount > 0)
-          .map((item) => ({
+          .map((item, index) => ({
             name: item.project,
-            value: item.mayBacklogAmount
+            value: item.mayBacklogAmount,
+            itemStyle: {
+              color: distributionColors[index % distributionColors.length]
+            },
+            label: {
+              color: distributionColors[index % distributionColors.length]
+            },
+            labelLine: {
+              show: true,
+              lineStyle: {
+                color: distributionColors[index % distributionColors.length],
+                width: 1.5,
+                opacity: 1
+              }
+            }
           }))
       }
     ]