fix: 概览页面样式调整

frontend/src/views/home/status/index.vue

@@ -184,39 +184,82 @@ const freshChart = (chartName: string, Title: string, Data: number) => {
                 textStyle: {
                     color: '#0f0f0f',
                     lineHeight: 30,
-                    fontSize: 24,
+                    fontSize: 20,
-                    fontWeight: '500',
+                    fontWeight: '400',
                 },
                 left: '50%',
                 top: '32%',
                 subtext: Title,
                 subtextStyle: {
                     color: '#000000',
-                    fontSize: 18,
+                    fontSize: 14,
                 },
                 textAlign: 'center',
             },
         ],
+        polar: {
+            radius: ['72%', '92%'],
+            center: ['50%', '50%'],
+        },
+        angleAxis: {
+            max: 100,
+            show: false,
+        },
+        radiusAxis: {
+            type: 'category',
+            show: true,
+            axisLabel: {
+                show: false,
+            },
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+        },
         series: [
             {
-                name: Title,
+                type: 'bar',
-                type: 'pie',
+                roundCap: true,
-                radius: ['75%', '96%'],
+                barWidth: 30,
-                center: ['50%', '50%'],
+                showBackground: true,
-                color: ['#08a3f0', '#efefef'],
+                coordinateSystem: 'polar',
+                color: [
+                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                        {
+                            offset: 0,
+                            color: 'rgba(81, 192, 255, .1)',
+                        },
+                        {
+                            offset: 1,
+                            color: '#4261F6',
+                        },
+                    ]),
+                    '#f2f2f2',
+                ],
                 label: {
-                    position: 'center',
-                    normal: {
                     show: false,
                 },
-                },
+                data: [Data],
-                data: [{ value: Data }, { value: 100 - Data }],
             },
             {
                 type: 'pie',
-                radius: ['0%', '65%'],
+                radius: ['0%', '55%'],
                 center: ['50%', '50%'],
-                hoverAnimation: false,
+                label: {
+                    show: false,
+                },
+                color: '#fff',
+                data: [
+                    {
+                        value: 0,
+                        itemStyle: {
+                            shadowColor: '#e3e3e3',
+                            shadowBlur: 20,
+                        },
+                    },
+                ],
             },
         ],
     };