style(ComparisonAnalysis): 应用黑金主题样式

- 图表配置：金色标题、深色 tooltip、金色坐标轴
- 净利润折线改为金色渐变填充
- 营收柱状图首个柱子使用金色
- 组件容器：透明背景 + 金色边框
- 移除外部重复标题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Company/components/FinancialPanorama/components/ComparisonAnalysis.tsx

@@ -1,14 +1,20 @@
 /**
- * 综合对比分析组件
+ * 综合对比分析组件 - 黑金主题
  */
 
 import React from 'react';
-import { Card, CardBody } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import ReactECharts from 'echarts-for-react';
 import { formatUtils } from '@services/financialService';
 import { getComparisonChartOption } from '../utils';
 import type { ComparisonAnalysisProps } from '../types';
 
+// 黑金主题样式
+const THEME = {
+  cardBg: 'transparent',
+  border: 'rgba(212, 175, 55, 0.2)',
+};
+
 export const ComparisonAnalysis: React.FC<ComparisonAnalysisProps> = ({ comparison }) => {
   if (!Array.isArray(comparison) || comparison.length === 0) return null;
 
@@ -29,11 +35,15 @@ export const ComparisonAnalysis: React.FC<ComparisonAnalysisProps> = ({ comparis
   const chartOption = getComparisonChartOption(revenueData, profitData);
 
   return (
-    <Card>
-      <CardBody>
-        <ReactECharts option={chartOption} style={{ height: '400px' }} />
-      </CardBody>
-    </Card>
+    <Box
+      bg={THEME.cardBg}
+      border="1px solid"
+      borderColor={THEME.border}
+      borderRadius="md"
+      p={4}
+    >
+      <ReactECharts option={chartOption} style={{ height: '350px' }} />
+    </Box>
   );
 };
 

src/views/Company/components/FinancialPanorama/index.tsx

@@ -288,12 +288,7 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
 
         {/* 营收与利润趋势 */}
         {!loading && comparison && comparison.length > 0 && (
-          <Box>
-            <Text fontSize="lg" fontWeight="bold" mb={4} color="#D4AF37">
-              盈利与利润趋势
-            </Text>
           <ComparisonAnalysis comparison={comparison} />
-          </Box>
         )}
 
         {/* 主营业务 */}

src/views/Company/components/FinancialPanorama/utils/chartOptions.ts

@@ -91,7 +91,7 @@ export const getMetricChartOption = (
 };
 
 /**
- * 生成营收与利润趋势图表配置
+ * 生成营收与利润趋势图表配置 - 黑金主题
  * @param revenueData 营收数据
  * @param profitData 利润数据
  * @returns ECharts 配置
@@ -101,34 +101,96 @@ export const getComparisonChartOption = (
   profitData: { period: string; value: number }[]
 ) => {
   return {
+    backgroundColor: 'transparent',
     title: {
       text: '营收与利润趋势',
       left: 'center',
+      textStyle: {
+        color: '#D4AF37',
+        fontSize: 16,
+        fontWeight: 'bold',
+      },
     },
     tooltip: {
       trigger: 'axis',
+      backgroundColor: 'rgba(26, 32, 44, 0.95)',
+      borderColor: 'rgba(212, 175, 55, 0.3)',
+      textStyle: {
+        color: '#E2E8F0',
+      },
       axisPointer: {
         type: 'cross',
+        crossStyle: {
+          color: 'rgba(212, 175, 55, 0.5)',
+        },
       },
     },
     legend: {
       data: ['营业收入', '净利润'],
       bottom: 0,
+      textStyle: {
+        color: '#A0AEC0',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '12%',
+      top: '15%',
+      containLabel: true,
     },
     xAxis: {
       type: 'category',
       data: revenueData.map((d) => d.period),
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(212, 175, 55, 0.3)',
+        },
+      },
+      axisLabel: {
+        color: '#A0AEC0',
+      },
     },
     yAxis: [
       {
         type: 'value',
         name: '营收(亿)',
         position: 'left',
+        nameTextStyle: {
+          color: '#A0AEC0',
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(212, 175, 55, 0.3)',
+          },
+        },
+        axisLabel: {
+          color: '#A0AEC0',
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(212, 175, 55, 0.1)',
+          },
+        },
       },
       {
         type: 'value',
         name: '利润(亿)',
         position: 'right',
+        nameTextStyle: {
+          color: '#A0AEC0',
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(212, 175, 55, 0.3)',
+          },
+        },
+        axisLabel: {
+          color: '#A0AEC0',
+        },
+        splitLine: {
+          show: false,
+        },
       },
     ],
     series: [
@@ -139,10 +201,10 @@ export const getComparisonChartOption = (
         itemStyle: {
           color: (params: { dataIndex: number; value: number }) => {
             const idx = params.dataIndex;
-            if (idx === 0) return '#3182CE';
+            if (idx === 0) return '#D4AF37'; // 金色作为基准
             const prevValue = revenueData[idx - 1].value;
             const currValue = params.value;
-            // 中国市场颜色
+            // 红涨绿跌
             return currValue >= prevValue ? '#EF4444' : '#10B981';
           },
         },
@@ -153,8 +215,21 @@ export const getComparisonChartOption = (
         yAxisIndex: 1,
         data: profitData.map((d) => d.value?.toFixed(2)),
         smooth: true,
-        itemStyle: { color: '#F59E0B' },
-        lineStyle: { width: 2 },
+        itemStyle: { color: '#D4AF37' },
+        lineStyle: { width: 2, color: '#D4AF37' },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(212, 175, 55, 0.3)' },
+              { offset: 1, color: 'rgba(212, 175, 55, 0.05)' },
+            ],
+          },
+        },
       },
     ],
   };