修改

src/views/copilot/energy/options/monitorOptions.js

@@ -1,156 +1,84 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 10:30:06
+ * @LastEditors: zhp
+ * @Description:
+ */
 export default function ({
   single = false,
-  color,
+  colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
   titleValue,
   subtitle,
+  dataList,
   previousSum,
   currentSum,
   targetSum,
 }) {
   return {
-    grid: {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 0,
-      containLabel: true,
+  grid: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    containLabel: true,
+  },
+  // tooltip: {},
+  title: {
+    text: titleValue,
+    left: "49%",
+    top: "39%",
+    textAlign: "center",
+    textStyle: {
+      fontWeight: 600,
+      fontSize: 32,
+      color: "#fffd",
     },
-    tooltip: {},
-    title: {
-      text: titleValue,
-      left: "49%",
-      top: "39%",
-      textAlign: "center",
-      textStyle: {
-        fontWeight: 600,
-        fontSize: 32,
-        color: "#fffd",
-      },
-      subtext: `\u2002${subtitle}\u2002`,
-      subtextStyle: {
-        fontSize: 14,
-        fontWeight: 100,
-        color: "#fffd",
-        align: "right",
-      },
+    subtext: `\u2002${subtitle}\u2002`,
+    subtextStyle: {
+      fontSize: 14,
+      fontWeight: 100,
+      color: "#fffd",
+      align: "right",
     },
-    series: [
-      // 背景 series
-      {
-        type: "pie",
-        name: "当前目标",
-        radius: ["70%", "85%"],
-        center: ["50%", "52%"],
-        emptyCircleStyle: {
-          color: "#040c5f45",
-        },
-      },
-      // 数据 series
-      {
-        type: "pie",
-        radius: ["70%", "85%"],
-        center: ["50%", "52%"],
-        avoidLabelOvervlap: false,
-        label: {
-          show: false,
-        },
+  },
+  // legend: {
+  //   top: '5%',
+  //   left: 'center'
+  // },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+    	// center: ['50%', '40%'],
+			radius: ['60%', '90%'],
+      avoidLabelOverlap: false,
         labelLine: {
-          show: false,
-        },
-        data: [
-          {
-            value: currentSum,
-            name: "当前累计产出",
-            selected: false,
-            itemStyle: {
-              borderJoin: "round",
-              borderCap: "round",
-              borderWidth: 12,
-              borderRadius: "50%",
-              // color: {
-              //   type: "linear",
-              //   x: 1,
-              //   y: 0,
-              //   x2: 0,
-              //   y2: 1,
-              //   colorStops: single
-              //     ? [
-              //         { offset: 0, color: `${color}11` },
-              //         { offset: 1, color: `${color}` },
-              //       ]
-              //     : [
-              //         { offset: 0, color: "#4CF0E811" },
-              //         { offset: 1, color: "#4CF0E8" },
-              //       ],
-              // },
-            },
-          },
-          {
-            value:
-              targetSum > currentSum
-                ? targetSum - currentSum
-                : targetSum == 0
-                ? currentSum == 0
-                  ? 1
-                  : 0
-                : 0,
-
-            name: "未达成累计",
-            itemStyle: { color: "transparent" },
-            label: { show: false },
-          },
-        ],
+        show: false
       },
-      // 数据 series2 - 2023累计
-      single
-        ? null
-        : {
-            type: "pie",
-            radius: ["55%", "70%"],
-            center: ["50%", "52%"],
-            avoidLabelOvervlap: false,
-            label: {
-              show: false,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: [
-              {
-                value: previousSum,
-                name: "上期累计产出",
-                selected: false,
-                itemStyle: {
-                  borderJoin: "round",
-                  borderCap: "round",
-                  borderWidth: 12,
-                  borderRadius: "50%",
-                  // color: {
-                  //   type: "linear",
-                  //   x: 1,
-                  //   y: 0,
-                  //   x2: 0,
-                  //   y2: 1,
-                  //   colorStops: [
-                  //     { offset: 0, color: "#1065ff66" },
-                  //     { offset: 1, color: "#1065ff" },
-                  //   ],
-                  // },
-                },
-              },
-              {
-                value:
-                  targetSum > previousSum
-                    ? targetSum - previousSum
-                    : previousSum == 0
-                    ? 1
-                    : 0,
-                name: "-",
-                itemStyle: { color: "transparent" },
-                label: { show: false },
-              },
-            ],
-          },
-    ],
+      label: {
+        show: false
+      },
+      data: dataList && dataList.length > 0 && dataList.map((item, index) => ({
+						name:item.name,
+            value: item.value,
+
+						itemStyle:{
+							color:{
+								type: 'linear',
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								global: false,
+								colorStops:[
+									{offset: 0,color:colors[index%5]},
+									{offset: 1,color:colors[index%5]+'33'}
+								]
+							}
+						}
+            }))
+    }
+  ]
   };
 }