diff --git a/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx b/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx index 98ff1d8f..efd90031 100644 --- a/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx +++ b/src/views/Company/components/FinancialPanorama/components/MainBusinessAnalysis.tsx @@ -66,10 +66,16 @@ const fixedColumnStyles = ` .main-business-table .ant-table-thead .ant-table-cell-fix-right { background: rgba(26, 32, 44, 0.95) !important; } - .main-business-table .ant-table-tbody > tr:hover .ant-table-cell-fix-left, - .main-business-table .ant-table-tbody > tr:hover .ant-table-cell-fix-right { + .main-business-table .ant-table-tbody > tr:hover > td { background: rgba(212, 175, 55, 0.08) !important; } + .main-business-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left, + .main-business-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right { + background: #242d3d !important; + } + .main-business-table .ant-table-tbody > tr > td { + background: #1A202C !important; + } `; // 历史对比表格数据行类型(包含业务明细) diff --git a/src/views/Company/components/FinancialPanorama/utils/chartOptions.ts b/src/views/Company/components/FinancialPanorama/utils/chartOptions.ts index 0d9b708b..f2ef81fd 100644 --- a/src/views/Company/components/FinancialPanorama/utils/chartOptions.ts +++ b/src/views/Company/components/FinancialPanorama/utils/chartOptions.ts @@ -160,8 +160,20 @@ export const getComparisonChartOption = ( }; }; +// 黑金主题饼图配色 +const BLACK_GOLD_PIE_COLORS = [ + '#D4AF37', // 金色 + '#B8860B', // 深金色 + '#FFD700', // 亮金色 + '#DAA520', // 金菊色 + '#CD853F', // 秘鲁色 + '#F4A460', // 沙褐色 + '#DEB887', // 实木色 + '#D2691E', // 巧克力色 +]; + /** - * 生成主营业务饼图配置 + * 生成主营业务饼图配置 - 黑金主题 * @param title 标题 * @param subtitle 副标题 * @param data 饼图数据 @@ -177,9 +189,22 @@ export const getMainBusinessPieOption = ( text: title, subtext: subtitle, left: 'center', + textStyle: { + color: '#D4AF37', + fontSize: 14, + }, + subtextStyle: { + color: '#A0AEC0', + fontSize: 12, + }, }, tooltip: { trigger: 'item', + backgroundColor: 'rgba(26, 32, 44, 0.95)', + borderColor: 'rgba(212, 175, 55, 0.3)', + textStyle: { + color: '#E2E8F0', + }, formatter: (params: { name: string; value: number; percent: number }) => { return `${params.name}
营收: ${formatUtils.formatLargeNumber( params.value @@ -190,17 +215,34 @@ export const getMainBusinessPieOption = ( orient: 'vertical', left: 'left', top: 'center', + textStyle: { + color: '#E2E8F0', + fontSize: 12, + }, }, + color: BLACK_GOLD_PIE_COLORS, series: [ { type: 'pie', - radius: '50%', + radius: '55%', + center: ['55%', '50%'], data: data, + label: { + show: true, + color: '#E2E8F0', + fontSize: 11, + formatter: '{b}: {d}%', + }, + labelLine: { + lineStyle: { + color: 'rgba(212, 175, 55, 0.5)', + }, + }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', + shadowColor: 'rgba(212, 175, 55, 0.5)', }, }, },