优化页面UI,修改测试bug

hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue

@@ -100,8 +100,20 @@
   const drawEcharts = () => {
     data.value.forEach((item, index) => {
       const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
-
-      const handred = 100;
+      const bottomColor = [
+        'rgba(219, 222, 232, 1)',
+        'rgba(221, 226, 223, 1)',
+        'rgba(233, 228, 219, 1)',
+        'rgba(221, 216, 235, 1)',
+        'rgba(240, 228, 228, 1)',
+      ];
+      const mianColor = [
+        'rgba(24, 106, 255, 1)',
+        'rgba(58, 194, 127, 1)',
+        'rgba(249, 183, 50, 1)',
+        'rgba(120, 76, 212, 1)',
+        'rgba(255, 55, 103, 1)',
+      ];
       let point = parseInt(item.budgetAchievement.replace('%', ''));
       const option = {
         backgroundColor: 'transparent',
@@ -127,55 +139,61 @@
             },
           },
         ],
-        // tooltip: {
-        //   formatter: function (params) {
-        //     return params.name + '：' + params.percent + ' %';
-        //   },
-        // },
         series: [
           {
-            name: 'circle',
             type: 'pie',
-            clockWise: true,
             radius: ['40%', '50%'],
             center: ['50%', '40%'],
-            itemStyle: {
+            label: {
               normal: {
-                label: {
-                  show: false,
-                },
-                labelLine: {
-                  show: false,
-                },
+                show: false,
               },
             },
-            hoverAnimation: false,
             data: [
               {
-                value: point,
-                name: '占比',
+                name: '',
+                value: 100,
                 itemStyle: {
                   normal: {
-                    color: '#4FADFD',
-                    label: {
-                      show: false,
-                    },
-                    labelLine: {
-                      show: false,
-                    },
-                  },
-                },
-              },
-              {
-                name: '剩余',
-                value: handred - point,
-                itemStyle: {
-                  normal: {
-                    color: '#E1E8EE',
+                    color: bottomColor[index],
                   },
                 },
               },
             ],
+            zlevel: 1,
+          },
+          {
+            name: 'main',
+            type: 'pie',
+            radius: ['38%', '55%'],
+            center: ['50%', '40%'],
+            data: [
+              {
+                value: point,
+                label: {
+                  show: true,
+                  position: 'center',
+                  fontSize: 40,
+                },
+                labelLine: { show: false },
+                itemStyle: {
+                  normal: {
+                    color: mianColor[index],
+                    shadowBlur: 10,
+                    shadowColor: mianColor[index],
+                  },
+                },
+              },
+              {
+                value: 100 - point,
+                itemStyle: {
+                  normal: {
+                    color: 'transparent',
+                  },
+                },
+              },
+            ],
+            zlevel: 2,
           },
         ],
       };