优化图表大小及描述

web-vue/packages/core/layouts/views/desktop/workbench/components/ContractInfo.vue

@@ -39,7 +39,7 @@
   const statusDict = ref<DictData[]>([]);
 
   const STATUS_COLORS = ['#3B82F6', '#10B981', '#F97316', '#EC4899', '#8B5CF6', '#06B6D4'];
-  const AMOUNT_LINE_COLOR = '#F59E0B';
+  const AMOUNT_LINE_COLOR = '#FBBF24';
   let pieChartInstance: echarts.ECharts | null = null;
   let barChartInstance: echarts.ECharts | null = null;
   let resizeObserver: ResizeObserver | null = null;
@@ -208,7 +208,7 @@
       series.push({
         name: '空态环',
         type: 'pie',
-        radius: ['46%', '72%'],
+        radius: ['40%', '64%'],
         center: ['50%', '44%'],
         silent: true,
         legendHoverLink: false,
@@ -234,7 +234,7 @@
     series.push({
       name: '合同状态',
       type: 'pie',
-      radius: total ? ['46%', '72%'] : [0, 0],
+      radius: total ? ['40%', '64%'] : [0, 0],
       center: ['50%', '44%'],
       avoidLabelOverlap: true,
       minAngle: total ? 4 : 0,
@@ -245,9 +245,9 @@
       },
       label: {
         show: total,
-        formatter: ({ name, value, percent }) => (total ? `${name}\n${value}项 / ${percent}%` : ''),
+        formatter: ({ name, percent }) => (total && Number(percent) >= 8 ? `${name}\n${percent}%` : ''),
         color: isDark ? '#e2e8f0' : '#334155',
-        fontSize: 12,
+        fontSize: 11,
       },
       emphasis: {
         scale: true,
@@ -257,6 +257,9 @@
       silent: !total,
       labelLine: {
         show: total,
+        length: 4,
+        length2: 3,
+        maxSurfaceAngle: 80,
       },
     });
 
@@ -316,7 +319,7 @@
               left: 'center',
               top: '51%',
               style: {
-                text: `金额 ${formatAmountWan(totalContractAmount.value, 2)}万元`,
+                text: ` ${formatAmountWan(totalContractAmount.value, 2)}万元`,
                 fill: isDark ? '#94a3b8' : '#64748b',
                 fontSize: 12,
                 fontWeight: 500,
@@ -401,7 +404,7 @@
         yAxisIndex: 1,
         smooth: true,
         symbol: 'circle',
-        symbolSize: 6,
+        symbolSize: 4,
         itemStyle: {
           color: AMOUNT_LINE_COLOR,
         },
@@ -409,6 +412,19 @@
           color: AMOUNT_LINE_COLOR,
           width: 2,
         },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(251, 191, 36, 0.28)' },
+              { offset: 1, color: 'rgba(251, 191, 36, 0.04)' },
+            ],
+          },
+        },
         emphasis: {
           focus: 'series',
         },
@@ -460,8 +476,16 @@
         left: 'center',
         itemGap: 16,
         data: [...statusItems.map((item) => item.label), ...(hasData ? ['合同金额'] : [])],
+        formatter: (name) => (name === '合同金额' ? `{amount|${name}}` : name),
         textStyle: {
           color: isDark ? '#e2e8f0' : '#475569',
+          rich: {
+            amount: {
+              color: isDark ? '#94a3b8' : '#64748b',
+              fontSize: 12,
+              fontWeight: 400,
+            },
+          },
         },
       },
       xAxis: {
@@ -509,12 +533,16 @@
           splitLine: {
             show: false,
           },
+          nameGap: 8,
           nameTextStyle: {
-            color: isDark ? '#94a3b8' : '#64748b',
+            color: isDark ? 'rgba(148, 163, 184, 0.72)' : 'rgba(100, 116, 139, 0.88)',
-            padding: [0, 0, 2, 0],
+            padding: [0, 0, 0, 0],
+            align: 'right',
+            fontSize: 11,
+            fontWeight: 400,
           },
           axisLabel: {
-            color: isDark ? '#94a3b8' : '#64748b',
+            color: isDark ? 'rgba(148, 163, 184, 0.78)' : 'rgba(100, 116, 139, 0.92)',
             formatter: (value) => `${value}`,
           },
         },

web-vue/packages/core/layouts/views/desktop/workbench/components/ProjectTask.vue

@@ -179,7 +179,7 @@
       series.push({
         name: '空态环',
         type: 'pie',
-        radius: ['46%', '72%'],
+        radius: ['40%', '64%'],
         center: ['50%', '44%'],
         silent: true,
         legendHoverLink: false,
@@ -205,7 +205,7 @@
     series.push({
       name: '任务状态',
       type: 'pie',
-      radius: total ? ['46%', '72%'] : [0, 0],
+      radius: total ? ['40%', '64%'] : [0, 0],
       center: ['50%', '44%'],
       avoidLabelOverlap: true,
       minAngle: total ? 4 : 0,
@@ -216,9 +216,9 @@
       },
       label: {
         show: total,
-        formatter: ({ name, value, percent }) => (total ? `${name}\n${value}项 / ${percent}%` : ''),
+        formatter: ({ name, percent }) => (total && Number(percent) >= 8 ? `${name}\n${percent}%` : ''),
         color: isDark ? '#e2e8f0' : '#334155',
-        fontSize: 12,
+        fontSize: 11,
       },
       emphasis: {
         scale: true,
@@ -228,6 +228,9 @@
       silent: !total,
       labelLine: {
         show: total,
+        length: 4,
+        length2: 3,
+        maxSurfaceAngle: 80,
       },
     });