diff --git a/src/views/Company/components/FinancialPanorama/components/ComparisonAnalysis.tsx b/src/views/Company/components/FinancialPanorama/components/ComparisonAnalysis.tsx index f8e2c002..9cec1381 100644 --- a/src/views/Company/components/FinancialPanorama/components/ComparisonAnalysis.tsx +++ b/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 = ({ comparison }) => { if (!Array.isArray(comparison) || comparison.length === 0) return null; @@ -29,11 +35,15 @@ export const ComparisonAnalysis: React.FC = ({ comparis const chartOption = getComparisonChartOption(revenueData, profitData); return ( - - - - - + + + ); }; diff --git a/src/views/Company/components/FinancialPanorama/index.tsx b/src/views/Company/components/FinancialPanorama/index.tsx index 4b7b0b90..4a58701b 100644 --- a/src/views/Company/components/FinancialPanorama/index.tsx +++ b/src/views/Company/components/FinancialPanorama/index.tsx @@ -288,12 +288,7 @@ const FinancialPanorama: React.FC = ({ stockCode: propSt {/* 营收与利润趋势 */} {!loading && comparison && comparison.length > 0 && ( - - - 盈利与利润趋势 - - - + )} {/* 主营业务 */} diff --git a/src/views/Company/components/FinancialPanorama/utils/chartOptions.ts b/src/views/Company/components/FinancialPanorama/utils/chartOptions.ts index f2ef81fd..cbdbb5cb 100644 --- a/src/views/Company/components/FinancialPanorama/utils/chartOptions.ts +++ b/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)' }, + ], + }, + }, }, ], };