feat:修改饼图图例样式

src/views/components/PieChart.vue

@@ -233,21 +233,20 @@ const createPieChartOption = (pieData: any[]) => {
     ...getBaseChartConfig(),
     tooltip: getBaseTooltipConfig(),
     legend: {
-      orient: 'horizontal',
-      top: 0,
-      left: 'center',
-      type: 'scroll',
+      orient: 'horizontal' as const,
+      left: 'center' as const,
+      top: '0' as const,
+      padding: [10, 20, 0, 20], // 调整padding，确保顶部有足够空间
+      itemGap: 15,
+      type: 'scroll' as const,
       textStyle: {
         fontSize: 12
       },
-      selected: selectedData,
-      // 数据项多时调整图例位置
-      ...(isManyItems && {
-        orient: 'vertical',
-        right: 5,
-        top: 'middle',
-        height: '80%'
-      })
+      pageTextStyle: {
+        fontSize: 10
+      },
+      pageIconSize: 12,
+      pageButtonItemGap: 5
     },
     series: [{
       name: props.title,
@@ -299,8 +298,8 @@ const createPieChartOption = (pieData: any[]) => {
       color: colors,
       selectedMode: 'single',
       selectedOffset: 5, // 减小选中偏移量，避免庙边效果
-      // 使用响应式布局
-      top: '10%',
+      // 使用响应式布局，为上方图例留出空间
+      top: isManyItems ? '15%' : '10%',
       bottom: '5%',
       left: responsiveLayout.left,
       right: responsiveLayout.right
@@ -369,12 +368,14 @@ const getResponsiveLayout = (isManyItems: boolean) => {
   
   if (screenWidth < 768) { // 小屏幕
     return {
+      top: isManyItems ? '15%' : '10%',
       left: '5%',
       right: '5%',
       radius: isManyItems ? ['25%', '50%'] : ['35%', '60%']
     };
   } else if (screenWidth < 1200) { // 中等屏幕
     return {
+      top: isManyItems ? '15%' : '10%',
       left: '25%',
       right: '25%',
       radius: isManyItems ? ['30%', '55%'] : ['40%', '65%']