fix(CompetitiveAnalysisCard): 修复雷达图文字在深色背景上不清晰问题
- 更新 RadarChartOption 类型定义，支持更多样式属性 - 指标名称改为金色 (#F4D03F)，加粗显示 - 分割线改为金色系透明度渐变 - 分割区域改为深色透明背景 - 数据标签改为金色 - tooltip 使用深色背景 + 白色文字 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -8,7 +8,10 @@
|
||||
|
||||
export interface FormatUtils {
|
||||
formatCurrency: (value: number | null | undefined) => string;
|
||||
formatBusinessRevenue: (value: number | null | undefined, unit?: string) => string;
|
||||
formatBusinessRevenue: (
|
||||
value: number | null | undefined,
|
||||
unit?: string
|
||||
) => string;
|
||||
formatPercentage: (value: number | null | undefined) => string;
|
||||
}
|
||||
|
||||
@@ -186,7 +189,7 @@ export interface ValueChainData {
|
||||
// ==================== 相关公司类型 ====================
|
||||
|
||||
export interface RelatedCompanyRelationship {
|
||||
role: 'source' | 'target';
|
||||
role: "source" | "target";
|
||||
connected_node: string;
|
||||
}
|
||||
|
||||
@@ -205,7 +208,7 @@ export interface RelatedCompany {
|
||||
|
||||
// ==================== 关键因素类型 ====================
|
||||
|
||||
export type ImpactDirection = 'positive' | 'negative' | 'neutral' | 'mixed';
|
||||
export type ImpactDirection = "positive" | "negative" | "neutral" | "mixed";
|
||||
|
||||
export interface KeyFactor {
|
||||
factor_name: string;
|
||||
@@ -297,7 +300,11 @@ export interface IndustryRankData {
|
||||
// ==================== 主组件 Props 类型 ====================
|
||||
|
||||
/** Tab 类型 */
|
||||
export type DeepAnalysisTabKey = 'strategy' | 'business' | 'valueChain' | 'development';
|
||||
export type DeepAnalysisTabKey =
|
||||
| "strategy"
|
||||
| "business"
|
||||
| "valueChain"
|
||||
| "development";
|
||||
|
||||
export interface DeepAnalysisTabProps {
|
||||
comprehensiveData?: ComprehensiveData;
|
||||
@@ -353,12 +360,23 @@ export interface RadarIndicator {
|
||||
}
|
||||
|
||||
export interface RadarChartOption {
|
||||
tooltip: { trigger: string };
|
||||
tooltip: {
|
||||
trigger: string;
|
||||
backgroundColor?: string;
|
||||
borderColor?: string;
|
||||
textStyle?: { color: string };
|
||||
};
|
||||
radar: {
|
||||
indicator: RadarIndicator[];
|
||||
shape: string;
|
||||
splitNumber: number;
|
||||
name: { textStyle: { color: string; fontSize: number } };
|
||||
name: {
|
||||
textStyle: {
|
||||
color: string;
|
||||
fontSize: number;
|
||||
fontWeight?: string;
|
||||
};
|
||||
};
|
||||
splitLine: { lineStyle: { color: string[] } };
|
||||
splitArea: { show: boolean; areaStyle: { color: string[] } };
|
||||
axisLine: { lineStyle: { color: string } };
|
||||
@@ -373,7 +391,12 @@ export interface RadarChartOption {
|
||||
symbolSize: number;
|
||||
lineStyle: { width: number; color: string };
|
||||
areaStyle: { color: string };
|
||||
label: { show: boolean; formatter: (params: { value: number }) => number; color: string; fontSize: number };
|
||||
label: {
|
||||
show: boolean;
|
||||
formatter: (params: { value: number }) => number;
|
||||
color: string;
|
||||
fontSize: number;
|
||||
};
|
||||
}>;
|
||||
}>;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import type {
|
||||
ValueChainData,
|
||||
RadarChartOption,
|
||||
SankeyChartOption,
|
||||
} from '../types';
|
||||
} from "../types";
|
||||
|
||||
/**
|
||||
* 生成竞争力雷达图配置
|
||||
@@ -23,14 +23,14 @@ export const getRadarChartOption = (
|
||||
|
||||
const scores = comprehensiveData.competitive_position.scores;
|
||||
const indicators = [
|
||||
{ name: '市场地位', max: 100 },
|
||||
{ name: '技术实力', max: 100 },
|
||||
{ name: '品牌价值', max: 100 },
|
||||
{ name: '运营效率', max: 100 },
|
||||
{ name: '财务健康', max: 100 },
|
||||
{ name: '创新能力', max: 100 },
|
||||
{ name: '风险控制', max: 100 },
|
||||
{ name: '成长潜力', max: 100 },
|
||||
{ name: "市场地位", max: 100 },
|
||||
{ name: "技术实力", max: 100 },
|
||||
{ name: "品牌价值", max: 100 },
|
||||
{ name: "运营效率", max: 100 },
|
||||
{ name: "财务健康", max: 100 },
|
||||
{ name: "创新能力", max: 100 },
|
||||
{ name: "风险控制", max: 100 },
|
||||
{ name: "成长潜力", max: 100 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
@@ -44,40 +44,71 @@ export const getRadarChartOption = (
|
||||
scores.growth || 0,
|
||||
];
|
||||
|
||||
// 黑金主题配色
|
||||
const THEME = {
|
||||
gold: "#F4D03F",
|
||||
goldLight: "rgba(212, 175, 55, 0.6)",
|
||||
goldDim: "rgba(212, 175, 55, 0.3)",
|
||||
blue: "#3182ce",
|
||||
blueArea: "rgba(49, 130, 206, 0.3)",
|
||||
};
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'item' },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(30, 30, 35, 0.95)",
|
||||
borderColor: THEME.goldDim,
|
||||
textStyle: { color: "#fff" },
|
||||
},
|
||||
radar: {
|
||||
indicator: indicators,
|
||||
shape: 'polygon',
|
||||
shape: "polygon",
|
||||
splitNumber: 4,
|
||||
name: { textStyle: { color: '#666', fontSize: 12 } },
|
||||
splitLine: {
|
||||
lineStyle: { color: ['#e8e8e8', '#e0e0e0', '#d0d0d0', '#c0c0c0'] },
|
||||
// 指标名称 - 使用金色确保在深色背景上清晰可见
|
||||
name: {
|
||||
textStyle: {
|
||||
color: THEME.gold,
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
// 分割线 - 金色系
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
THEME.goldDim,
|
||||
"rgba(212, 175, 55, 0.2)",
|
||||
"rgba(212, 175, 55, 0.15)",
|
||||
"rgba(212, 175, 55, 0.1)",
|
||||
],
|
||||
},
|
||||
},
|
||||
// 分割区域 - 深色透明
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
|
||||
color: ["rgba(30, 30, 35, 0.6)", "rgba(40, 40, 45, 0.4)"],
|
||||
},
|
||||
},
|
||||
axisLine: { lineStyle: { color: '#ddd' } },
|
||||
// 轴线 - 金色
|
||||
axisLine: { lineStyle: { color: THEME.goldDim } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '竞争力评分',
|
||||
type: 'radar',
|
||||
name: "竞争力评分",
|
||||
type: "radar",
|
||||
data: [
|
||||
{
|
||||
value: data,
|
||||
name: '当前评分',
|
||||
symbol: 'circle',
|
||||
name: "当前评分",
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
lineStyle: { width: 2, color: '#3182ce' },
|
||||
areaStyle: { color: 'rgba(49, 130, 206, 0.3)' },
|
||||
lineStyle: { width: 2, color: THEME.blue },
|
||||
areaStyle: { color: THEME.blueArea },
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (params: { value: number }) => params.value,
|
||||
color: '#3182ce',
|
||||
color: THEME.gold,
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
@@ -117,22 +148,22 @@ export const getSankeyChartOption = (
|
||||
links.push({
|
||||
source: flow.source.node_name,
|
||||
target: flow.target.node_name,
|
||||
value: parseFloat(flow.flow_metrics?.flow_ratio || '1') || 1,
|
||||
lineStyle: { color: 'source', opacity: 0.6 },
|
||||
value: parseFloat(flow.flow_metrics?.flow_ratio || "1") || 1,
|
||||
lineStyle: { color: "source", opacity: 0.6 },
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
|
||||
tooltip: { trigger: "item", triggerOn: "mousemove" },
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
emphasis: { focus: 'adjacency' },
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
emphasis: { focus: "adjacency" },
|
||||
data: Array.from(nodes).map((name) => ({ name })),
|
||||
links: links,
|
||||
lineStyle: { color: 'gradient', curveness: 0.5 },
|
||||
label: { color: '#333', fontSize: 10 },
|
||||
lineStyle: { color: "gradient", curveness: 0.5 },
|
||||
label: { color: "#333", fontSize: 10 },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user