优化告警统计样式

src/components/chart/options.ts

@@ -58,10 +58,10 @@ export function getPieOption({ data = [] as any[],
     // },
     legend: {
       textStyle: {
-        fontSize: getPx(14),
+        fontSize: 14,
         color: getTheme() === 'dark' ? '#fff' : '#333',
       },
-      itemWidth: getPx(20), itemHeight: getPx(14),
+      itemWidth: getPx(20), itemHeight: 14,
       ...legend
     },
     color: colors,
@@ -84,21 +84,22 @@ export function getPieOption({ data = [] as any[],
           // formatter: '{b}\n{d}%',
           minMargin: 5,
           edgeDistance: 10,
-          lineHeight: getPx(14),
-          fontSize: getPx(14),
+          lineHeight: 14,
+          fontSize: 14,
           color: getTheme() === 'dark' ? '#fff' : '#333',
           position: "center",
           formatter: `{a|${total} }\n{b|告警总数}`,
           rich: {
             a: {
               color: getTheme() === 'dark' ? '#fff' : '#333',
-              fontSize: getPx(24),
+              fontSize: 22,
+              lineHeight: 26,
               fontWeight: 'bold'
             },
             b: {
               color: getTheme() === 'dark' ? '#fff' : '#333',
-              fontSize: getPx(16),
-              lineHeight: getPx(40),
+              fontSize: 14,
+              lineHeight: 18,
             }
           }
         },
@@ -129,14 +130,16 @@ export function getPie3Option({ data = [] as any[],
       top: '41%',
       left: 'center',
       textStyle: {
-        fontSize: getPx(20),
+        fontSize: 18,
         fontWeight: 'normal',
         color: getTheme() === 'dark' ? '#fff' : '#333',
-        lineHeight: getPx(20),
+        lineHeight: 10,
+        padding: 0,
       },
       subtextStyle: {
-        fontSize: getPx(24),
-        lineHeight: getPx(24),
+        fontSize: 18,
+        lineHeight: 10,
+        padding: 0,
         fontWeight: 'bold',
         color: getTheme() === 'dark' ? '#fff' : '#333',
       },
@@ -160,8 +163,8 @@ export function getPie3Option({ data = [] as any[],
           formatter: '{b}\n{d}% ({c})',
           minMargin: 5,
           edgeDistance: 10,
-          lineHeight: getPx(14),
-          fontSize: getPx(14),
+          lineHeight: 16,
+          fontSize: 13,
           color: getTheme() === 'dark' ? '#fff' : '#333',
         },
         labelLine: {
@@ -195,7 +198,7 @@ export function getPie4Option({ data = [] as any[],
       bottom: '0',
       left: 'center',
       textStyle: {
-        fontSize: getPx(14),
+        fontSize: 14,
         fontWeight: 'normal'
       },
     },
@@ -336,7 +339,7 @@ export function getRadarOption({
       // startAngle: 45,
       axisName: {
         color: '#222',
-        fontSize: getPx(14),
+        fontSize: 14,
         padding: [0, 0]
       },
     },

src/views/iot/alarm/dashboard/index.vue

@@ -167,11 +167,11 @@ const onSearchTypeChange = () => {
 			chart1.value?.draw(
 				getPieOption({
 					radius: ['45%', '60%'],
-					center: ['35%', '50%'],
+					center: ['32%', '50%'],
 					legend: {
 						orient: 'vertical',
 						top: 'center',
-						right: '10%',
+						right: 5,
 					},
 					total,
 					data: resData.map((item: any) => ({