新增待办信息

web-vue/packages/biz/views/biz/dataReport/erp/components/ChartPie.vue

@@ -35,6 +35,7 @@
     </div>
   </Card>
 </template>
+
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { Card } from 'ant-design-vue';
@@ -157,7 +158,7 @@ const handleLegendSelect = (params: any) => {
   });
 };
 
-// 初始化图表（适配新布局）
+// 初始化图表（图例调整到最右侧）
 const initChart = () => {
   if (!chartDom.value || listAccount.value.length === 0) return;
   
@@ -189,23 +190,23 @@ const initChart = () => {
       formatter: '{b}: {c} 元 ({d}%)',
       textStyle: { fontSize: 12 }
     },
+    // 图例配置调整到最右侧
     legend: { 
-      orient: 'horizontal',
-      bottom: 5,
-      left: 'center',
+      orient: 'vertical',       // 垂直排列
+      right: 10,                // 右侧距离
+      top: 'center',            // 垂直居中
       textStyle: { fontSize: 12, color: '#666' },
       itemWidth: 12,
       itemHeight: 12,
-      itemGap: 30,
-      padding: [10, 20],
-      spacing: [20, 10],
+      itemGap: 15,              // 图例项间距
+      padding: [20, 10, 20, 10], // 内边距：上右下左
     },
     series: [
       {
         name: '账户金额',
         type: 'pie',
-        radius: ['40%', '70%'],
-        center: ['50%', '45%'],
+        radius: ['35%', '70%'],  // 调整饼图半径，给右侧图例留出空间
+        center: ['40%', '50%'],  // 饼图位置左移，适配右侧图例
         avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 8,
@@ -399,9 +400,9 @@ onUnmounted(() => {
   background: #f5f5f5;
 }
 
-/* 图表样式优化 */
+/* 图表样式优化 - 适配右侧图例 */
 :deep(.ant-card .echarts-legend-item) {
-  margin: 0 8px !important;
+  margin: 5px 0 !important;
   padding: 0 5px;
 }
 
@@ -425,7 +426,7 @@ onUnmounted(() => {
   color: #999;
 }
 
-/* 响应式适配 */
+/* 响应式适配 - 移动端图例调整 */
 @media (max-width: 768px) {
   .layout-container {
     flex-direction: column;
@@ -459,5 +460,14 @@ onUnmounted(() => {
     justify-content: space-between;
     padding: 0 2px;
   }
+
+  /* 移动端图例改回底部水平排列 */
+  :deep(.echarts-legend) {
+    top: auto !important;
+    right: auto !important;
+    bottom: 5px !important;
+    left: 'center' !important;
+    orient: 'horizontal' !important;
+  }
 }
 </style>